Demystifying '...' in ES2015: Exploring the Newly Added Spread Syntax

Hello!

I’m going to talk about the spread syntax that can be used to expand arrays, etc. that are added to ES2015.

What’s spread syntax？

The “...” is placed before arrays and objects for expanding the elements or properties when it is used. This is a new feature added in ES2015 for arrays and ES2018 for objects.

It can be used when specifying multiple arguments in a function call or when creating a copy of an array or object. In the following example, I will use actual code to demonstrate how it works.

Usage in arrays

Create an array with a new element added

const fruits1 = ["Apple", "Banana", "Peach"];
 
const newFruits1 = ["Pineapple", ...fruits1];
console.log(newFruits1);
// Result：['Pineapple', 'Apple', 'Banana', 'Peach']

Create merged array

const fruits1 = ["Apple", "Banana", "Peach"];
const fruits2 = ["Grape", "Orange"];
 
const newFruits2 = [...fruits1, ...fruits2];
console.log(newFruits2);
// Result：['Apple', 'Banana', 'Peach', 'Grape', 'Orange']

Copying with spread syntax

const fruits1 = ["Apple", "Banana", "Peach"];
const spreadArray = [...fruits1];
 
console.log(spreadArray === fruits1); // Result：false
 
fruits1.push('Watermelon')
 
console.log(fruits1); // Result：['Apple', 'Banana', 'Pleach', 'Watermelon']
console.log(spreadArray); // Result：['Apple', 'Banana', 'Peach']

If the variable fruits1 is compared with the variable spreadArray using the strict equality operator (===), it returns false. This is because the variable spreadArray contains a copy of the values.

To test this, when "watermelon" is added to the "fruits1" variable, it will be reflected in "fruits1" itself. However, since the "spreadArray" variable only copied the values, it will not be affected.

Usage with objects

Create an object with new values added

const user = { id: 1, name: "John", age: 20 };
 
const addHeightUser = { height: 170, ...user };
console.log(addHeightUser);
// Result：{height: 170, id: 1, name: 'John', age: 20}

Create an object whose elements are modified

const user = { id: 1, name: "John", age: 20 };
 
const changeNameUser = { ...user, name: "Tom" };
console.log(changeNameUser);
// Result：{id: 1, name: 'Tom', age: 20}

For the duplicated keys, the last one defined will be valid.

Create a merged object

const user = { id: 1, name: "John", age: 20 };
const userHobby = { hobby: "Board game" };
 
const data = { ...user, ...userHobby };
console.log(data);
// Result：{id: 1, name: 'John', age: 20, hobby: 'Board game'}

Copying with spread syntax

const user = { id: 1, name: "John", age: 20 };
const spreadObj = { ...user };
 
console.log(spreadObj === user); // Result：false

As with arrays, only the values are copied into the variable spreadObj, so a comparison using the strict equality operator (===) will result in false.

Usage as a method

An array can be expanded for insertion into multiple arguments.

const array = ["John", 20];
 
const display = (userName, userAge) =>;
  console.log(`Name is${userName}、Age is ${userAge}`);
 
display(...array) // Result：Nmae is John、Age is 20

Spread syntax can be used for variable length argument 1

const display = (...numbers) => console.log(numbers);
 
display(1, 2, 3); // Result：[1, 2, 3]
display(1, 2, 3, 4); // Result：[1, 2, 3, 4]

The values of the variable can be retrieved as an array.

Summary

In this article, I explained the spread syntax that was added to ES2015 to allow the expansion of arrays and objects in JavaScript.

Since it is convenient when you want to copy values of arrays and objects, it’d be very useful to write codes.

This blog post is translated from a blog post written by Yuki Yamada on our Japanese website Beyond Co..