DEV Community

dianakw8591
dianakw8591

Posted on

4 2

Object Destructuring in JavaScript

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!

Image of Datadog

The Essential Toolkit for Front-end Developers

Take a user-centric approach to front-end monitoring that evolves alongside increasingly complex frameworks and single-page applications.

Get The Kit

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay