Understanding the JavaScript Spread Operator — From Beginner to Expert

Introduction

The spread operator, …, was first introduced in ES6. It quickly became one of the most popular features. So much so that despite the fact it only worked on arrays, a proposal was made to extend its functionalities to objects. This feature was finally introduced in ES9.

The goal of this tutorial, which is divided into two parts, is to show you why the spread operator should be used, how it works, and to deep dive into its uses, from the most basic to the most advanced.

Here is a short summary of the contents of this tutorial:

Part 1

1. Why the spread operator should be used
2. Cloning arrays/objects
3. Converting array-like structures to array
4. The spread operator as an argument
5. Adding elements to arrays/objects
6. Merging arrays/objects

Part 2

1. Advanced uses of the spread operator

Why You Should Use the Spread Operator

After reading the previous list, you may be thinking something along these lines: “But JavaScript has functions to do all those things. Why would I use the spread operator?” Allow me to introduce you to immutability.

From Oxford Lexico: Immutability — unchanging over time or unable to be changed.

In software development, we use the term immutable to refer to values whose state cannot change over time. In fact, most of the values that we normally use (primitive values, such as strings, integers, etc.) are immutable.

However, JavaScript has a peculiar behavior when it comes to arrays and objects; they are, in fact, mutable. This can become a big problem. Here’s an example, illustrating why: