JavaScript Spread Operator

Introduction

The spread operator (...) in JavaScript was introduced in ES6. The spread operator allows you to expand iterable values like arrays, objects, or strings into individual elements.

In this guide, you’ll learn everything about the JavaScript spread operator, including syntax, examples, real-life use cases, differences from rest parameters, common mistakes, and interview questions.

What is the Spread Operator?

The spread operator (…) is used to expand elements of an iterable (like arrays or objects) into individual elements.

📖
Best Practices:
  • Use spread for copying arrays/objects.
  • Avoid deep nested copying
  • Combine with destructuring

Syntax of Spread Operator


...iterable

Example:


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

Output:

1 2 3

Spread Operator with Arrays

1. Copying an Array:


const arr1 = ["Apple","Banana", "Orange"];
const arr2 = [...arr1];
console.log(arr2);

Output:

[‘Apple’, ‘Banana’, ‘Orange’]

2. Merging Arrays


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

Output:

[1, 2, 3, 4, 5, 6]

3. Adding Elements to an Array


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

Output:

[0, 1, 2, 3, 4]

4. Passing Arguments


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

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

Output:

6

Spread Operator with Objects

1. Copying an Object


const obj1 = { name: 'John', age: 35 };
const obj2 = { ...obj1 };
console.log(obj2);

Output:

{name: ‘John’, age: 35}

2. Merging Objects


const obj1 = { name: 'John', age: 35 };
const obj2 = { sex: 'Male', qualification: 'Graduate'};
const merged = { ...obj1, ...obj2 };
console.log(merged);

Output:

{name: ‘John’, age: 38, sex: ‘Male’, qualification: ‘Graduate’ }

3. Overriding Properties


const obj1 = { name: 'John', age: 38 };
const obj2 = { age: 39, qualification: 'Graduate'};
const merged = { ...obj1, ...obj2 };
console.log(merged);

Output:

{name: ‘John’, age: 39, qualification: ‘Graduate’ }

Spread Operator with Strings


let str = "Hello";
let chars = [...str];
console.log(chars);

Output:

[‘H’,’e’,’l’,’l’,’o’]

Removing Duplicates from the Array

Suppose you have an array and you want to remove duplicate values from the array.


let arr = [1, 2, 2, 3];
let unique = [...new Set(arr)];
console.log(unique);

Output:

[ 1, 2, 3 ]

When to Use Spread Operator

Use spread when:

  • Copying arrays or objects
  • Merging data
  • Passing arguments
  • Working with immutable data

spread operator – Interview Questions

Q 1: What is the spread operator?
Ans: It expands iterable elements.
Q 2: Syntax of spread operator?
Ans: ....
Q 3: Can it copy arrays?
Ans: Yes (shallow copy).
Q 4: Can it merge objects?
Ans: Yes.
Q 5: Is the spread operator an ES6 feature?
Ans: Yes.

spread operator – Objective Questions (MCQs)

Q1. The spread operator is represented by ______.





Q2. The spread operator is used to ______.





Q3. Which data type can use the spread operator?





Q4. What does [...arr] create?





Q5. Spread operator was introduced in ______.





Conclusion

The JavaScript spread operator is a powerful and versatile feature that simplifies many common tasks such as copying, merging, and expanding data. It plays a crucial role in modern JavaScript development, especially when working with arrays, objects, and functional programming patterns.

By mastering the spread operator, you can write cleaner, more efficient, and more readable code.