freeCodeCamp/guide/english/javascript/es6/destructuring/index.md

title

title
Destructuring Assignment

Destructuring Assignment

Destructuring Assignment syntax is a Javascript expression that makes it possible to unpack values or properties from arrays or objects.

Lets say that you have an array that contains a first name and last name as its two values, but you want to reassign those values to something more descriptive. You can use Destructuring to accomplish this.

ES5 Destructuring

var fullName = ["John", "Smith"];
var firstName = fullName[0];
var lastName = fullName[1];

console.log(firstName, lastName); // John Smith

ES6 Destructuring

const fullName = ["John", "Smith"];
const [firstName, lastName] = fullName;

console.log(firstName, lastName); // John Smith

The examples above show the benefit of using the ES6 Destructuring Assignment.

A variable can be assigned a default, in the case that the value unpacked from the array is undefined.

const address = ['Rue Cler', 'Paris'];
[street, city, country = 'France'] = address;
console.log(country); // 'France'

Array Destructuring with rest

When destructuring an array, you can unpack and assign the remaining part of it to a variable using the rest pattern:

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

You can skip some values by putting comma

const address = ['Rue Cler', 'Paris', 'France'];
const [street, , country] = address;
or
const [street] = address;

You can also use Destructuring on objects using a similar syntax

const fullName = {first: "John", last: "Smith"};
const {first, last} = fullName;

console.log(first, last); // John Smith

Object Destructuring Assignment is a little bit different because the object must have properties with the names you are assigning. Therefore the code below would not work as intended.

const fullName = {first: "John", last: "Smith"};
const {firstName, lastName} = fullName;

console.log(firstName, lastName); // undefined undefined

You can still achieve the desired result using the following syntax.

const obj = {propertyName: value}
const {propertyName: desiredVariableName} = obj

Our previous example would be rewritten as follows:

const fullName = {first: "John", last: "Smith"};
const {first: firstName, last: lastName} = fullName;

console.log(firstName, lastName); // John Smith

A variable can be assigned a default, in the case that the value unpacked from the object is undefined.

const person = {
  age: 22
};

const {name: firstName = 'Anonymous', age} = person;

Destructuring an array with rest, you can unpack and assign the remaining part of it to a variable using the rest pattern:

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