JavaScript Spread & Rest in ES6
컴퓨터공학은 변하는게 없지만 현업의 기술은 최신화가 빠른편이다. Android의 경우에도 매년 새로운 버전이 출시되고, 몇개월이 지나면 대세이던 언어나 DB가 레거시한것이 되어버린다. 우리는 늘 그런 상황에대해 대비를 해야된다. 실지로 ECMA Script6도 2015년에나온 ECMAScript2019보다는 예전 것이지만, Java 8버전이 최신일때도 현업에서는 6버전 이상을 볼 수 없었다는 것과 같이. 현업에서는 결국 과거에 만들어진 안정적인 코드를 최신으로 리팩토링 안되는데 다 이유가 있을 것이다. 그럼에도 불구하고 우리는 두개 다 알아야 하나, 먼저 ES6의 문법을 먼저 봐야한다.
1. ECMAScript6(2015)
let, const와 같은 키워드나 template literals, spread/rest문법, 구조 분해 할당(destructing)은 ES6에서 적용됬다.
2. Spread/rest Syntax
2.1. spread 문법
배열을 풀어서 인자로 전달하거나, 배열을 풀어서 각각의 요소로 넣을 때 사용한다.
function sum(x, y) {
return x + y;
}
const num = [1, 2];
sum(...num); // 3
// sum = 1 + 2;의 동작을 한다.
const numJustOne = [1];
sum(...numJustOne); // NaN, y가 undefined
2.2. Rest 문법
파라메타를 배열의 형태로 받아서 사용할 수 있다. 파마리터 개수가 가변적일 때 유용한다.
function sum(...args) {
return args.addition((before, now) => {
return before + now;
});
}
sum(1, 2, 3, 4); // 10
sum(5, 6, 7); // 18
3. 배열 사용
spread문법은 배열에서 강력합니다.
3.1. 합치기
let someNumbers = [3, 4];
let numbers = [1, 2, ...someNumbers, 5]; // [1, 2, 3, 4, 5]
let nums1 = [1, 2, 3];
let nums2 = [4, 5, 6];
nums1 = [...nums1, ...nums2]; // [1, 2, 3, 4, 5, 6]
//spread기법은 immutable
3.2. 복사
let arr = ["cat", "dog", "rabbit"];
let arr1 = [...arr]; // arr.slice() 와 유사
arr.push("racoon"); // ['cat', 'dog', 'rabbit', 'racoon']
//spread기법은 immutable
4. 객체 사용
let obj1 = { name: "yg", age: 27 };
let obj2 = { name: "ty", age: 37 };
let cloneObj = { ...obj1 }; // {name: 'yg', age: 27}
let mergeObj = { ...obj1, obj2 }; // {name: 'yg', age: 27, obj2: {…}}
5. 함수에서 나머지 파라메타 받기
function rideBike(goal, when, ...who) {
console.log("goal: ", goal);
console.log("when: ", when);
console.log("who: ", ...who);
}
rideBike(
"양수역",
"20:30",
"ty",
"hooni",
"dyougo",
"poe",
"bulls",
"hyune",
"bean",
"demo"
);
/*
goal: 양수역
when: 20:30
who: ty hooni dyougo poe bulls hyune bean demo,
...who로 출력할 시 일반 배열 역시 _(space)를 공백으로 두고
관련 배열의 내용들이 열거되었음.
spread연산자를 빼고 출력할 경우 배열의 형태로 출력함.
*/