JavaScript The Spread Operator

The spread operator (...) expands an iterable, such as an array or string, into individual values. It was introduced in ES6.

Think of it like unpacking a box. Instead of handling one container, you directly work with the items inside it.

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.

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 with spread syntax. Many developers prefer this because it reads clearly and scales well when combining multiple arrays.

const frontend = ["HTML", "CSS"];
const backend = ["Node", "SQL"];

const allSkills = [...frontend, ...backend];

console.log(allSkills);
// ["HTML", "CSS", "Node", "SQL"]

You can also add extra items while joining:

const combined = [...frontend, "React", ...backend];
console.log(combined);
// ["HTML", "CSS", "React", "Node", "SQL"]

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

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.

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:

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.

// Shallow copy of an object
const defaults = { theme: "light", lang: "en" };
const userPrefs = { ...defaults };

userPrefs.theme = "dark";

console.log(defaults.theme);  // "light" (unchanged)
console.log(userPrefs.theme); // "dark"

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

const config = { theme: "light", notifications: { email: true } };
const configCopy = { ...config };

configCopy.notifications.email = false;

console.log(config.notifications.email); // false (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.

What's next? Now that you know how the spread operator expands values, let's learn how to collect extra values with the rest parameter in the next tutorial.

• What is the spread operator in JavaScript and what are its use cases?
• What is the difference between a shallow copy and a deep copy?
• How do you merge two arrays using the spread operator?

Videos for this topic will be added soon.