[Osaka/Yokohama/Tokushima] Looking for infrastructure/server side engineers!

[Osaka/Yokohama/Tokushima] Looking for infrastructure/server side engineers!

[Deployed by over 500 companies] AWS construction, operation, maintenance, and monitoring services

[Deployed by over 500 companies] AWS construction, operation, maintenance, and monitoring services

[Successor to CentOS] AlmaLinux OS server construction/migration service

[Successor to CentOS] AlmaLinux OS server construction/migration service

[For WordPress only] Cloud server “Web Speed”

[For WordPress only] Cloud server “Web Speed”

[Cheap] Website security automatic diagnosis “Quick Scanner”

[Cheap] Website security automatic diagnosis “Quick Scanner”

[Reservation system development] EDISONE customization development service

[Reservation system development] EDISONE customization development service

[Registration of 100 URLs is 0 yen] Website monitoring service “Appmill”

[Registration of 100 URLs is 0 yen] Website monitoring service “Appmill”

[Compatible with over 200 countries] Global eSIM “Beyond SIM”

[Compatible with over 200 countries] Global eSIM “Beyond SIM”

[If you are traveling, business trip, or stationed in China] Chinese SIM service “Choco SIM”

[If you are traveling, business trip, or stationed in China] Chinese SIM service “Choco SIM”

[Global exclusive service] Beyond's MSP in North America and China

[Global exclusive service] Beyond's MSP in North America and China

[YouTube] Beyond official channel “Biyomaru Channel”

[YouTube] Beyond official channel “Biyomaru Channel”

"..."...? 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/

If you found this article helpful , please give it a like!
8
Loading...
8 votes, average: 1.00 / 18
2,769
X facebook Hatena Bookmark pocket
[2025.6.30 Amazon Linux 2 support ended] Amazon Linux server migration solution

[2025.6.30 Amazon Linux 2 support ended] Amazon Linux server migration solution

[Osaka/Yokohama] Actively recruiting infrastructure engineers and server side engineers!

[Osaka/Yokohama] Actively recruiting infrastructure engineers and server side engineers!

The person who wrote this article

About the author

Yuki Yamada

Joined Beyond Co., Ltd. in 2021
My hobbies are karaoke and board
games.My board games can no longer fit on one shelf, so I would like to buy a new shelf, but I am sad because I don't have a place to put a shelf at home.
He has experience in mold design and sales, and has gained a wide variety of experience and has settled into a job as a server-side engineer.
He is currently working on server-side development using PHP and Python.
He also wants to learn a front-end language in the future, and is interested in Next.js, a React-based front-end framework.