Spread Operator ...spread
: 펼치다, 퍼뜨리다
객체, 배열을 펼칠 수 있습니다.
- 객체에서 사용 가능합니다. (
Object.assign()
대체)
const slime = {
name: '슬라임'
};
const cuteSlime = {
...slime,
attribute: 'cute'
};
const purpleCuteSlime = {
...cuteSlime,
color: 'purple'
};
console.log(slime); //{name: '슬라임'}
console.log(cuteSlime); //{name:'슬라임',attribute:'cute'}
console.log(purpleCuteSlime); //{name:'슬라임',attribute:'cute',color:'purple'}
const obj = { a: 1, b: 2, c: 3 }
const obj1 = {
...obj,
c: 100, // 기존의 property를 한 번더 정의해줌으로써 property를 수정할 수 있다.
d: 200, // 새로운 property를 추가할 수 있다.
}
- 배열에서 사용 가능합니다.
const animals = ['개', '고양이', '참새']; const anotherAnimals = [...animals, '비둘기']; //['개', '고양이', '참새','비둘기']
- 배열에서 spread 연산자를 여러번 사용할 수 있습니다.
const spreadNumbers1 = [...numbers, 1000, ...numbers];//[1,2,3,4,5,1000,1,2,3,4,5] const spreadNumbers2 = [1000,...numbers,1000] //[1000,1,2,3,4,5,1000]
함수 인자와 spread
function sum(...rest) {
return rest.reduce((acc, current) => acc + current, 0);
}
const numbers = \[1, 2, 3, 4, 5, 6\];
const result = sum(...numbers);
console.log(result); //21
Rest Parameter ...rest
객체, 배열, 그리고 함수의 파라미터에서 사용 가능합니다.
- 객체와 사용할 때는 비구조화 할당 문법과 함께 사용됩니다.
const purpleCuteSlime = {
name: '슬라임',
attribute: 'cute',
color: 'purple'
};
const { color, ...rest } = purpleCuteSlime;
console.log(color); // purple
console.log(rest); //{name:'슬라임',attribute:'cute'}
- 배열과 사용할 때는 비구조화 할당 문법과 함께 사용됩니다.
const numbers = [0, 1, 2, 3, 4, 5, 6];
const [one, ...rest] = numbers;
const [...rest, last] = numbers; //SyntaxError
console.log(one); //0
console.log(rest); //[1,2,3,4,5,6]
함수 파라미터에서의 rest
function sum(...rest) {
return rest.reduce((acc, current) => acc + current, 0);
}
const result = sum(1, 2, 3, 4, 5, 6);
console.log(result); // 21
rest
가 꼭 함수의 인자에서만 쓰이는 건 아니다.
rest
가 이미 선언되어 있던 변수가 아니다.rest
는 대입 연산자의 좌항에 존재한다.- IDE에서 마우스 포인터를 변수명 위에 놓아서 배열이라는 것을 확인한다.
const arr = ["a", "b", "c", "d"]
const [firstElement, ...rest] = arr
console.log(firstElement) // "a"
console.log(rest) // ["b", "c", "d"]
const obj = { a: 1, b: 2, c: 3 }
const { c, ...obj2 } = obj
// a와 b property만 가진 새로운 객체 obj2를 생성한다. 만들어진 c변수는 버린다.
정리
- spread operator는 펼치고, rest parameter는 모은다.
- spread operator는 주는 쪽이고, rest parameter는 받는 쪽이다.
- spread operator는 기존의 변수를 사용하고, rest parameter는 새로운 변수를 만든다.
참조
'FrontEnd > JavaScript' 카테고리의 다른 글
[ JavaScript ] 2진수, 8진수, 10진수, 16진수 변환 방법 (feat. toString) (0) | 2023.10.25 |
---|---|
[ JavaScript ] onload() vs addEventListener(load,f) (1) | 2023.10.25 |
[ JavaScript ] var vs let vs const (feat. 호이스팅, TDZ) (0) | 2023.10.25 |
[ JavaScript ] super() (feat. 클래스) (0) | 2023.10.25 |
[ JavaScript ] 단축 평가 short-circuit evaluation 논리 계산법 (0) | 2023.10.25 |