Spread & Rest Operators

The spread and rest operators use the same ... syntax, but they are used for different purposes in JavaScript.

What are Spread & Rest Operators?

The spread operator expands the elements of an array or the properties of an object.

The rest operator collects multiple values into a single array.

Spread vs Rest

Example 1: Spread with Arrays

The spread operator can copy the elements of one array into another array.

let numbers = [10, 20, 30];

let newNumbers = [...numbers, 40, 50];

console.log(newNumbers);

Example 2: Combining Arrays

let first = [1, 2, 3];
let second = [4, 5, 6];

let combined = [...first, ...second];

console.log(combined);

Example 3: Spread with Objects

let student = {
    name: "Rahul",
    age: 22
};

let updatedStudent = {
    ...student,
    course: "JavaScript"
};

console.log(updatedStudent);

Example 4: Rest Parameters

Rest parameters collect multiple arguments into an array.

function sum(...numbers) {

    let total = 0;

    for (let number of numbers) {
        total = total + number;
    }

    return total;
}

console.log(sum(10, 20, 30));

Example 5: Rest with First Parameter

function showStudent(name, ...subjects) {

    console.log("Name:", name);
    console.log("Subjects:", subjects);
}

showStudent("Amit", "JavaScript", "HTML", "CSS");