Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

javascript
destructuring

What are destructuring assignments in JS?

Abdul Monim Tariq Lodhi

Destructuring Assignments in JavaScript permits the extraction of propertiesfrom objects and valuesfrom arrays into different variables, and you can unpack the data from nested objects.

The Left-Hand Side of the assignment operator represents the value that can be extracted from the sourced variable.

Extract Value from Structure

Extract values from an array

An example related to data extraction from an array is given below:

var arr = [30, 50];
var val1 = arr[0];
var val2 = arr[1];
console.log(val1); // This line will print 30
console.log(val2); // This line will print 50
// You can verify the output by clicking on Run button

Swap with destructuring

You can swap the values with the help of the destructuring assignment, as shown below:

var [city1, city2] = ["London", "New York"];
console.log("** Original Values **");          
console.log(city1);// This line will print "London"
console.log(city2);// This line will print "New York"
// You can swap these values
[city1, city2] = [city2, city1]
console.log("** Swapped Values **");
console.log(city1);// Now this line will print "New York"
console.log(city2);// Now this line will print "London"
// You can verify the output by clicking on Run button

Skip an element using the comma separator

You can skip elements of an array with the help of a comma separator, as shown below:

var [name,,city] = ["Monim", 28, "London"];
          
console.log(name);// This line will print "Monim"
console.log(city);// This line will print "London" 
// You can verify the output by clicking on Run button

Assign elements with rest operator

You can assign some array elements to distinct variables and the other array elements to a single variable with the help of the rest operator (...). Take a look at the example below:

var [name,,...city] = ["Monim", 28, "London", "Karachi"];
          
console.log(name);// This line will print "Monim"
console.log(city);// This line will print "London" and "Karachi" 
// You can verify the output by clicking on Run button

Extract values from an object

You can extract properties from objects and assign them to variables. This is shown below:

var numbers = {num1: 10, num2: 20};
  
var num1 = numbers.num1; // 10
var num2 = numbers.num2; // 20
  
console.log(num1); // This line will print 10
console.log(num2); // This line will print 20
// You can verify the output by clicking on Run button

Extract values from a nested object

You can also extract properties or values from Nested objects. This is shown below:

const numbers = {
  even: { num1 : 2, num2: 4},
  odd: { num1: 1, num2: 5 }
};
const { even : { num1: x, num2: y }} = numbers;
console.log(x, y); // This line will print 2 and 4
// You can verify the output by clicking on Run button

RELATED TAGS

javascript
destructuring

CONTRIBUTOR

Abdul Monim Tariq Lodhi
Copyright ©2022 Educative, Inc. All rights reserved
RELATED COURSES

View all Courses

Keep Exploring