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!

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

๐Ÿ‘‹ Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay