Destructuring

Search…
Destructuring
Destructuring is a way to quickly extract data out of an {} or [] without having to write much code.
To borrow from the MDN, destructuring can be used to turn the following:
let foo = ['one', 'two', 'three'];
​
let one   = foo[0];
let two   = foo[1];
let three = foo[2];
into
let foo = ['one', 'two', 'three'];
let [one, two, three] = foo;
console.log(one); // 'one'
This is pretty interesting, but at first it might be hard to see the use case. ES6 also supports object destructuring, which might make uses more obvious:
let myModule = {
  drawSquare: function drawSquare(length) { /* implementation */ },
  drawCircle: function drawCircle(radius) { /* implementation */ },
  drawText: function drawText(text) { /* implementation */ },
};
​
let {drawSquare, drawText} = myModule;
​
drawSquare(5);
drawText('hello');
Destructuring can also be used for passing objects into a function, allowing you to pull specific properties out of an object in a concise manner. It is also possible to assign default values to destructured arguments, which can be a useful pattern if passing in a configuration object.
let jane = { firstName: 'Jane', lastName: 'Doe'};
let john = { firstName: 'John', lastName: 'Doe', middleName: 'Smith' }
function sayName({firstName, lastName, middleName = 'N/A'}) {
  console.log(`Hello ${firstName} ${middleName} ${lastName}`)  
}
​
sayName(jane) // -> Hello Jane N/A Doe
sayName(john) // -> Helo John Smith Doe
There are many more sophisticated things that can be done with destructuring, and the MDN has some great examples, including nested object destructuring and dynamic destructuring with for ... in operators".
...spread and ...rest
Modules
Last modified 3yr ago
Copy link