Destructuring Assignment in JavaScript: A Beginner Guide to Simplify Your Code

Destructuring assignment is a convenient way to extract values from arrays or properties from objects into distinct variables. It allows for more readable and concise code, making it easier to work with complex data structures.

arrayDestructuring.js 

// Destructuring assignment
let [first, second, third] = [1, 2, 3];

console.log(`first : ${first}`);  
console.log(`second : ${second}`);
console.log(`third : ${third}`);

Output

first : 1
second : 2
third : 3

 

let [first, second, third] = [1, 2, 3];

This line demonstrates array destructuring in JavaScript, where the values 1, 2, and 3 from the array [1, 2, 3] are assigned to the variables first, second, and third, respectively. This allows for concise and readable variable assignments from an array.

 

Object destructuring

 

objectDestructuring.js

// Destructuring assignment
let { a : x, b : y, c : z } = { a: 1, b: 2, c: 3 };

console.log(`x : ${x}`);
console.log(`y : ${y}`);
console.log(`z : ${z}`);

Output

x : 1
y : 2
z : 3

 

let { a : x, b : y, c : z } = { a: 1, b: 2, c: 3 };

This line shows how to use object destructuring with variable renaming in JavaScript. The properties a, b, and c from the object { a: 1, b: 2, c: 3 } are extracted and assigned to new variables x, y, and z, respectively. This allows you to rename the variables during the destructuring process.

 

Destructuring Assignment with Nested Objects

Destructuring also works with nested objects, allowing you to extract properties at any depth.

 

destructureNestedObjects.js

const person = {
    name: 'Krishna',
    address: {
        city: 'Banaglore',
        state : 'Karnataka',
        coordinates: {
            lat: 40.7128,
            lng: -74.0060
        }
    }
};

// Destructuring assignment
const {
    name,
    address: {
        city : myCity,
        state,
        coordinates: { lat, lng }
    }
} = person;

console.log(`name : ${name}`);
console.log(`myCity : ${myCity}`);
console.log(`state : ${state}`);
console.log(`lat : ${lat}`);
console.log(`lng : ${lng}`);

 

Output

name : Krishna
myCity : Banaglore
state : Karnataka
lat : 40.7128
lng : -74.006

 

In this example, we're using nested object destructuring to extract specific properties from a deeply nested object structure.

 

The Object Structure

The person object has a nested structure:

 

·      name: A direct property of person.

·      address: An object containing the properties:

o   city: The city name.

o   state: The state name.

o   coordinates: An object containing the properties:

§  lat: Latitude.

§  lng: Longitude.

 

Destructuring Assignment

The destructuring assignment extracts the properties from the person object.

const {
    name,
    address: {
        city : myCity,
        state,
        coordinates: { lat, lng }
    }
} = person;

 

Here’s what each part of the destructuring does:

 

·      name: Extracts the name property from person and assigns it to a variable called name.

 

·      address: { city : myCity, state, coordinates: { lat, lng } }: This part destructures the nested address object.

 

·      city: myCity:

 

o   The city property from address is extracted and renamed to myCity.

o   This means the value 'Banaglore' from city is now stored in the variable myCity.

o   Why rename? Renaming is useful when you want the variable name to be different from the property name. It avoids conflicts with existing variables or improves code readability.

·      state:

 

o   The state property from address is directly assigned to a variable named state.

o   Since the variable name and the property name are the same, there’s no need for renaming.

o   Why no rename? When the variable name you want to use is the same as the property name, there’s no need to rename it. This keeps the code simple and straightforward.

 

·      coordinates: { lat, lng }:

 

o   The coordinates object is destructured further to extract lat and lng, which are assigned to variables with the same names (lat and lng).

 

Destructuring Assignment to Assign Variables from Arrays

Destructuring can also be used to assign variables from arrays. You can even skip certain elements in the array.

 

destructuringFromArrays.js

const numbers = [10, 20, 30, 40, 50];

// Skipping Second and Fourth elements using a comma
const [first, , third, , fifth] = numbers;

console.log(`first : ${first}`); 
console.log(`third : ${third}`);
console.log(`fifth : ${fifth}`);

 

Output

first : 10
third : 30
fifth : 50

 

In this example, the array numbers contains the elements [10, 20, 30, 40, 50]. Using array destructuring, the line const [first, , third, , fifth] = numbers; selectively extracts values from the array while skipping specific elements. The first, third, and fifth elements (10, 30, and 50, respectively) are assigned to the variables first, third, and fifth. The second and fourth elements (20 and 40) are ignored in the destructuring process, as indicated by the empty commas. This approach allows you to extract specific values from an array without needing to manually skip or remove elements.

 

Destructuring Assignment with the Rest Operator

You can combine destructuring with the rest operator (...) to gather the remaining items into a new array or object.

 

destructuringUsingRestOperator.js

const [first, second, ...rest] = [1, 2, 3, 4, 5];

console.log(`first : ${first}`);
console.log(`second : ${second}`);
console.log(`rest : ${rest}`);

 

Output

first : 1
second : 2
rest : 3,4,5

Destructuring Assignment to Pass Specific Object Properties as Function Parameters

Destructuring is particularly useful when passing specific properties from an object as parameters to a function.

 

destructureToPassSpecificProperties.js

const user = { id: 512, name: 'Krishna', age: 35, email: 'krishna@example.com' };

function displayUser(user) {
    console.log(`User: ${user.name}, Age: ${user.age}`);
}

displayUser(user);

Output

User: Krishna, Age: 35

Swapping Variables: Destructuring can be used to swap variables without needing a temporary variable.

 

swap.js

let x = 1, y = 2;
console.log(`x : ${x}`);
console.log(`y : ${y}`);


[x, y] = [y, x];
console.log('\nAfter swapping');

console.log(`\nx : ${x}`);
console.log(`y : ${y}`);

Output

x : 1
y : 2

After swapping

x : 2
y : 1

Destructuring assignment in JavaScript is a powerful feature that allows for cleaner and more readable code when dealing with objects and arrays. It simplifies the process of extracting values, working with nested structures, and passing object properties to functions.

 

Previous                                                    Next                                                    Home