Spread Operator for Arrays in JavaScript

The spread (?) operator of JavaScript is used to expand an array or any other iterable into individual elements. It was introduced in ECMAScript 2015 (ES6).

The spread operator is a powerful feature of JavaScript that allows one to perform operations for complex and lengthy code in a simple single line of code. The spread operator is denoted by the (...) (triple dot) symbol. You can simply create a copy of any existing array with the spread operator. The basic syntax of the spread operator is mentioned below -

const newArray = [...existingArray];

Usage on Arrays

The spread operator has many uses for arrays. It enables you to copy the elements of existing arrays to a new array, concatenate two arrays, and more. This section will explain these and other uses. The spread operator can be used with arrays in the following ways -

• Copying Arrays
• Combining Arrays
• Adding Elements

Copying Arrays

Just by placing three dots before the existing array while assigning it to a new array, you can copy the elements of the existing array into the new one. The spread operator is the simplest way to do that.

Syntax

Here is the basic syntax for copying existing array elements:

const originalArray = [arrayElements];
const copyArray = [...originalArray];

Example

The following is a simple example of a spread operator demonstrating how to copy elements of an existing array to a new array.

// Original array
const originalArray = [1, 2, 3, 4, 5];

// Using the spread operator to copy elements to a new array
const newArray = [...originalArray];

// Displaying the arrays
console.log("Original Array:", originalArray);
console.log("New Array:", newArray);

Output

Original Array: [ 1, 2, 3, 4, 5 ]
New Array: [ 1, 2, 3, 4, 5 ]

Combining Arrays

Using the spread operator, you can simply combine two existing arrays while assigning them to a new array. The spread operator in this situation eliminates the need to write lengthy code to do that.

Syntax

Here is the basic syntax for combining existing arrays:

const array1 = [arrayElements];
const array2 = [arrayElements];
const combined = [...array1, ...array2];

Example

The following is a simple example of a spread operator demonstrating how to combine two existing arrays.

// First array
const array1 = [1, 2, 3];

// Second array
const array2 = [4, 5, 6];

// Using the spread operator to combine both arrays into a new array
const combinedArray = [...array1, ...array2];

// Displaying the arrays
console.log("Array 1:", array1);
console.log("Array 2:", array2);
console.log("Combined Array:", combinedArray);

Output

Array 1: [ 1, 2, 3 ]
Array 2: [ 4, 5, 6 ]
Combined Array: [ 1, 2, 3, 4, 5, 6 ]

Adding Elements

The spread operator also enables you to add an existing array with the new array elements. Using the spread operator is the simplest way to do that.

Syntax

Here is the basic syntax for adding an existing array with new array elements:

const numbers = [arrayElements];
const newNumbers = [...numbers, existingElements];

Example

The following is a simple example of a spread operator demonstrating how to add existing array with new array elements.

// Original array
const numbers = [1, 2, 3];

// Using the spread operator to create a new array with additional elements
const newNumbers = [...numbers, 4, 5];

// Displaying the new array
console.log(newNumbers);

Output

[ 1, 2, 3, 4, 5 ]

Conclusion

The spread operator in JavaScript makes it easier to work with arrays. It is great for copying arrays, merging them, and adding elements. By knowing how to use it effectively, you can write cleaner and more efficient code.