Home TutorialsModern ES6 Syntax Destructuring Assignment

Destructuring Assignment

by TheScriptKiddie

Destructuring Assignment

You can use destructuring assignment to quickly “pluck” values out from an array or object and assign them into a named variable.

With Arrays

When used with an array on the Right-Hand Side of the assignment statement, elements are copied from the array into the destructuring group on the Left-Hand Side of the assignment statement in order. Basically, elements are copied in order into the named variables you have set up on the left. Here are some examples, first without using destructuring assignment, and then using it.

Without Destructuring Assignment:

// This first example is not runnable. Users.GetAll is a hypothetical function that returns an array of users.
let users = Users.GetAll();
let firstUser = users[0];

// Second Example
let choices = ['A', 'D'];
let primaryChoice = choices[0];

// Third Example
let choices = ['A', 'D'];
let primaryChoice = choices[0];
let secondaryChoice = choices[1];

// Fourth Example
function confirmChoices(choices) {
    console.log(`You have chosen ${choices[0]} as your primary choice and ${choices[1]} as your secondary choice.`);
}

confirmChoices(['B', 'C']);

With Destructuring Assignment:

// This first example is not runnable. Users.GetAll is a hypothetical function that returns an array of users.
let [firstUser] = Users.GetAll();

// Second Example
let choices = ['A', 'D'];
let [primaryChoice] = choices;

// Third Example
let choices = ['A', 'D'];
let [primaryChoice, secondaryChoice] = choices;

// Fourth Example
function confirmChoices([primaryChoice, secondaryChoice]) {
    console.log(`You have chosen ${primaryChoice} as your primary choice and ${secondaryChoice} as your secondary choice.`);
}

confirmChoices(['B', 'C']);

With Objects

When used with objects, destructuring assignment allows you to “pluck” out values by property name. Unlike with array destructuring, order does not matter with object destructuring.

let p1 = {
    name: 'Jason',
    age: 27,
    email: 'test@test.com'
};

// sometimes we only care about one piece of info, and that's all we care to destructure out of the object:
let { name } = p1;
console.log(name); // 'Jason'

// Order doesn't matter when destructuring!
// The variable names you are choosing in the destructuring group (left side) coincide with the property names in object p1 of which you want to "pluck" the values
let { email, age } = p1;
console.log(email); // 'test@test.com'
console.log(age); // 27

// You can also destructure a property and choose a different name for the variable:
let { name: studentName } = p1;
console.log(studentName); // 'Jason'

function sayHello({ name, age }) {
    console.log(`Congratulations ${name}! You've been around for ${age} years!`);
}

sayHello(p1);
// Congratulations Jason! You've been around for 27 years!

Without Destructuring:

let p1 = {
    name: 'Jason',
    age: 27,
    email: 'test@test.com'
};

let name = p1.name;
let age = p1.age;
let email = p1.email;

function sayHello(person) {
    console.log(`Congratulations ${person.name}! You've been around for ${person.age} years!`);
}

sayHello(p1);

It looks strange, and it’s completly optional for you. But if you ever see square brackets or curly braces on the LEFT side of an assignment statement, or in the parameter list of a function declaration, that’s your indication that destructuring assignment is occurring.

You may also like

Leave a Comment