I recently found myself struggling with adding CSS classes to a React component. Once I understood the classes object and how it was created, most of my confusion stemmed from basic object destructuring. So I decided to write this post to solidify my understanding of destructuring assignments in JavaScript! Hopefully it will provide some clarity for others working through this concept as well.

A Quick Review of Objects

An object literal in JavaScript is constructed with key, value pairs separated by a colon. Each key, value pair is separated from the next pair by a comma. Values can be any datatype - arrays, objects, strings, functions, etc - while keys must always be strings, or something that JS can convert to a string, like a number.

let myObj = {a: 1, b: 2}

In myObj, a and b are both strings and JS gives me the shortcut of skipping writing the quotes around those.

To access values of myObj, I can use either dot notation or bracket notation:

myObj.a
//1
myObj["a"]
//1

In order to use dot notation to access an object property, the key must be a valid JavaScript identifier. From the MDN web docs, an identifier is a "sequence of characters in the code that identifies a variable, function, or property". Importantly, an identifier cannot begin with a digit. So, if I created an object like so

let numObj = {1: 'a', 2: 'b'}

I can access values with bracket notation

numObj[1]
//"a"

numObj['1']
//"a"

but dot notation results in an error:

numObj.1
// Uncaught SyntaxError: Unexpected number

Note that with bracket notation, JavaScript coerces 1 to the string "1". However, myObj[a] would result in an error - a is expected to be a variable in that case.

Basic Destructuring

A destructuring assignment allows the mass assignment of variables to object (or array) values. Using the previous myObj for example, I could assign variables to access values like so:

let a = myObj.a
let b = myObj.b
a
//1
b
//2

Or with a destructuring assignment, I can assign both those variables in one line:

let { a, b } = myObj
a
//1
b
//2

During destructuring, I can also assign new variable names:

let {a: first, b: second} = myObj
first
//1
second
//2

In this case, a and b are not simultaneously assigned as variables.

Nested Destructuring

Destructuring assignments can also handle nested objects. Let's start with myNestedObj:

let myNestedObj = {a: 1, b: {c: 3, d: {e: 4}}}

To assign the values of a and d I can destructure like so:

let {a, b: { d }} = myNestedObj
a
//1
d
//{e: 4}
b
//undefined

In this case, b is a 'step' to access d, and is not assigned in the destructuring. I can add the assignment of b like this:

let {a, b, b: { d }} = myNestedObj
b
//{c: 3, d: {…}}

Of course, I could destructure further to access e and assign new variable names if I felt like it too:

let {a: outer, b: { c, d: { e: inner }}} = myNestedObj
outer
//1
a
//undefined
b
//undefined
c
//3
d
//undefined
inner
//4
e
//undefined

The Power of Destructuring

Destructuring is an excellent way to access the properties of an object that might be passed into a function or as the props of a React component. Rather than write a line of code to assign a variable to each property, or use dot or bracket notation every time for access, objects can be destructured for code clarity and ease of writing. Destructuring can even happen in a function definition by destructuring the arguments! Overall, it's an incredibly useful concept and important to become comfortable with if you are developing in JavaScript.

Thanks for reading!