Introduction to Spread Operator in JavaScript

The spread operator (...) in JavaScript allows an iterable (like an array, string, or object) to be expanded into individual elements.

Syntax

    
        sh
        
        const newArray = […oldArray];
const newObj = { …oldObj };

Where Can It Be Used?

Arrays → Copying, merging, adding elements
Objects → Copying, merging, overriding properties
Function Arguments → Passing dynamic values

2. Basic Examples of Spread Operator in JavaScript

Example 1: Copying an Array

    
        sh
        
        const original = [1, 2, 3];
const copy = […original];
console.log(copy); // [1, 2, 3]

Example 2: Merging Arrays

    
        sh
        
        const arr1 = [1, 2];
const arr2 = [3, 4];
const merged = […arr1, …arr2];
console.log(merged); // [1, 2, 3, 4]

Example 3: Function Arguments

    
        sh
        
        function add(a, b, c) {
return a + b + c;
}
const nums = [1, 2, 3];
console.log(add(…nums)); // 6

Example 4: Copying an Object

    
        sh
        
        const user = { name: “Alice”, age: 25 };
const userCopy = { …user };
console.log(userCopy); // { name: “Alice”, age: 25 }

Example 5: Merging Objects

    
        sh
        
        const obj1 = { name: “Alice” };
const obj2 = { age: 25 };
const mergedObj = { …obj1, …obj2 };
console.log(mergedObj); // { name: “Alice”, age: 25 }

3. Practical Use Cases of Spread Operator in JavaScript

Case 1: Dynamic Function Arguments

    
        sh
        
        function greet(firstName, lastName) {
console.log(`Hello, ${firstName} ${lastName}!`);
}
const names = [“John”, “Doe”];
greet(…names); // “Hello, John Doe!”

Case 2: Convert String to Array

    
        sh
        
        const str = “hello”;
const letters = […str];
console.log(letters); // [‘h’, ‘e’, ‘l’, ‘l’, ‘o’]

Case 3: Updating State in React (Immutable Update)

    
        sh
        
        const [user, setUser] = useState({ name: “Alice”, age: 25 });
// Updating age immutably
setUser({ …user, age: 30 });

4. Common Mistakes & Best Practices

Mistake 1: Shallow Copy Issue

    
        sh
        
        const original = [{ name: “Alice” }];
const copy = […original];
original[0].name = “Bob”;
console.log(copy[0].name); // “Bob” (modified!)

✅ Fix: Use JSON.parse(JSON.stringify(obj)) for deep copies.

Mistake 2: Overusing Spread in Large Arrays

    
        sh
        
        const bigArray = new Array(1000000).fill(0);
const copy = […bigArray]; // Slow for large arrays