Exploring ECMAScript 2015 (ES6): Destructuring

Destructuring is a way to assign variables to data extracted from arrays and objects using pattern matching. Assigning variables this way is more convenient and readable.

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

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

var numbers = [1, 2, 3];  
var a = numbers[0];  
var b = numbers[1];  
var c = numbers[2];

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

You can assign values from either arrays or objects.

const [a, b, c] = [1, 2, 3];  
console.log(a, b, c); // 1 2 3

const {name, type} = {name: 'Kermit', type: 'frog'};  
console.log(name, type); // 'Kermit' 'frog'  

If an item does not exist for the assignment it will result in undefined.

const [a] = [];  
const {b} = {};

console.log(a, b); // undefined undefined  

A new feature of parameters I haven't written about yet is default values. You can apply a similar pattern to destructuring to allow default values instead of undefined if the value does not exist in the array or object.

const [a = 1] = [];  
const {b = 2} = {};

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

You can use pattern matching to access values in nested arrays.

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

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

You can skip items in an array, and you can assign any remaining tailing items as a new array.

const numbers = [1, 2, 3, 4, 5];

const [a,,,b,c] = numbers;  
console.log(a, b, c); // 1 4 5

const [x,y,...z] = numbers;  
console.log(x, y, z); // 1 2 [3,4,5]  

Destructuring also makes it easy to swap the value of two variables without introducing a new temporary variable.

// ES2015
let [a, b] = [1, 2];  
[a, b] = [b, a];

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

// ES5
var a = 1;  
var b = 2;

var temp = a;  
a = b;  
b = temp;

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

Destructuring with objects allows you to assign values to an alias, or use a shorthand method if the variable name matches the object property name.

const {name: muppet, type: animal} = {name: 'Kermit', type: 'frog'};  
console.log(muppet, animal); // 'Kermit' 'frog'

const {name, type} = {name: 'Kermit', type: 'frog'};  
console.log(name, type); // 'Kermit' 'frog'  

Similar to the nested array example, you can reach deeper into objects and nested objects for assignment. Combinations of arrays within objects are fine too. You use pattern matching for the assignment.

const kermit = {  
  name: 'Kermit',
  type: 'frog',
  amigos: [
    {name: 'Ms. Piggy', type: 'pig'},
    {name: 'Gonzo', type: 'weirdo'}

const {amigos: [piggy, {name: gonzo}]} = kermit;

console.log(piggy); // {"name":"Ms. Piggy","type":"pig"}  
console.log(gonzo); // Gonzo  

You can even use destructuring to use a single value as a parameter in place of multiple values. This is useful when you have many parameters and you don't want to force users to remember the order, or if you have optional parameters and you don't want to pass null or undefined to skip them.

function greeting({name='Kermit', title='T. Frog', adverb = 'warmly'}) {  
  console.log('We ' + adverb + ' welcome ' + name + ', ' + title + '.');

greeting({}); // 'We warmly welcome Kermit, T. Frog.'  
greeting({adverb: 'regretfully'}); // 'We regretfully welcome Kermit, T. Frog.'  
greeting({name: 'Gonzo', title: 'His Majesty', adverb: 'respectfully'}); // 'We respectfully welcome Gonzo, His Majesty.'  

Destructuring has many good use cases: concise variable assignment to values returned from a function as an object or array, passing many optional parameters to a function, swapping values, and general code cleanup. It takes some time to learn the best ways to use it, but it is a powerful tool when you do. The end result is code that is easier to read, easier to reason about, and more fun to write. Destructuring is another great new addition to JavaScript with ECMAScript 2015.

Further Reading

Tyler Walters

Written by Tyler Walters

Tyler Walters is a software engineer in Phoenix, Arizona. He is married to a beautiful woman and has three incredible daughters. He is interested in game development, writing, beer, and hot wings.