Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

destructuring
object
javascript

What is object destructuring in JavaScript?

Educative Answers Team

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

Destructuring is a JavaScript expression that allows us to extract data from arrays, objects, and maps and set them into new, distinct variables. Destructuring allows us to extract multiple properties, or items, from an array​ at a time.

Object destructuring

Syntax

svg viewer

The right side of the statement contains the Javascript object that we want to split into variables; the left side contains a “pattern” for corresponding properties of the object. This “pattern” is usually a list of variable names.

Examples

1. Assigning to existing variable names

Here’s how to destructure values from an object:

var employee = { // Object we want to destructure
firstname: 'Jon',
lastname: 'Snow',
dateofbirth: '1990'
};
// Destructuring the object into our variables
var { firstname, lastname, dateofbirth } = employee;
console.log( firstname, lastname, dateofbirth);

2. Assigning to new variable names

The following code destructures the object into variables with a different name than the object property:

var employee = { // Object we want to destructure
firstname: 'Jon',
lastname: 'Snow',
dateofbirth: '1990'
};
// Destructuring the object into variables with
// different names than the object variables
var { firstname: fn, lastname: ln, dateofbirth: dob } = employee;
console.log( fn, ln, dob);

3. Assigning to a variable with default values

We can also assign default values to variables whose keys may not exist in the object we want to destructure. This will prevent our variable from having an undefined value being assigned to it. The code below demonstrates this:

var employee = { // Object we want to destructure
firstname: 'Jon',
lastname: 'Snow',
dateofbirth: '1990'
};
// Destructuring the object into variables without
// assigning default values
var { firstname, lastname, country } = employee;
console.log("Without setting default values")
console.log( firstname, lastname, country);
// Destructuring the object into variables by
// assigning default values
var { firstname = 'default firstname',
lastname = 'default lastname',
country = 'default country' } = employee;
console.log("\n After setting default values")
console.log( firstname, lastname, country);

RELATED TAGS

destructuring
object
javascript
Copyright ©2022 Educative, Inc. All rights reserved

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

Keep Exploring