"..."...? I will explain the spread syntax added in ES2015.

thank you for your hard work!
My name is Yamada from the System Development Department.

This time, we will explain the spread syntax that can be used when expanding arrays etc. added in ES2015.

What is spread syntax?

Spread syntax is when you write "..." in front of an array or object.
It can be used when you want to expand arrays, objects, etc.
This feature is a new feature added in ES2015 for arrays and 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.
From now on, I would like to check the movement using actual code.

Use with arrays

Create an array with new elements added

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

Create a concatenated array

const fruits1 = ["apples", "bananas", "peaches"]; const fruits2 = ["grapes", "tangerines"]; const newFruits2 = [...fruits1, ...fruits2]; console.log( newFruits2); // Result: ['apple', 'banana', 'peach', 'grape', 'mandarin orange']

Copying using spread syntax

const fruits1 = ["apple", "banana", "peaches"]; const spreadArray = [...fruits1]; console.log(spreadArray === fruits1); // Result: false fruits1.push('Watermel ') console.log(fruits1); // Result: ['apple', 'banana', 'peach', 'watermelon'] console.log(spreadArray); // result: ['apple', 'banana' , 'Momo']

If you compare the variable fruits1 and the variable spreadArray using the strict equality operator (===), it will be false.
This is because only the value is copied to the variable spreadArray.
As a test, if you add "watermelon" to the variable fruits1, it will be reflected in fruits1, but you can also confirm that it is not reflected in the variable spreadArray, where only the value is copied.

Use in objects

Create an object with new elements 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 game" }; const data = { ...user, ...userHobby }; console.log( data); // Result: {id: 1, name: 'Taro', age: 20, hobby: 'Board game'}

Copying using spread syntax

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

As with arrays, only the value is copied to the variable spreadObj, so comparing with the strict equality operator (===) will return false.

Use in methods

It is possible to expand the array and use it when inserting into 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

Variable length arguments can be used using spread syntax

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

Variable values ​​can be obtained as an array

summary

This time, we explained the spread syntax that allows you to expand arrays and objects using javascript, which was added in ES2015.
I would like to continue to actively use it in the future because it is easy to write when copying the value of an array or object.

lastly

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