ES6 (ECMAScript 2015) introduced a new syntax that allows us to assign various array elements and object properties to individual local variables in a single statement.

Example

Array destructuring

var arr = [1, 3, 5];
var [x, y, z] = arr;
console.log(x);
console.log(y);
console.log(z);

Above code before ES6:

var arr = [1, 3, 5];
var x = arr[0];
var y = arr[1];
var z = arr[2];
console.log(x);
console.log(y);
console.log(z);

Object destructuring

var employee = { name: 'Lara', role: 'Developer', salary: 5000 };
var { name, role, salary } = employee;
console.log(name);
console.log(role);
console.log(salary);

The assigned variables should have same names. To assign new names we need to use following syntax:

var employee = { name: 'Lara', role: 'Developer', salary: 5000 };
var { name: n, role: r, salary: s } = employee;
console.log(n);
console.log(r);
console.log(s);

Order does not matter:

var employee = { name: 'Lara', role: 'Developer', salary: 5000 };
var { salary, name, role } = employee;
console.log(name);
console.log(role);
console.log(salary);

Separate declaration and assignment

var arr = [1, 3, 5];
var x, y, z;
[x, y, z] = arr;
console.log(x);
console.log(y);
console.log(z);

var employee = { name: 'Lara', role: 'Developer', salary: 5000 };
var name, role, salary;
({ name, role, salary } = employee); //must be in parathesis, otherwise left side will be considered a block
console.log(name);
console.log(role);
console.log(salary);

Default values

Check out our default parameters tutorial to understand the basics.

var arr = [1, 3];
var [x, y, z = 9] = arr;
console.log(x);
console.log(y);
console.log(z);

var employee = { name: 'Lara', salary: 5000 };
var { name, role = 'N/A', salary } = employee;
console.log(name);
console.log(role);
console.log(salary);

Skipping values in Array assignment

var arr = [1, 3, 5];
var [x, , z] = arr;
console.log(x);
console.log(z);

Swapping variables in Array assignment

var x = 1;
var y = 2;
[y, x] = [x, y]
console.log(x);
console.log(y);

Rest parameters

Check out our rest parameters tutorial to understand the basics.

var arr = [1, 3, 5];
var [x, ...others] = arr;
console.log(x);
console.log(others);

var employee = { name: 'Lara', role: 'Developer', salary: 5000 };
var { name, ...others } = employee;
console.log(name);
console.log(others);

Destructuring assignment in functions

function print([x, y]) {
    console.log(x);
    console.log(y);
}
print([3, 4])

With default values:

function print([x, y] = [1, 2]) {
    console.log(x);
    console.log(y);
}
print();
console.log('--');
print([3, 4])

function print(x, { name = 'N/A', role = 'IT', salary = 0 } = {}) {
    console.log(x);
    console.log(name);
    console.log(role);
    console.log(salary);
}
print(3);
console.log("--");
var employee = { name: 'Lara', role: 'Admin', salary: 3000 };
print(2, employee);

In above example, the right hand side braces {} in function declaration allow us to skip object arguments in function call. For example in print(3); where we did not pass any employee object.