destructuring in JavaScript

Destructuring in JavaScript (object & array destructuring) for beginners

What does Destructuring in JavaScript actually mean?

Destructuring in JavaScript is an expression that lets us extract data from arrays, objects, and maps and store it in new variables. We can extract many properties, or items, from an array at once using destructuring.

What’s the difference between destructuring an array and destructuring an object?


The following is the key distinction between the two destructuring assignments:

Array destructuring is a technique for extracting values from an array.

Object destructuring, on the other hand, extracts values from JavaScript objects.

The purpose of this article is to demonstrate how array and object destructuring assignments work in JavaScript.

destructuring-in-javascript

Array destructuring in JavaScript

You might copy the value of an array into a new variable without using the array destructuring assignment technique like this:

let Person = ['John', 'Doe'];

let firstName = Person[0];
let lastName = Person[1];

console.log(firstName); // "John"
console.log(lastName); // "Doe"

There is a lot of repetitive code in the snippet above, which is not a DRY (Don’t Repeat Yourself) approach to coding.

Let’s have a look at how array destructuring makes things more orderly and DRY.

let Person = ['John', 'Doe'];

//destructuring
let [firstName, lastName] = Person;

console.log(firstName); // "John"
console.log(lastName); // "Doe"

In the above example by putting the two new variables (firstName and LastName) into an array object, we’ve cleaned up our code.

The values of the person array were then assigned to them. You can further simplify the code by direct destructuring the array.

let [firstName, lastName] = [
  "John", 
  "Doe", 
];

console.log(firstName); // "John"
console.log(lastName); // "Doe"

How to Assign the Rest of Array elements to a Variable Using Array Destructuring?


Within a destructuring array, you can use the rest operator to assign the rest of a regular array to a variable in JavaScript. The rest operator is represented by the three dots (…) in JavaScript.

To avoid a SyntaxError, always use the rest operator as the last item in your destructuring array.

This example will assign the last two elements to the fullName variable.

let [age, ...fullName] = ["30", "John", "Doe"];

console.log(age); // 30
console.log(fullName); // ["John", "Doe"]

How to Extract Values at Any Index Using Array Destructuring?

Here’s how to extract values from any index location in a normal array using array destructuring. We can extract the last name in the following example.

let [ , , lastName] = ["30", "John", "Doe"];

console.log(lastName); // "Doe"

We use commas to skip variables at the first and second index positions of the destructuring array in the example above.

How do Default Values work?


When the value you want to extract from an array doesn’t exist or it is undefined then setting a default value can be useful. You will get the default value.

let [ firstName='Barak', lastName = 'Obama', age='40' ] = ["John", "Doe"];

console.log(firstName); // "John" (instead of Barak)
console.log(lastName); // "Doe" (instead of Obama)
console.log(age); // "40" (Default value)

Let’s consider the second example. What if we do not provide the new value for lastName?

let [ firstName='Barak', lastName = 'Obama', age='40' ] = ["John"];

console.log(firstName); // "Jhon" (instead of Barak)
console.log(lastName); // "Obama" (print default value)
console.log(age); // "40" (Default value)

If you want to change the value of any location then use the commas to skip variables. for example, we can only change the age.

let [ firstName='Barak', lastName = 'Obama', age='40' ] = [, , "10"];

console.log(firstName); // "Barak" (Default value)
console.log(lastName); // "Obama" (Default value)
console.log(age); // "10" (New value)

// now Obama is 10 years old ... 

How to Swap Variable Values Using Array Destructuring?


The array destructuring assignment can be used to swap the values of two or more variables. look at the following example to swap the values of a and b.

let a = "AAA";
let b = "BBB";

[a, b] = [b, a];

console.log(a); // "BBB"
console.log(b); // "AAA"

Object Destructuring in JavaScript

Now we will learn how to assign properties of an object to specific variables using JavaScript object destructuring.

Assume you have a person object with the firstName and lastName properties.

let Person = {
    firstName: "John",
    lastName: "Doe"
};

Prior to ES6, assigning properties of the person object to variables was normally done as follows:

let firstName = Person.firstName;
let lastName = Person.lastName; 

console.log(firstName); // "John"
console.log(lastName); // "Doe"


ES6 includes the object destructuring syntax, which allows you to assign properties of an object to variables in a different way:

let { firstName: fName, lastName: lName } = Person;

console.log(fName); // "John"
console.log(lName); // "Doe"

The new version is simple and easy to read. The firstName and lastName properties are assigned to the fName and lName variables.

You can also use shorthand syntax to make your code more readable.

let Person = {
  firstName: "John", 
  lastName: "Doe"
};

let { firstName, lastName } = Person;

console.log(firstName); // "John"
console.log(lastName); // "Doe"

Default values in JavaScript Object Destructuring.


When an object’s property does not exist, you can assign a default value to the variable. Consider the following example:

The lName = 'Obama' is not available in the original object so it will print the given default value of lName, which is "Obama".

let Person = {
    firstName: "John",
    lastName: "Doe",
    age: 30
};

let { firstName, lastName, lName = 'Obama', age: age = 10 } = Person;

console.log(firstName); // "John"
console.log(lastName); // "Doe"

console.log(lName); // 'Obama'
console.log(age); // 30

For beginners, the tutorial has just been simplified. If you find this material useful, please share it with your social media friends.