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

Thank you for your hard work!
This is Yamada from the System 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?

Spread syntax is used by placing "..." before an array or object.
It can be used when you want to expand an array, object, etc.
This feature is a new feature 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.
Below, we will verify 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']

If you compare the variables fruits1 and spreadArray using the strict equality operator (===), the result will be false.
This is because only the value is copied to the variable spreadArray.
For example, if you add a "watermelon" to the variable fruits1, the change is reflected in fruits1, but not in the variable spreadArray, which only copies the value, as you can see from this.

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, I explained the spread syntax, which was added in ES2015 and allows you to expand arrays and objects in JavaScript.
It makes it easy to copy the values ​​of arrays and objects, so I would like to continue using it actively in the future.

lastly

I have launched a system development service site called "SEKARAKU Lab," which I work for.
Beyond can handle everything from server design and construction to operation, so if you have any problems with server-side development, please feel free to contact us.
SEKARAKU Lab: https://sekarakulab.beyondjapan.com/