Hello everyone! in this blog post today i'm going to be discussing object destructuring in Javascript. Object destructuring is a very important feature in JS and is commonly used in a lot of frameworks. Let's get started!

What is Object Destructuring in javascript?

If you ask MDN, it means

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

but like what does that mean? basically, it's a way to assign certain values from an object or an array, to a variable in a nice and beautiful syntax.

Object Destructuring

for the purpose of this part of the blog post, i'm going to be using this object as an example

Let's be honest. No one wants to write, or read this abomination

That may not look so bad, but when you need to do this alot of times, it gets ugly and tiring.

This is where Object Destructuring comes in. it makes it easier to assign all these values, to all these variables, and all that, in a single line of code!

look at that! so much better. doesn't make sense? don't worry, here's how it works.

when you type name inside the curly braces, and then assign an object at the end, we're destructuring the object Person. We grab the key of name inside Person, and assign it to a variable name. Object Destructuring will grab any key inside the object specified after the = and set that key's value, to a variable with the same name.

How to grab values, and change variable names

Now what if, when i grab the key name from the object Person, i also want to change the variable's name? do i have to change the name in the object too? no. you dont need to do that. you can just change the variable name with a : sign, like this!

Default Values

There is also another great feature! default values! you can set default values for a variable, so if the key is not found, it sets that as the value. for example

How to get nested object values

Let's go back to our original example. We had one nested object in it. secret_stuff which stores two values. username and password. how would you access these values? do you just type in username when Object Destructuring? no. this is how you access nested values

it's that easy! you just give the name of the nested object, and then type in the values to be destructured between curly braces. Kind of like destructuring inside destructuring am i right? or "nested destructuring"

Using Object Destructuring in functions

But why is this so useful? why is this feature such a blessing? because of Object Destructuring in function arguments. It's very likely you've had to do this before.

Again, that doesn't look so bad am i right? but when you have to type in obj.name or anything else inside that object for that matter, it gets ugly and tiring and plus, it goes against everything we've learned in this blog post so far.

Instead, you can use this beautiful, elegant syntax.

and then, you can just pass the object when you call it. Like this

There we go! you're all set. you know how to destructure objects now! Congrats!🎉🎉

You can also destructure arrays, but for the sake of keeping this blog short, i'll cover that in my next post. Bye for now!

References used in this blog post:

youtu.be/NIq3qLaHCIs - Why Is Array/Object Destructuring So Useful And How To Use It - from Web Dev Simplified on YouTube.

youtu.be/UgEaJBz3bjY - JS Destructuring in 100 Seconds - from Fireship on YouTube.

developer.mozilla.org/en-US/docs/Web/JavaSc.. - Destructuring assignment - MDN Web Docs