× Full Screen Image

The Spread Operator

The spread operator (...) lets you expand an iterable (like an array or string) into individual elements. It was introduced in ES6.

Think of it as unpacking a box: instead of passing the box around, you take out each item and use them one by one.

javascript

const nums = [1, 2, 3];
console.log(...nums); // Output: 1 2 3

The three dots ... before nums spread the array values out individually.

You can use the spread operator to create a copy of an array. Changes to the copy will not affect the original.

javascript

const original = [1, 2, 3];
const copy = [...original];

copy.push(4);

console.log(original); // [1, 2, 3]
console.log(copy);     // [1, 2, 3, 4]

The spread operator creates a new array with the same values. Modifying copy does not change original.

You can merge two arrays into one using the spread operator. This is cleaner than using concat().

javascript

const fruits = ['apple', 'banana'];
const veggies = ['carrot', 'potato'];

const food = [...fruits, ...veggies];

console.log(food);
// ['apple', 'banana', 'carrot', 'potato']

You can also add extra items while joining:

javascript

const combined = [...fruits, 'mango', ...veggies];
console.log(combined);
// ['apple', 'banana', 'mango', 'carrot', 'potato']

Strings are iterable in JavaScript, so you can use the spread operator to split a string into individual characters.

javascript

const name = 'hello';
const letters = [...name];

console.log(letters);
// ['h', 'e', 'l', 'l', 'o']

Each character in the string becomes its own element in the resulting array.

When a function expects separate parameters, you can use the spread operator to pass an array as individual arguments.

javascript

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

const numbers = [1, 2, 3];
console.log(add(...numbers)); // Output: 6

Without spread, you would have to write add(numbers[0], numbers[1], numbers[2]). Spread makes it much simpler.

Another common example is using Math.max() with an array:

javascript

const scores = [10, 45, 23, 67, 5];
console.log(Math.max(...scores)); // Output: 67

The spread operator creates a shallow copy of an array or object. A shallow copy means the top-level values are copied, but nested objects or arrays are still shared by reference.

javascript

// Shallow copy of an object
const user = { name: 'Alice', age: 25 };
const userCopy = { ...user };

userCopy.name = 'Bob';

console.log(user.name);     // 'Alice' (unchanged)
console.log(userCopy.name); // 'Bob'

However, if the object contains nested objects, those nested values are still shared:

javascript

const person = { name: 'Alice', address: { city: 'Paris' } };
const personCopy = { ...person };

personCopy.address.city = 'London';

console.log(person.address.city); // 'London' (also changed!)
// Nested objects are NOT deep copied

Use JSON.parse(JSON.stringify(obj)) or structured clone if you need a deep copy.

  • The spread operator (...) expands an iterable into individual elements.
  • Use it to copy an array without modifying the original.
  • Use it to join two or more arrays into one.
  • Spread a string into an array of characters.
  • Pass an array to a function as individual arguments.
  • Creates a shallow copy — nested objects are still shared by reference.
Previous
Next