JavaScript Spread Operator

The spread syntax ... allows elements of iterable values such as arrays and strings, or properties of objects, to be expanded into a new array, function arguments, or object.

• Used to copy, combine, and expand arrays and objects.
• Can expand iterable values such as arrays and strings.
• Can pass array elements as individual function arguments.

Syntax:

const newArray = [...iterable];

For objects:

const newObject = { ...object };

Spread with Arrays

The spread syntax can be used to copy arrays, add elements, and combine multiple arrays.

1. Copying an Array

The spread syntax creates a new shallow copy of an array.

const numbers = [1, 2, 3];

const copyNumbers = [...numbers];

console.log(copyNumbers);

[ 1, 2, 3 ]

Changes made to the new array do not affect the original array:

copyNumbers.push(4);

console.log(numbers);
console.log(copyNumbers);

Output:

[1, 2, 3]
[1, 2, 3, 4]

Note: Spread creates a shallow copy, so nested objects or arrays are still shared between the original and copied array.

2. Adding Elements to an Array

Spread can be used to add elements while creating a new array.

const numbers = [10, 20];

const result = [...numbers, 30, 40];

console.log(result);

[ 10, 20, 30, 40 ]

Elements can also be added before the existing elements:

const result = [30, 40, ...numbers];

console.log(result);

Output:

[30, 40, 10, 20]

3. Merging Arrays

Spread syntax can combine multiple arrays into a new array.

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

const merged = [...first, ...second];

console.log(merged);

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

4. Passing Array Elements as Function Arguments

Spread syntax can expand an array into individual function arguments.

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

const numbers = [10, 20, 30];

console.log(add(...numbers));

60

Here, ...numbers passes the array elements as separate arguments:

add(10, 20, 30);

5. Finding Minimum and Maximum Values

Spread syntax can be used to pass array elements to functions such as Math.min() and Math.max().

const numbers = [1, 2, 3, -1];

console.log(Math.min(...numbers));
console.log(Math.max(...numbers));

-1
3

Spread with Strings

Strings are iterable, so their characters can be expanded into individual elements.

const word = "AUDI";

const letters = [...word];

console.log(letters);

[ 'A', 'U', 'D', 'I' ]

Spread with Objects

The spread syntax can be used to copy and combine properties from objects into a new object.

const user = {
    name: "Ryan",
    age: 22
};

const details = {
    city: "Delhi",
    country: "India"
};

const profile = {
    ...user,
    ...details
};

console.log(profile);

{ name: 'Ryan', age: 22, city: 'Delhi', country: 'India' }

Also Check:

• Spread vs. Rest Operator