(This article is part of an ongoing series on technical and soft skills from Nathan Thomas, a full stack software engineer working in San Francisco building really cool stuff. He previously worked and attended Lambda School . Click here for the previous article in the series, a piece called “ Please Explain Closures! ”) Introduction Today, we’re going to be a little technical and esoteric at the same time. 🧙‍♂️ We’ll talk about the concepts behind destructuring in JavaScript, how to use it, and why you might want to use the array or object variations. I always tell my readers to grab a hot drink before we start. Today, go grab that snack off your shelf that you’ve been holding off on because it’s “unhealthy.” If we’re going to give our brains a workout, we might as well make it worth it. Let’s get started. 👍 “Whether one believes in a religion or not, and whether one believes in rebirth or not, there isn’t anyone who doesn’t appreciate kindness and compassion.” — Dalai Lama What is Destructuring? At its core, destructuring is the idea that we are pulling out values individually from a previously-created object or array. That idea is very important. Read that sentence one more time. Mozilla Developer Network (MDN) defines as a feature in JavaScript that “makes it possible to unpack values from arrays, or properties from objects, into distinct variables.” destructuring Here’s an example of the two types of destructuring we’re going to be talking about today: arrayOfNumbers = [ , , , , ]; [one, two, three, four, five] = arrayOfNumbers; objectOfNumbers = { : , : , : , : , : }; { one, two, three, four, five } = objectOfNumbers; // Array destructuring const 1 2 3 4 5 const // Object destructuring const one 1 two 2 three 3 four 4 five 5 const If you haven’t ever seen or used destructuring before, the code above probably looked a little weird. But don’t worry, because that’s why we’re here! 🙌 The first example shows an array, called . On the next line, something crazy is going on. We’ve switched the positions of the variable name and the array assignment. They've now been assigned to variable names in the array that looks like . arrayOfNumbers arrayOfNumbers [1, 2, 3, 4, 5] [one, two, three, four, five] This is destructuring, and we’ll get into its use cases and the philosophy behind it shortly. For now, just get a feel for the syntax. Also, notice the next example of destructuring (with code below so you don't have to scroll up). We start with a variable called , and we assign an object with key-value pairs to it: object objectOfNumbers objectOfNumbers = { : , : , : , : , : }; { one, two, three, four, five } = objectOfNumbers; // Object destructuring const one 1 two 2 three 3 four 4 five 5 const Just like before, we switch up the syntax for the next line of destructuring. However, this one has a twist; we’re missing the for the key-value pairs of , etc. value one: 1, two: 2 We’ll talk about that more in a second. Just like before, I want you to get used to the syntax. Ready to learn some more? Let’s go 🔥 “I have decided to stick with love. Hate is too great a burden to bear.” — Dr. Martin Luther King Jr. Array Destructuring: Fluid and Adaptable The first form of destructuring is done through the use of arrays. Here’s a very simple block of code that we’re going to be working through: { { ;
  } { ;
  } { ;
  } [firstFunction, secondFunction, thirdFunction];
} [first, second, third] = outerFunction(); ( ) function outerFunction ( ) function firstFunction return 1 ( ) function secondFunction return 2 ( ) function thirdFunction return 3 return const Notice that we have a main function, , which has three inner functions inside of it; also, returns these three functions within an array when we call it. outerFunction outerFunction This is possible because functions are “first-class citizens” in JavaScript, which is just an overly complicated way of saying that they can be passed around as values or returned from a function just like any other value! Finally, notice how we have this line of code underneath our function: outerFunction [first, second, third] = outerFunction(); const Neat! Now, there are a few things that I want to emphasize about this line of code: First off, this is what destructuring is! ✨ The lefthand side of “the assignment operator” (an overly complicated way to say “the equal sign”) is pulling out each of the functions returned in the array When we pull them out like this, the functions are referenced by their (this will make sense in a minute, so don’t stress if it doesn’t now) index We are pulling out each of the three functions individually so that we don’t have to reference them like this: functionsArray = outerFunction(); first = functionsArray[ ]; second = functionsArray[ ]; third = functionsArray[ ]; first(); second(); third(); const const 0 // References the first function const 1 // References the second function const 2 // References the third function // Returns 1 // Returns 2 // Returns 3 While this works, it’s messy. In the first code block of this section, we pulled out each of the three functions with destructuring. After that, we can merely invoke the function like this: [first, second, third] = outerFunction();

first(); const // Returns 1 Array destructuring also allows us to manipulate the variable names of what we're destructuring out. We could have just as easily renamed our functions to something completely random: [banana, orange, grapefruit] = outerFunction();

banana(); orange(); grapefruit(); const // Returns 1 // Returns 2 // Returns 3 The reason their names don’t matter when we use array destructuring to access them is that, in an array, destructuring is based on the of the value and not the name. index The drawback to this is that, if we only wanted the second array position value while destructuring, we’d have to write this: [, orange] = outerFunction(); const // We have to put the comma in since we need to signify that we're // choosing "orange" (the second array position) Because array destructuring is based on the index, we can use this to our advantage sometimes by renaming what we're destructuring out. For instance, here’s an example of the hook in React where we call it multiple times and rename the values we’re destructuring: useState React, { useState } ; { [colorState, setColorState] = useState( ); [textState, setTextState] = useState( ); {
    e.preventDefault();
    setColorState( );
    setTextState( );
  } ( );
} import from "react" ( ) function Button props const "red" const "Click me" ( ) function handleClick e "blue" "Thanks!" return {textState} < = }} = > button style {{ color: colorState onClick {handleClick} </ > button If you don’t know React or React Hooks, don’t stress; the important thing to take away from this code snippet is that we’re using the exact same function ( ) twice, but we’re using different names for the destructured values so we don't get any errors from multiple variables with the same name. This is why array destructuring is so powerful! useState With that out of the way, let’s look at the other form of destructuring… Objects 🔥 Object Destructuring: Named and Precise If arrays are the dynamic rubber stamps of the destructuring world, objects are surgical and precise. 👩‍⚕ With array destructuring, the order you that pull values out matters since you are referencing the values based on . But with objects, you are accessing values based on the (the of the key-value pairs). Here’s a code example: index name key exampleObject = { : , : , : }; { one, two, three } = exampleObject; .log(one); .log(two); .log(three); const one 1 two 2 three 3 const console // Logs 1 to the console console // Logs 2 to the console console // Logs 3 to the console Because we’re referencing the key-value pairs inside the object based on name (and not index), we could write our code like this: { three, two, one } = exampleObject; .log(three); .log(two); .log(one); const console // Returns 3 console // Returns 2 console // Returns 1 While the order we’re listing the items in is completely different, the outcome is exactly the same. Each of these key names still references the same value inside the object. For instance, we can pull the key-value pair out of the object like this: two { two } = exampleObject; .log(two); const console // Logs 2 to the console This is perfect for accessing exactly what we want inside an object (and no more). However, this also means that we can’t just destructure the same value out twice right next to each other: { two } = exampleObject; { two } = exampleObject; const const // This throws a SyntaxError since "two" has already been defined We would have to do something more complicated like this (by renaming to ): slightly two newTwoValue { two } = exampleObject; { : newTwoValue } = exampleObject; const const two // This is fine since we're renaming "two" to "newTwoValue" in the // second line Now that we’ve defined how to use array and object destructuring, we can get a bit theoretical and briefly discuss to use them. when “Do your little bit of good where you are; it’s those little bits of good put together that overwhelm the world.” — Desmond Tutu Choosing the Right Tool for the Job Ultimately, it’s going to be up to you to decide when to use object and array destructuring. As an engineer, you are being paid for the ability to know and to use certain tools. when how Here's a list of guidelines I try to follow on when to use object or array destructuring: Do you need to pull values out of a function multiple times in the same scope/file? If so, use array destructuring since you can rename them as much as you want. Do you want to be able to rename values when you destructure them out? While it’s possible with objects, it’s much cleaner using arrays. Do you need to access values passed down from a parent component in a front-end framework? If so, use object destructuring. Do you want to only pull out the values you need while destructuring (and no others)? If so, use object destructuring. Conclusion I hope you’ve enjoyed this article on destructuring. It's such a powerful tool in JavaScript as it can quickly clean up your code and allow you to do all sorts of interesting things. You should now be able to confidently walk into any interview and use this syntax to your advantage. Thanks for reading. 🔥 Nathan ( , , , and ) Twitter GitHub LinkedIn Portfolio Site

Mozilla

ORANGE

Twitter

Winner of Noonies 2020 for the award Hacker Noon Contributor of the Year - Graphql.

Destructuring in JavaScript: A How-To Guide

Too Long; Didn't Read

Companies Mentioned

@nwthomas

RELATED STORIES