Destructuring and Spread Operators: Why and When to Use?

Imagine you're a detective trying to solve a crime. You've just received a list of suspects and their corresponding alibis from your informant. However, the list is a mess and it's difficult to find the information you need.

That's where destructuring and spread operators come in. With these tools, we can quickly extract the relevant information from the list and work with it in a more organized and efficient way.

⭐ Destructuring

Destructuring allows us to extract values from arrays and objects and assign them to variables in a concise syntax.

Destructuring an array:

const suspects = ['Alice', 'Bob', 'Mallory'];
const [firstSuspect, secondSuspect] = suspects;
console.log(firstSuspect); // 'Alice'
console.log(secondSuspect); // 'Bob'

As you can see, we were able to extract the first & second elements of the suspects array and assign them to variables using destructuring.

Destructuring an object:

const suspects = {
 'Alice': 'at the library',
 'Bob': 'at the gym',
 'Eve': 'at home',
 'Mallory': 'at the park'
};
const { Alice, Bob, Eve } = suspects;
console.log(Alice); // 'at the library'
console.log(Bob); // 'at the gym'
console.log(Eve); // 'at home'

⭐ Spread Operator

The spread operator allows us to add or spread out elements.

Add elements to an array:

const suspects = ['Alice', 'Bob', 'Eve', 'Mallory'];
const newSuspects = ['Frank', 'Gina', ...suspects];
console.log(newSuspects); // ['Frank', 'Gina', 'Alice', 'Bob', 'Eve', 'Mallory']

As we can see, we used the spread operator to add the elements from the suspects array to the newSuspects array.

Spread out elements in an array:

const suspects = ['Alice', 'Bob', 'Eve', 'Mallory'];
console.log(...suspects); // 'Alice', 'Bob', 'Eve', 'Mallory'

⭐ When to Use

1️⃣ When we want to extract multiple properties from an object: Instead of manually selecting each property, we can destructure them into separate variables.

2️⃣ When we want to set default values: If a value is not present in the object, destructuring allows us to set a default value.

const { Alice, Bob = "No evidence, but doubtful" } = suspects;

3️⃣ When we want to pass object properties as function parameters: Destructuring can be used to unpack object properties directly into function parameters.

4️⃣ When we want to clone an object or array: The spread operator allows us to easily create a copy of an object or array.

5️⃣ When we want to merge objects or arrays: We can use the spread operator to combine multiple objects or arrays into one.