Part 6.5The spread operator

The spread operator was introduced as part of ECMAScript 2015 (ES6) and provides a convenient way of expanding arrays and objects.

It is widely used throughout modern JavaScript and appears frequently in React applications.

Although the syntax consists of only three dots (...), it can significantly reduce the amount of code required when copying, combining and updating data structures.

What the spread operator is

The spread operator expands the contents of an array or object.

Consider the following array:

const numbers = [1, 2, 3];

Using the spread operator expands the values:

const expanded = [...numbers];

The values contained within numbers are expanded into the new array.

Spreading arrays

The spread operator is commonly used with arrays.

Consider the following:

const colours = [
    "red",
    "green",
    "blue"
];

const copy = [...colours];

A new array is created containing the same values.

Copying arrays

Assigning one array to another does not create a copy.

Consider the following:

const a = [1, 2, 3];
const b = a;

Both variables reference the same array.

To create a new array, the spread operator can be used:

const a = [1, 2, 3];
const b = [...a];

Changes made to b will not affect a.

Combining arrays

Multiple arrays can be merged together using the spread operator.

const group_one = [1, 2, 3];
const group_two = [4, 5, 6];

const combined = [
    ...group_one,
    ...group_two
];

The value of combined will be:

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

Spreading objects

The spread operator can also be used with objects.

Consider the following:

const user = {
    name: "John",
    age: 25
};

const copy = {
    ...user
};

A new object is created containing the same properties.

Copying objects

The spread operator is often used when a copy of an object is required.

const settings = {
    theme: "dark",
    language: "en"
};

const settings_copy = {
    ...settings
};

This produces a new object containing the same properties as the original.

Adding properties

Additional properties may be specified when creating the new object.

const user = {
    name: "John"
};

const updated_user = {
    ...user,
    age: 25
};

The new object contains all existing properties plus the newly added age property.

Overriding properties

Existing properties can also be replaced.

const user = {
    name: "John",
    age: 25
};

const updated_user = {
    ...user,
    age: 26
};

Because the age property appears after the spread operator, the new value replaces the original value.

Using the spread operator in React

One of the most common uses of the spread operator can be found in React applications.

React state should generally be treated as immutable, meaning existing objects and arrays should not be modified directly.

Instead, new copies are created containing the required changes.

const updated_user = {
    ...user,
    name: "Jane"
};

Similar patterns appear frequently throughout React applications and are covered in more detail in the React course.

Function arguments

The spread operator can also expand arrays when calling functions.

const numbers = [1, 2, 3];

console.log(
    ...numbers
);

This passes each value as a separate argument to the function.

When to use the spread operator

The spread operator should be used when copying, combining or updating arrays and objects.

It often results in clearer and more maintainable code than manually creating copies or iterating through data structures.

Since the spread operator is heavily used throughout modern JavaScript and React applications, it is an important language feature to understand before moving on to modules, promises and asynchronous programming.