Destructuring in Javascript

Destructuring is another exciting concept introduced in Javascript ES6 and is pretty useful for developers working in Arrays and Objects and it also improves the performance of your Application compared to traversing through an object using .dot operator tons of times. Destructuring helps us to unpack Arrays and Objects into different variables.

We will use the following data Object for most of the code snippets listed below.

const data = {
  'name': {
    'firstName' : 'Alex',
    'lastName' : 'Turing'
  },
  'cities': [
    'Paris',
    'Berlin',
    'London'
  ]
}

The old school way

function display(person) {
  let age = person.age || 10
  console.log(`${person.name.firstName} is ${age} years old and he visited ${person.cities[0]}`); // Alex is 10 years old and he visited Paris
}
display(data);

The new way

Here we are destructuring the data with the fields that we are going to use inside the function. see age = 10? It means if age is not defined in the data Object then we use the default as 10.

function display({name: {firstName}, age = 10, cities}) {
  console.log(`${firstName} is ${age} years old and he visited ${cities[0]}`); // Alex is 10 years old and he visited Paris
}

Deep Diving into Destructuring

Want to destructure and store in alternate variables? define cities: places and use places as your local variable. I did the same for firstName in the snippet below.

function display({name: {firstName: fname}, age = 10, cities: places}) {
  console.log(`${fname} is ${age} years old and he visited ${places[0]}`); // Alex is 10 years old and he visited Paris
}

Array Destructuring

The 3 cities listed in the cities variable are destructured into three different variables.

let cities  = ['Paris', 'Berlin', 'London'];
let [first, second, third] = cities;
console.log(first); // Paris
console.log(third); // London

If you want to skip a value from the array then leave an empty spot while destructuring.

var [first, , third] = cities
console.log(`He visited ${first} and ${third}`); // He visited Paris and London

... is called a spread operator. Here the first element of the `cities` array is stored in first and the rest of the variables in rest

var [first, ...rest] = cities
console.log(`He visited ${first} and ${rest[1]}`); // He visited Paris and London

Spread operator has many usecases

To concat arrays

let cities  = ['Paris', 'Berlin', 'London'];
let example = ['Delhi', ...cities]
console.log(example); // ["Delhi", "Paris", "Berlin", "London"]

To destruture a part of object

let {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40}
console.log(a); // 10 
console.log(b); // 20 
console.log(rest); // { c: 30, d: 40 }

Getting back to our original example. You can use array and object destructuring as below

function display({name: {firstName: displayName},cities: [first, second, third]}) {
 console.log(`${displayName} visited ${first}, ${second} and ${third}`);
} // Alex visited Paris, Berlin and London
display(data);

Hope this was helpful! Let me know if I should cover anything else in this post.