Destructuring in JavaScript

Destructuring in javascript helps to extract elements from arrays or properties from objects and store them in variables. The spread operator extracts all elements from objects or properties from objects while destructuring helps to extract single values and store them in variables.

Syntax:

For array:

const [firstElement, secondElement] = array;

For object:

const {property1, property2} = object

You will learn examples of destructuring for the following data types in javascript:

Array Destructuring in JavaScript:

Variable Assignment:

const students = ['John', 'Jane', 'Mike'];
const [student1, student2, student3] = students;
console.log(student1);
console.log(student2);
console.log(student3);

Output:

John
Jane
Mike

Assigning values to variables:

let x,y,z;
[x, y, z] = [5, 10, 15];
console.log(x);
console.log(y);
console.log(z);

Output:

5
10
15

In array destructuring, if the length of the array present on the right-hand side is less than the length of an array on the left-hand side then only the first variables from the left-hand side will be assigned values. The remaining variables will be undefined.

const students = ['John', 'Jane'];
const [student1, student2, student3, student4] = students;
console.log(student1);
console.log(student2);
console.log(student3);
console.log(student4);

Output:

John
Jane
undefined
undefined

Assigning default values:

You can assign default values to variables in case if the extracted value from an array is undefined.

let x,y;
[x=5, y=10] = [15];
console.log(x);
console.log(y);

Output:

15
10

As the value for x is assigned as 15, the output of x is 15. But as the value of y is not assigned, so it takes the default value and therefore the output of y is 10.

Variable Swapping:

You can swap variables using destructuring.

Example1:

let x = 5;
let y = 10;
[x, y] = [y, x];
console.log(x);
console.log(y);

Output:

10
5

Example2:

const students = ['John', 'Jane', 'Mike'];
[students[2], students[1]] = [students[1], students[2]];
console.log(students);

Output:

[“John”, “Mike”, “Jane”]

Parsing an array returned from a function:

function getStudents() {
  return ['John', 'Jane', 'Mike'];
}

let student1, student2, student3;
[student1, student2, student3] = getStudents();
console.log(student1);
console.log(student2);
console.log(student3);

Output:

John
Jane
Mike

Ignoring returned values using destructuring:

You can also ignore some or all values from an array using destructuring.

function getStudents() {
  return ['John', 'Jane', 'Mike'];
}

let student1, student2;
[student1, , student2] = getStudents();
console.log(student1);
console.log(student2);

let student3;
[student3] = getStudents();
console.log(student3);

Output:

John
Mike
John

Assigning the rest of the array to a variable:

By using the rest pattern you can assign the rest of the array to the variable.

const [student1, ...remainingStudents] = ['John', 'Jane', 'Mike'];
console.log(student1);
console.log(remainingStudents);

Output:

John
[“Jane”, “Mike”]

Object Destructuring in JavaScript:

You can use object destructuring in javascript as shown in the examples below.

Property Assignment:

const student = {
  id: 1,
  name: 'John'
};
const {id, name} = student;
console.log(id);
console.log(name);

Output:

1
John

Assigning values to properties:

let x, y;

({x, y} = {x: 5, y: 10});
console.log(x);
console.log(y);

Output:

5
10

Assigning new variables:

You can extract property from the object and assign it to a variable with a different name.

const student = {a: 1, b: 'John'};
const {a: id, b: name} = student;
console.log(id);
console.log(name);

Output:

1
John

Assigning default values:

You can assign default values to properties in case if the extracted value from a property is undefined.

const {x = 1, y = 2} = {x: 3};
console.log(x);
console.log(y);

Output:

3
2

Unpacking properties from an object and passing as a function parameter:

const student = {
  id: 1,
  username: 'jdoe',
  fullName: {
    firstName: 'John',
    lastName: 'Doe'
  }
};

function studentId({id}) {
  return id;
}

function studentInfo({username, fullName: {firstName: name}}) {
  return `${username} is ${name}`;
}

console.log(studentId(student));
console.log(studentInfo(student));

Output:

1
jdoe is John

Assigning properties using rest in object destructuring:

By using the rest pattern you can assign the rest of the properties from one object to another property.

let {student1, student2, ...remainingStudents} = {student1: 'John', student2: 'Jane', student3: 'Mike', student4: 'Ben'};
console.log(student1);
console.log(student2);
console.log(remainingStudents);

Output:

John
Jane
{student3: “Mike”, student4: “Ben”}

Conclusion:

You learned about when and how to use destructuring in javascript from this article. You learned how to use it with arrays and objects with different examples. If you have any questions, you can ask them using the comment section.

Related Articles:

Spread and Rest operator in JavaScript

Arrow functions in JavaScript

Difference between var, let and const

0 0 votes
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments