1. Spread 및 Rest를 객체에서 사용하기
- spread는 배열을 그대로 복사하거나, 합치고 객체에서도 사용이 가능하다.
let obj1 = { foo: 'bar', x: 42 };
let obj2 = { foo: 'baz', y: 13 };
let clonedObj = { ...obj1 }; // obj1의 키와 값이 그대로 복사가 된다.
let mergedObj = { ...obj1, ...obj2 }; // obj1과 obj2의 같은 이름의 키인 'foo'가 있으므로 이후에 온 obj2의 foo로 다시 할당된다.
console.log(clonedObj) // {foo: "bar", x: 42}
console.log(mergedObj) // {foo: "baz", x: 42, y: 13} 이때,겹치지 않는 키는 그대로 추가된다.
- 함수에서도 사용이 가능하다. 주로, 파라미터들을 가져오는 데 사용한다. slice와 같이 원하는 부분을 잘라서 가져올 수 있다.
function myFun(a, b, ...manyMoreArgs) {
console.log("a", a); // 'a', one
console.log("b", b); // 'b, two
console.log("manyMoreArgs", manyMoreArgs); // 'manyMoreArgs', ["three", "four", "five", "six"]
}
myFun("one", "two", "three", "four", "five", "six");
- Spread 나 Rest는 변동이 있을 수 있는 파라미터를 가진 함수나, 배열에 주로 사용하기 편하다. 아무리 추가, 삭제가 일어나도 그대로 배열을 가지고 올 수 있기 때문이다. 그 이후 sort와 같은 메서드를 이용하기도 매우 유용하다. 변화가 있더라도 변화된 그대로 다음 메서드를 실행시켜 줄 수 있다.
2. 구조 분해 할당
- 구조 분해 할당은 Spread를 사용한 후, 값을 해체한 뒤에 다시 변수로 할당해 준다.
function f(...[a, b, c]) {
return a + b + c;
}
f(1) // NaN (b 와 c 는 undefined)
f(1, 2, 3) // 6
f(1, 2, 3, 4) // 6 (4번 째 파라미터는 해체되지 않음)
const {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40}
console.log(a) // 10
console.log(b) // 20
console.log(rest) // {c: 30, d: 40} // 위의 a, b는 값을 리턴하지만, spread로 다시 할당하면 모든 키와 값을 다 가져온다.
- 객체에서의 구조 분해 할당은 꼭 선언과 함께 해야 한다. 아닐 경우 다른 문법으로 잘 못 읽을 수 있다.
- 함수에서의 객체 분해를 이용할 수 있다.
function whois({displayName: displayName, fullName: {firstName: name}}){
console.log(displayName + " is " + name);
}
let user = {
id: 42,
displayName: "jdoe", // 위의 whois 함수에서 displayName의 값이 그대로이기 때문에 jdoe을 리턴.
fullName: {
firstName: "John", // fullName의 값이 구조 분해 할당으로 firstName을 name을 선언하여 할당하고 있다.
lastName: "Doe"
}
};
whois(user) // 결국, displayName은 그대로 "jdoe", name은 firstName이 할당 되어 있으니, "John"
// jdoe is John