미래 지향적인 웹 앱 구축: The Codest의 전문가 팀이 제공하는 인사이트
The Codest가 최첨단 기술로 확장 가능한 대화형 웹 애플리케이션을 제작하고 모든 플랫폼에서 원활한 사용자 경험을 제공하는 데 탁월한 성능을 발휘하는 방법을 알아보세요. Adobe의 전문성이 어떻게 디지털 혁신과 비즈니스를 촉진하는지 알아보세요...
ECMAScript 2015 brought us a lot of news, which resulted in a large number of improvements. Today we will take a closer look at two features that make life easier. Meet the rest paremeters and the spread syntax.
The rest syntax allows us to represent an indefinite number of arguments as an array. Take a look at a function that adds up all the arguments passed.
const sum = (...args) => args.reduce((prev, current) => prev + current);
console.log(sum(1, 2)); // 3
console.log(sum(1, 2, 3)); // 6
The spread operator allows us to expand iterable objects into individual elements. This functionality is opposite to what we achieved with the rest parameters. It can be applied to all iterables, such as arrays, objects, sets, maps, etc.
const sum = (x, y, z) => x + y + z;
const numbers = [1, 2, 3];
console.log(sum(...numbers)); // 6
The spread syntax effectively goes one level deeper while copying an array. One level means that the first level of references is copied.
const array0 = [1, [2, 3]];
const array1 = [...array0];
console.log(array1); // [1, [2, 3]]
Create the Set which stores only unique elements and convert its back to an array.
const array = [1, 1, 2, 3];
const uniqueElements = [...new Set(array)];
console.log(uniqueElements); // [1, 2, 3]
const array0 = [1, 2];
const array1 = [3, 4];
const concated = [...array0, ...array1];
console.log(concated); // [1, 2, 3, 4]
const [firstElement, ...newArray] = [1, 2, 3, 4];
console.log(firstElement); // 1
console.log(newArray); // [2, 3, 4]
We can also remove n
first elements with comma.
const [, , , ...newArray] = [1, 2, 3, 4];
console.log(newArray); // [4]
const array0 = [4, 5, 6];
const array1 = [1, 2, 3];
const newArray = [...array1, ...array0];
console.log(newArray); // [ 1, 2, 3, 4, 5, 6 ]
n
const array = [...Array(10)].map((_, i) => i);
console.log(array); // [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 ]
const { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
console.log(x); // 1
console.log(y); // 2
console.log(z); // { a: 3, b: 4 }
let person = {
name: 'John',
age: 25,
wallet: {
sum: 500,
currency: 'USD'
}
};
let personCopy = { ...person };
console.log(personCopy);
// {
// name: 'John',
// age: 25,
// wallet: {
// sum: 500,
// currency: 'USD'
// }
// }
Note that the copy of the object that is created is a new object with all the original object’s properties but none of its prototypal information.
person.age = 20;
console.log(person.age); // 20
console.log(personCopy.age); // 25
Notice that spread syntax creates ‘shallow’ copy of the object, so ‘wallet’ property will be copied only as a reference to the original sub-object. For deep-cloning you can use JSON stringify/parse approach or ‘cloneDeep’ method provided by Lodash depending on your object’s complexity. In some cases this method can be helpful as well:
let personCopy = { ...person, wallet = {...person.wallet}};
We can conditionally add properties to a new object that we are creating by making use of the spread operator along with short circuit evaluation.
const colors = {
red: '#ff0000',
green: '#00ff00',
blue: '#0000ff'
};
const black = {
black: '#000000'
};
let extraBlack = false;
let conditionalMerge = {
...colors,
...(extraBlack ? black : {})
};
console.log(conditionalMerge);
// {
// red: '#ff0000',
// green: '#00ff00',
// blue: '#0000ff'
// }
extraBlack = true;
conditionalMerge = {
...colors,
...(extraBlack ? black : {})
};
console.log(conditionalMerge);
// {
// red: '#ff0000',
// green: '#00ff00',
// blue: '#0000ff'
// black: '#000000'
// }
This is similar to calling the split method with an empty string as the parameter.
const split = [...'qwerty'];
console.log(split); // [ 'q', 'w', 'e', 'r', 't', 'y' ]
자세히 읽어보세요: