Destructuring with JavaScript
Coders like their code to be DRY (Don’t Repeat Yourself) partly because we’re lazy, in a good way, but also because it makes our code easier to read. Who knows who will work on a project after you or how long it will be before you come back to your own project? Regardless of when or who, it’s important that the code is clear, concise and easy to ready.
Let me give you two examples and I’ll let you decide which one looks better. If you’re new to destructuring, take my word for now that these two code blocks accomplish the same goal, and we’ll dive into the details in a second.
First Example1. let team = {
2. name: "Kansas City Chiefs",
3. superbowls: 2,
4. mvp: "Patrick Mahomes"
5. }6. let name = team.name
7. let superbowls = team.superbowls
8. let mvp = team.mvp9. console.log(name) => "Kansas City Chiefs"
10. console.log(superbowls) => 2
11. console.log(mvp) => "Patrick Mahomes"
Now for the second.
Second Example1. let team = {
2. name: "Kansas City Chiefs",
3. superbowls: 2,
4. mvp: "Patrick Mahomes"
5. }6. let {name, superbowls, mvp} = team7. console.log(name) => "Kansas City Chiefs"
8. console.log(superbowls) => 2
9. console.log(mvp) => "Patrick Mahomes"
Which one would you prefer to read? Ok that was a loaded question, the second one is more concise and assuming you understand destructuring is quicker to read while still achieving the same goal.
So what exactly is happening here? In the second example, we are creating a name, superbowls and mvp variable that equals the value of the key, with the matching name, from the team object. We deconstructed the object into multiple variables!
Destructuring was introduced in ECMAScript 2015, commonly referred to as ES6, and works with both objects and arrays. It essentially allows you to assign properties or values from an object or array to a variable without having to write out each variable assignment line by line by using the destructuring assignment.
The destructuring assignment should look familiar as it is very similar to the array and object literal expressions, only it is flipped from the right side of the assignment operator to the left.
Now that we know what destructuring is, I’d like to share with you how I most frequently use it. I’m relatively new to the JavaScript and React world but in my experience I have found the most useful application is when working with functional components in React.
Instead of passing an argument of props and having to use dot notation to drill down into each individual prop, you can instead use object destructuring in the argument and refer directly to each prop inside of your function. This is a small efficiency gain when writing code, but I’m all about small, incremental improvements that add up over time!
Let’s look at a quick comparison of each way to do this. We’ll assume we are passing props of wave and sayHello to each function, and each has a single key of hand and greet respectively.
Functional Component Comparison// Without Destructuring1. const withProps = (props) => {
2. return (
3. <div>
4. {props.wave.hand}
5. {props.sayHello.greet}
6. </div>
7. )
6. }// With Destructuring1. const withDestructuring = ({wave, sayHello}) => {
2. return (
3. <div>
4. {wave.hand}
5. {sayHello.greet}
6. </div>
7. )
6. }
Like I said there isn’t a huge difference when only writing two lines, but imagine having five or ten props that you reference multiple times each, it adds up. Also notice while using destructuring we have an idea of what props are available to us while working on withDestructuring. If you were new to the project, you get an idea of the intent of the component by quickly glancing at the props available to you without having to jump back and forth between files.
Destructuring can be used in a ton of different ways including deconstructing arrays. The mechanics are similar to what we demonstrated with objects, but instead of using the key as the variable name, we make up a variable name. One thing to note when destructuring arrays is that order matters! Let’s look at an example.
1. let animals = ['dog', 'cat', 'fish']2. let [stella, whiskers, nemo] = animals3. console.log(stella) => 'dog'
4. console.log(whiskers) => 'cat'
5. console.log(nemo) => 'fish'
Here we are assigning each variable to a value in order of the animals index, which is why order matters. This also allows us to do some cool things like skip values when destructuring an array as seen below.
1. let animals = ['dog', 'cat', 'fish']2. let [stella, , nemo] = animals3. console.log(stella) => 'dog'
4. console.log(nemo) => 'fish'
Be careful when destructuring arrays. Since the order and length of array matters, it’s critical to know exactly what is stored inside. This limits it’s practical uses to situations where the array is controlled and the same each and every time.
There are a lot of other cool applications of destructuring so I highly recommend you checking out MDNs page on the matter. As always feel free to leave some feedback or other instances you find destructuring useful in the comments below!
