Javascript - Operator Destructuring

  1. HOME
  2. Javascript
  3. Operator
  4. Destructuring

Introduction

Destructuring is a way of breaking the data structure into smaller pieces and extracting multiple values from Objects or Arrays.

Consider the following example, 

var letters = ['a', 'b', 'c'], 
x = letters[0], 
y = letters[1], 
z = letters[2]; 

console.log( x, y, z );             // a b c

Here, we assigned values to an array called letters and then the x, y, and z variables using indices on the letters variable.

Let us look at another such example using objects: 

var numbers = {a: 1, b: 2, c: 3}, 
    a = numbers.a, 
    b = numbers.b, 
    c = numbers.c; 

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

Here, we use the numbers.a value to assign the value of the variable a and similarly numbers.b & numbers.c for b and c variables.

ES6 makes this pattern of structured assignment simpler through a new and dedicated syntax called destructuring.

This syntax eliminates the need for the temporary, intermediate variables: 

var [ x, y, z ] = ['a', 'b', 'c']; 
var { a: a, b: b, c: c } = {a: 1, b: 2, c: 3}; 

console.log( x, y, z );             // a b c 
console.log( a, b, c );             // 1 2 3

Related Topics