Because Airbnb’s ESLint is Merciless in React

Introduction

In case this is your first time reading one of my posts, thanks for taking the time, I am a full stack software developer with a fondness for JavaScript, and the React framework, in particular.

For just over a year, in my free time after work, I’ve been teaching myself React with the help of online documentation, articles, tutorials and building (and breaking) side projects.

With all these sources of knowledge and inspiration, I managed to build a user registration application that I was pretty proud of. It had a React front end, an Express/Node.js server back end, a MySQL database, it used Passport.js and JSON Web Tokens to handle authentication, the Sequelize ORM to perform CRUD operations on the database, a password reset feature through Nodemailer, Swagger endpoint testing on the REST endpoints, a docker-compose.yml file to spin up all three pieces of the application simultaneously in a virtualized container environment, etc., etc. Have you had enough technologies thrown at you, yet? 😫

Yes, I threw out all those buzzwords, no, I‘m really not that big of a deal. 😉

Please understand, this project was by no means achieved in a day, it started as a very basic idea and mushroomed in scope as I made forward progress and got more ambitious to see how far I could push it. But by the time I’d gotten to that point, I was feeling pretty proud of myself. I’d made a cool, useful little side project — completely built in JavaScript.

Then I introduced Airbnb’s ESLint configuration into the mix, and was humbled as the VS Code browser lit up left and right with red squiggles of disapproval. 😞 Instead of quitting though, I persevered in learning the best practices of modern JavaScript/ES6 development (according to ESLint and Airbnb), fixed the majority of my errors and became a better developer along the way.

There was one error, however, which eluded me. The deeply nested, destructured object. How, pray tell, do you destructure a prop object that’s several levels deep in JavaScript to ESLint’s satisfaction?

Today, I will show you how to use ES6 to destructure nested objects, my friends, AND what’s more, prevent the dreaded undefined error if an object is missing that property entirely.

Let’s get to it.

The Issue: ES6 Object Destructuring & Deeply Nested Objects

To give you some insight into what I’m describing, let me back up just a minute and go over what object destructuring in JavaScript is, and why it’s a little daunting once your objects get complex.

Object Destructuring in a Nutshell

As per usual, MDN’s documentation sums up JavaScript destructuring nicely:

The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables. — MDN Docs, Destructuring Assignment

This is a feature introduced in ES6, and what it means, in practice, is that your code can go from looking like this:

Plain Old JavaScript Object

const myObject = {

a : "foo",

b : false,

c : 11

};

Traditional JS Object Property Access Example (Dot Notation and Bracket Notation)

With the object’s properties being accessed through dot notation or bracket notation like this:

console.log(myObject.a); // "foo"

console.log(myObject[b]); // false

console.log(myObject.c); // 11

ES6 Object Property Access Example (Destructured)

To being accessed like this:

const { a, b, c } = myObject;

console.log(a); // "foo"

console.log(b); // false

console.log(c); // 11

That’s pretty cool, right? It’s shorter, it’s much more concise to read, and it makes pretty good sense logically.

There’s a lot more cool things that can be done with both arrays and object and destructuring, and I’d recommend you read the docs for more examples.

Ok, so now that ES6’s destructuring has been defined, let’s look at my issue, which seemed a lot less straightforward with how to approach it (at least, at first pass, to me).

A Deeply Nested Object

Below is a screenshot of the object I was working with in my React application.

This was my nested object, written in traditional JavaScript dot notation syntax.

this.props.match.params.username; // what a mouthful! no one wants to write this anymore

To give a little more context around it, this object was being taken from the URL string and passed into the HTTP call from the browser’s client to the server side to identify (and validate) the username in the database. This syntax is courtesy of the react-router-dom NPM package and React’s props .

Regardless of where the object’s syntax and structure originated from, it’s complicated. It’s technically nested 4+ layers deep in this object to get to the useful piece of information, the username .

And unlike, const {a} = myObject; , trying to figure out how to dive several levels deep into an object was a little befuddling.

The ESLint Errors: Merciless as Always

But did ESLint care?

I never imagined I’d have reason to use a honey badger meme in a blog post, and yet, here it is.

In the immortal words of honey badger, “nope”.