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