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.

⭐ Why to Use

1️⃣ It simplifies the syntax when dealing with data stored in objects and arrays.

2️⃣ Destructuring reduces the amount of code needed to extract data from objects and arrays.

3️⃣ Spread operator helps to make our code more readable and maintainable.

4️⃣ Spread operator provides a simple syntax for combining and copying data structures.

5️⃣ Spread operator provides an easy way to expand elements in iterable objects.