Destructuring
Assignment in JavaScript

What is Destructuring Assignment?

Destructuring assignment in JavaScript is a convenient way to extract values from arrays or properties from objects into distinct variables. It simplifies your code and makes it more readable, especially when dealing with complex data structures.

Destructuring Arrays

Let’s start by understanding how we can destructure values from arrays.

const colors = ['red', 'green', 'blue'];
const [firstColor, secondColor, thirdColor] = colors;

console.log(firstColor);
console.log(secondColor);
console.log(thirdColor);
    

Output:

red
green
blue
    

Why use destructuring?

Suppose you receive an array from a function. Instead of writing:

const result = [1, 2];
const x = result[0];
const y = result[1];
    

You can write:

const [x, y] = result;
    

Cleaner, right?

Skipping Items in Arrays

You can skip elements in an array while destructuring:

const numbers = [10, 20, 30];
const [ , , third] = numbers;
console.log(third);
    

Output:

30
    

Destructuring Objects

Now let’s explore object destructuring. It allows you to pull out properties from an object into variables.

const person = {
  name: 'Alice',
  age: 25,
  country: 'India'
};

const { name, age } = person;

console.log(name);
console.log(age);
    

Output:

Alice
25
    

Renaming Variables During Destructuring

You can also assign a property to a variable with a different name:

const user = {
  id: 101,
  username: 'john_doe'
};

const { username: userName } = user;

console.log(userName);
    

Output:

john_doe
    

Using Default Values

What if the property does not exist? You can set a default value during destructuring:

const profile = { name: 'Jane' };

const { name, city = 'Unknown' } = profile;

console.log(city);
    

Output:

Unknown
    

Nested Destructuring

JavaScript also supports nested destructuring:

const employee = {
  id: 501,
  details: {
    fullName: 'David Smith',
    department: 'Sales'
  }
};

const { details: { fullName } } = employee;

console.log(fullName);
    

Output:

David Smith
    

Destructuring in Function Parameters

You can destructure directly in function arguments for cleaner code:

function greet({ name, age }) {
  console.log(`Hello, ${name}. You are ${age} years old.`);
}

greet({ name: 'Emily', age: 30 });
    

Output:

Hello, Emily. You are 30 years old.
    

Quick Quiz

Question: What will be the output of the following?

const fruits = ['apple'];
const [firstFruit, secondFruit = 'banana'] = fruits;
console.log(secondFruit);
    

Answer: banana. Since the second element is undefined, the default is used.

Key Takeaways

• Destructuring simplifies extracting values from arrays and objects.
• You can skip values, rename variables, and assign defaults.
• It helps reduce lines of code and improves readability.