Spread Operator

Let’s go to the use cases!

Spreading an Array

In a case, we want duplicate an array. We can’t copy just like this.

const arr = [1, 4, 2];
const arr2 = arr; 

If we do that, when we manipulate arr the arr2 will be affected.

arr.push(100);
console.log(arr); // [1, 4, 2, 100]
console.log(arr2); // [1, 4, 2, 100]

Output what we want is

console.log(arr); // [1, 4, 2, 100]
console.log(arr2); // [1, 4, 2] => we don't even touch `arr2` so it should be the same

This case happens because we pass by reference to arr2. Simply, we don’t really have arr2. We may call arr2 just an alias of arr.

To completely copy arr to arr2 we can use something called spread operator.

Spread operator is three dots ... operator.

Before we copy arr, if we do console.log(...arr) the output will be

1 4 2

It means we now have 3 values that is not belong to any variables or constants. So we can do this to copy an array.

const arr = [1, 4, 2];
const arr2 = [ ...arr];
// arr = [1, 4, 2] 

If we push stuff to arr, arr2 will stay the same.

arr.push(50);
console.log(arr); // [1, 4, 2, 50]
console.log(arr2); // [1, 4, 2]

Spread operator can be used to combine multiple arrays.

const newArr = [...arr1, ...arr2, ...arr3, ...arr4];

Spreading an Object

Spread operator can also implemented to an object.

Let’s say we have two objects.

const personProfile = {
    name: 'Esto',
    age: 22,
}; 
const personHobbies = {
    indoor: ['Reading', 'Sleeping', 'Coding'],
    outdoor: ['Football', 'Running']
}

We can combine two object with this code.

const person = { ...personProfile, ...personHobbies };

Or we can copy personProfile to personProfileBackup.

const personProfileBackup = { ...personProfile };

Conclusion

The best case to copy an object or an array is when our app have “Customize” feature.

When user customize their theme, that customized configuration stored in a new object without replacing the old one.

If user click reset, we can replace modified object with the old one. Of course, we will find other use cases if we started building real world project!

See you!