Destructuring sounds complex. It reminds me of object-oriented terms such as encapsulation and polymorphism. I’m convinced they were chosen to make simple concepts appear more sophisticated!

In essence, ECMAScript 6 (ES2015) destructuring assignment allows you to extract individual from arrays or objects and place them into variables using a shorthand syntax. Those coming from may have encountered the list() function, which extracts arrays into variables in one operation. takes it to another level.

Presume we have an array:

const myArray = ['a', 'b', 'c'];

We can extract these values by index in ES5:

  one   = myArray[0],
  two   = myArray[1],
  three = myArray[2];

// one = 'a', two = 'b', three = 'c'

ES6 destructuring permits a simpler and less error-prone alternative:

const [one, two, three] = myArray;

// one = 'a', two = 'b', three = 'c'

You can ignore certain values, e.g.

const [one, , three] = myArray;

// one = 'a', three = 'c'

or use the rest operator (...) to extract remaining elements:

const [one, ...two] = myArray;

// one = 'a', two = ['b, 'c']

Destructuring also works on objects, e.g.

var myObject = {
  one:   'a',
  two:   'b',
  three: 'c'

// ES5 example
  one   =,
  two   = myObject.two,
  three = myObject.three;

// one = 'a', two = 'b', three = 'c'

// ES6 destructuring example
const {one, two, three} = myObject;

// one = 'a', two = 'b', three = 'c'

In this example, the variable names one, two and three matched the object property names. We can also assign properties to variables with any name, e.g.

const myObject = {
  one:   'a',
  two:   'b',
  three: 'c'

// ES6 destructuring example
const {one: first, two: second, three: third} = myObject;

// first = 'a', second = 'b', third = 'c'

More complex nested objects can also be referenced, e.g.

const meta = {
  title: 'Destructuring Assignment',
  authors: [
      firstname: 'Craig',
      lastname: 'Buckler'
  publisher: {
    name: '',
    url: ''

var {
    title: doc,
    authors: [{ firstname: name }],
    publisher: { url: web }
  } = meta;

  doc   = 'Destructuring Assignment'
  name  = 'Craig'
  web   = ''

This appears a little complicated but remember that in all destructuring assignments:

  • the left-hand side of the assignment is the destructuring target — the pattern which defines the variables being assigned
  • the right-hand side of the assignment is the destructuring source — the array or object which holds the being extracted.

There are a number of other caveats. First, you can’t start a statement with a curly brace, because it looks like a code block, e.g.

{ a, b, c } = myObject;

You must either declare the variables, e.g.

const { a, b, c } = myObject;

or use parentheses if variables are already declared, e.g.

({ a, b, c } = myObject);

You should also be wary of mixing declared and undeclared variables, e.g.

let a;
let { a, b, c } = myObject;

let a, b, c;
({ a, b, c } = myObject);

That’s the basics of destructuring. So when would it be useful? I’m glad you asked …

Continue reading %ES6 in Action: Destructuring Assignment%

Source link
thanks you RSS link


Please enter your comment!
Please enter your name here