…
전개 구문이라고도 하는 Spread 또는 Rest 연산자는 …
점 3개로 이루어진 연산자인데, 어디에서 사용하는지에 따라 스프레드
또는 레스트
라고 부른다.
배열의 원소나 객체의 속성을 나열하는 데 사용.
함수 호출에서 파라미터 배열로도 사용할 수 있는데, Rest
라 불림.
const newNumbers = [ ...currArray, 1, 2 ]
const newObject = { ...currObject, newProp:5 }
function Func(x,y,z,v,w) {}
Func(...newArray, 4, 5);
스프레드 연산자는 배열을 복사할 수도 있으며, concat, unshift
메소드를 대체할 수 있다.
const numbers = [1, 2, 3, 4, 5];
const newNumbers = [...currArray, 6, 7];
newNumbers.push(8);
newNumbers
는 [ 1, 2, 3, 4, 5, 6, 7, 8 ]
이며, numbers
에는 아무런 영향이 없고, 스프레드 연산자는 배열의 어느 위치에서든 사용될 수 있으며, 여러번 사용이 가능하다.
let numbers1 = [ 0, 1, 2 ];
let numbers2 = [ 3, 4, 5 ];
numbers1 = [...numbers1, ...numbers2]; // array1.concat(array2)
numbers1
배열은 [ 0, 1, 2, 3, 4, 5 ]
가 된다.
let numbers1 = [ 0, 1, 2 ];
let numbers2 = [ 3, 4, 5 ];
numbers1 = [...numbers2, ...numbers1]; // array1.unshift(array2)
numbers1
배열은 [ 3, 4, 5, 0, 1, 2 ]
가 되며, 실제 unshift
메소드와는 달리 numbers1
에 새로운 배열을 할당하는 것으로 기존 배열을 변형하지 않는다.
객체에서 전개 구문 사용 시, Object.assign()
메소드와 같이 스프레드 연산자가 사용된 객체의 자체 속성을 다른 객체에 붙여넣을 수 있습니다.
따라서 얕은 수준의 객체 복제 또는 객체의 병합은 전개 구문을 사용하여 더 짧은 문법으로 나타낼 수 있습니다.
그러나 Object.assign()
메소드를 완벽히 대체할 수는 없습니다.
const currObject = {
prop1: true,
prop2: false,
prop3: null,
prop4: undefined,
prop5: "string",
};
const newObject = {
...currObject,
newProp1: 0101010,
newProp2: "새로운 속성",
};
속성값을 추가한 출력 결과
또한 스프레드 연산자가 사용된 객체의 key
에 할당된 값을 변경할 수도 있습니다.
이것은 새로운 객체가 가지고 있는 자체 속성이 우선권을 가지기 때문입니다.
const currObject = {
prop1: true,
prop2: false,
prop3: null,
prop4: undefined,
prop5: "string",
};
const newObject = {
...currObject,
prop4: "덮어쓰기",
prop5: "여기도 덮어쓰기",
};
속성값 덮어쓰기를 한 출력 결과
함수의 인수 목록을 배열로 합치는 데 사용되며, 이는 함수의 apply()
메소드와 유사한데, 레스트 연산자를 사용하여 apply()
메소드를 대체할 수 있습니다.
const filter = (...args) => {
return args.filter(elem => elem === 1);
}
console.log(filter(1,2,3)); // [ 1 ]로 출력된다.
💡
Function.prototype.apply()
apply()
메소드는 주어진this
값과 배열로 제공되는 값을 파라미터로 호출합니다.// 구문 func.apply(thisArg, [argsArray])