Trusted answers to developer questions

What is destructuring in JavaScript?

Free System Design Interview Course

Many candidates are rejected or down-leveled due to poor performance in their System Design Interview. Stand out in System Design Interviews and get hired in 2024 with this popular free course.

Destructuring is a feature introduced with ES6. A feature that enables you to break down a structure, like an array or object, and store its components in variables.

Destructuring arrays

Let’s see how destructuring works on arrays.

fruits = ["Apple","Banana","Melon","Plum"] //Array to be destructured
var [fruit1, fruit2] = fruits //Destructuring
console.log(fruit1)
console.log(fruit2)
This is what happened in the code above
This is what happened in the code above

Let’s now see a few techniques to use destructuring efficiently:

fruits = ["Apple","Banana","Melon","Plum"] //Array to be destructured
var [,fruit1,, fruit2] = fruits //Focus on the use of extra commas to skip through elements
console.log(fruit1)
console.log(fruit2)
Selecting desired elements
Example1 of code above
Example1 of code above
Example2 of code above
Example2 of code above

Destructuring objects

Destructuring objects is slightly different from destructuring arrays.

var car = {
category : "sports",
color : "red",
top_speed : 240
} //object to be destructured
var {top_speed, color} = car //
console.log(top_speed)

RELATED TAGS

destructuring
javascript
Copyright ©2024 Educative, Inc. All rights reserved
Did you find this helpful?