ES6: Destructuring

There are a bunch of features added in the 6th Edition of the ECMAScript standard, short for ES6, and destructuring is one of them.

The destructuring assignment syntax allows you to assign values of arrays or properties from objects to variables i.e. unboxing elements and assign each of them a label.

Note: Before destructuring we have to write below syntax for variable assignment:

const arr = [1, 2, 3];
const one= arr[0];
const two = arr[1];
const three = arr[2];

Destructuring Features:

Destructuring doesn't mean destruction. It means unbox values of arrays or properties of objects into variables.

It provides more clear and readable syntax.

  1. There are two most used data structures in JavaScript: Arrays and Objects. So Major two types of destructuring.
  2. We can use any variable names on the assignment.
  3. We can assign default values to variables if we don't find the assigned value.
  4. It takes advantage of the ...rest feature in JavaScript.

1. Basic destructuring syntax:

Array destructuring

const [a, b, c] = [1, 2, 3];

console.log(a, b, c) // 1  2  3

Object destructuring

const {a, b, c} = {a: 1, b: 2, c: 3};

console.log(a, b, c) // 1  2  3

Destructuring can be used for any iterable eg. Set.

let [one, two, three] = new Set([1, 2, 3]);
console.log(a, b, c) // 1  2  3

2. Variable naming:

In arrays, we can define any variable name and values will be assigned in the order.

const [hey, hi, hello] = ["3 words", "2 words", "5 words"];

console.log(hey, hi, hello) // 3 words   2 words   5 words

In objects, we have to define the exact property name from the object in the variable naming and order doesn't matter.

const pet = {name: 'cute', hair: 'golden', mood: 'happy'}; 
const {name, mood, hair} = pet;

console.log(name, mood, hair) // cute  happy  golden

But we can rename variables in object destructuring other than using property names like the example below.

const pet = {name: 'cute', hair: 'golden', mood: 'happy'}; 
const {name: petName, mood: petMood, hair: petHair} = pet;
console.log(petName, petMood, petHair) // cute  happy  golden

3. Default values

We can assign default values for missing elements using = syntax.

//Arrays
const [first = 5, second = 3, third = 10] = [1, 2];
console.log(first , second, third) // 1  2 10

//Objects
const {lang: language, framework = 'Angular'} = {lang: 'JavaScript '};
console.log(language, framework) // JavaScript   Angular

Even though we don't assign default values for missing items, destructuring assignment syntax doesn't give us an error. Instead, It automatically assign undefined to variables.

let {a, b} = {}; 
console.log(a, b); //  undefined   undefined

Usecase of missing elements: Assume we are making an API call that will fetch us the user information after some time and that user information is different for a different user.

// API call started
let superheroInfo = {}; 

// Set default values
let {name = 'SuperMan' , power= 'Fly'} = superheroInfo ;
console.log(name, power); //   SuperMan   Fly

// API call ended
superheroInfo = {name: 'Iron-Man'}; 

console.log(name, power); //   Iron-Man    Fly

4. ...rest

Three dots (...) is a new feature of ES6 which is used in two ways

  • rest: used to collect the rest of elements into an array,
  • spread: allow iterables to be expanded.

In this blog, I will cover the rest and it's use-case in destructuring.

  • Rest basically takes the rest of the elements and collect them in an array. -
  • Destructuring takes advantage of this syntax to collect remaining elements in one assignment as an array. See the example below:
//Arrays
const [name, platform, ...rest] = ['Hashnode', 'blog', 'community', 'knowledge', 'GitHub'];

console.log(name, platform) // Hashnode   blog
console.log(rest) // ['community', 'knowledge', 'GitHub']

//Objects
const pet = {name: 'cute', hair: 'golden', breed: 'husky'}; 
const {name, ...rest} = pet;
console.log(name, rest);  // cute  {hair: 'golden', breed: 'husky'}
console.log(rest.hair) // golden
console.log(rest.breed) // husky

You can use any name instead of rest like features in both of the above examples.


Question: Swap Values using Destructuring:

let a = 10, b = 20;

[b, a] = [a, b];

console.log(a, b) // 20, 10

Question: Convert array to object with keys as index of the array:

let arr = ['apple', 'pixel', 'nokia'];

{...arr}      // {0: "apple", 1: "pixel", 2: "nokia"}

References:

Thanks for reading! Happy coding! For more tech and F.R.I.E.N.D.S. discussions, we can connect on twitter.

Comments (2)

Benny Cohen's photo

since an array is also an object, we can also do this neat trick:

const arr = [...............n] // array of length n;
const { 3: a, 15: b, 1001: c} = arr;

to retrieve by index.

This is a useful way to retrieve multiple n length array positions through destructuring rather than the alternatives:

const a = arr[3];
const b = arr[15];
const c = arr[1001];

or even worse:

const [,,,a,,,,,,,,,,,,b,,.......(1001)c] = arr;
Rohit Kumawat's photo

That's a neat trick. Thanks for sharing Benny Cohen