How Spread Operator Works in JS

The spread operator (...) in JavaScript is a powerful feature used to expand or spread elements of an iterable (like an array or object) into individual elements. It is commonly used in situations where you want to copy or merge arrays, objects, or even pass arguments to functions.

1. Arrays with the Spread Operator

When you use the spread operator with arrays, JavaScript is essentially copying elements from the array into a new array or expanding the elements into a function call.

let arr = [1, 2, 3];
let newArr = [...arr];
console.log(newArr); 

[ 1, 2, 3 ]

Behind the scenes:

• The spread operator takes the array arr and spreads it into individual values, effectively creating a shallow copy of the array.
• This operation internally calls the iterable protocol to iterate over the array and add each element into the new array. It essentially mimics the behavior of the Array.prototype.push() method but for all items.

In technical terms, the spread operator is equivalent to using the Array.prototype.concat() or Array.prototype.push() method:

let newArr = [].concat(arr);  // Equivalent to [...arr]

2. Objects with the Spread Operator

For objects, the spread operator creates a shallow copy by copying all enumerable properties from the source object into a new object.

let person = { name: 'GFG', age: 25 };
let newPerson = { ...person };
console.log(newPerson); 

{ name: 'GFG', age: 25 }

Behind the scenes:

• The spread operator loops through all the properties of the person object and adds them to the new object. It works by accessing the object's keys and values, and copying them over.
• This operation is a shallow copy, so if the values of the object properties themselves are objects (nested objects), only their references are copied, not the actual objects.

Internally, it's equivalent to:

let newPerson = Object.assign({}, person);

3. In Function Calls

The spread operator can also be used to pass an array or iterable as separate arguments to a function. This is useful when you have an array of values but need to call a function with those values as individual arguments.

function sum(a, b, c) {
  return a + b + c;
}

let nums = [1, 2, 3];
console.log(sum(...nums));

6

Behind the scenes:

• The spread operator unpacks the array nums and calls the sum function with each individual element of the array as its arguments. It’s as though the function is called like this:

sum(1, 2, 3);

Internally, JavaScript uses the apply() method or a similar internal mechanism to spread the arguments:

sum.apply(null, nums);  // Equivalent to sum(...nums)

4. Merging Arrays and Objects

The spread operator can be used to merge arrays and objects easily.

Arrays:

let arr1 = [1, 2];
let arr2 = [3, 4];
let combined = [...arr1, ...arr2];
console.log(combined);  

[ 1, 2, 3, 4 ]

Behind the scenes:

• Internally, JavaScript is performing multiple concat() operations or using push() to add elements of arr2 to arr1.

Object:

let obj1 = { name: 'GFG' };
let obj2 = { age: 25 };
let combinedObj = { ...obj1, ...obj2 };
console.log(combinedObj); 

{ name: 'GFG', age: 25 }

Behind the scenes:

• The spread operator copies all properties from obj1 and obj2 into a new object.
• If there are overlapping keys, the later object will overwrite the previous one.