Destructuring in JavaScript

Introduced in ES6, Destructuring in JavaScript is a way to unpack values from arrays, or properties from objects, into distinct variables.

What is a use-case of Destructuring in JavaScript?

Until ES6, if we wanted to extract data from an array we would have to do something similar to:

let message = ["Hello", "Dillon"];
let greeting = message[0];
let name = message[1];

console.log(greeting); // Output: "Hello"
console.log(name); // Output: "Dillon" 

How to use Destructuring in JavaScript

If we want to extract data from an array, using Destructuring in JavaScript we can do it a lot easier.

Using the same example as above, but this time we will use the Destructuring Assignment.

let message = ["Hello", "Dillon"];
let [greeting, name] = message;

console.log(greeting); // Output: "Hello"
console.log(name); // Output: "Dillon" 

Declaring variables before assignment

With the destructuring assignment, we can also declare the variables before they are assigned.

let greeting, name;
let [greeting, name] = ["Hello", "Dillon"];

console.log(greeting); // Output: "Hello"
console.log(name); // Output: "Dillon" 

We can also skip items in the array like so:

let [greeting,,msg] = ["Hello", "Dillon", "Welcome"];

console.log(greeting); // Output: "Hello" 
console.log(msg); // Output: "Welcome" 

Conclusion

Many features introduced in ES6 can be overlooked.

Learn about Spread & Rest Operators in JavaScript.

JavaScript