Destructuring in JavaScript
Destructuring is a powerful way to create variables from values in arrays and objects, and you should use it. It will make your code simpler!
Keep in mind that destructuring is part of the ES2015 (aka ES6) spec and is not compatible with every browser. I recommend using Babel, Typescript, or anything that will compile your code into ES5 to ensure full compatibility for every user.
Array destructuring
If you want to assign the values of an array to separate variables, you can take advantage of destructuring to achieve your goal in a simple, clean way. No need to use indexes or loops!
If you wish to assign these four values to four variables, you can use array destructuring like so:
Note that the position of the variables vs values is important here. The first new variable will always inherit the first value of the array.
But what if I only need the first 2 values as variables, and the rest as an array? It’s super simple:
You can also set default values if you wish! That way, even if the passed array doesn’t have enough values, all your variables will have a defined value!
Common use cases
You might be scratching your head right now wondering when you’re going to use this. I mean… are there any obvious cases for using array destructuring?
There are many, actually! For instance, say you have blog posts in an array, but want to manipulate the first post differently than all the others, you could use destructuring to split the first post and the rest into two different variables.
const [starPost, ...otherPosts] = blogPosts;Or say you just need the first three posts of the array, you can just declare three variables and the rest will be ignored.
const [post1, post2, post3] = blogPosts;Object destructuring
We can also use the destructuring assignment syntax to assign object values to variables. You’ll find it’s pretty similar to what we did with arrays.
As you can see with the example above, we used the same names for the variables as we did for the keys of the object. However we can define variables with names that differ from the keys:
And just like with arrays, we can also set default values.
Common use cases
If you only need one or more values from an object and don’t want to access those values using the objectWithALongNameName.keyName syntax, then you can just use simple destructuring to create new variables (which will keep your code concise).
But the best use of object destructuring is the handling of options.
Say you have a function that handles options with default values, here’s how you can, in a simple manner, handle it:
As you can see, by writing options = {} as the argument, we specify that if nothing is passed, by default we will use an empty object as the passed options.
After that, we use destructuring to override default options with passed ones and we’re good to go. We can then simply use cannons instead of options.cannons in our function, and it was super simple to setup!
Share your uses of destructuring!
Have you used destructuring in your projects in cool ways you would like to share? Help your fellow developers by leaving a snippet in the comments down below!
Keep coding!
