"..."? Explaining the spread syntax added in ES2015

Hello!
This is Yamada from the Systems Development Department.

This time, we will explain the spread syntax that was added in ES2015 and can be used to expand arrays, etc

What is spread syntax?

The spread syntax is used by placing "..." before an array or object.
It can be used when you want to expand an array or object.
This feature was added in ES2015 for arrays and in ES2018 for objects!
Specifically,
it can be used when specifying multiple arguments when calling a function, or when you want to duplicate an array or object.
We will now look at how it works using actual code.

Use with arrays

Create an array with a new element added

const fruits1 = ["apple", "banana", "peach"]; const newFruits1 = ["hassaku", ...fruits1]; console.log(newFruits1); // Result: ['hassaku', 'apple', 'banana', 'peach']

Create a combined array

const fruits1 = ["apple", "banana", "peach"]; const fruits2 = ["grapes", "tangerine"]; const newFruits2 = [...fruits1, ...fruits2]; console.log(newFruits2); // Result: ['apple', 'banana', 'peach', 'grapes', 'tangerine']

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', 'peach', 'watermelon'] console.log(spreadArray); // Result: ['apple', 'banana', 'peach']

When comparing the variables `fruits1` and `spreadArray` using the strict equality operator (===), the result is false.
This is because only the values ​​are copied to the variable `spreadArray`. You
can confirm this by trying it yourself: if you add "watermelon" to the variable `fruits1`, the change is reflected in `fruits1`, but not in the variable `spreadArray`, which only copies the values.

Use in objects

Create an object with the new element added

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

Create an object with modified elements

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

For duplicate keys, the last one defined will be valid

Create a combined object

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

Copying with spread syntax

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

As with arrays, only the values ​​are copied into the spreadObj variable, so a strict equality comparison (===) will return false

Use in methods

It is possible to expand and use arrays when inserting multiple arguments

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

Spread syntax can be used to make variable length arguments

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 value of a variable can be obtained as an array

summary

This time, we explained the spread syntax, which was added in ES2015 and allows you to expand arrays and objects in JavaScript.
Since it makes copying values ​​from arrays and objects easy, I would like to continue using it actively in the future.

lastly

I have launched "SEKARAKU Lab," a service website for the system development company I belong to.
Beyond offers a one-stop service for everything from server design and construction to operation, so please feel free to contact us if you have any problems with server-side development.
SEKARAKU Lab:https://sekarakulab.beyondjapan.com/