스프레드 VS 나머지 연산자

... (도트, 도트, 도트) 연산자는 😄라고 부르는 것을 좋아합니다. ES6 가 도입된 이후로 많은 도움이 되었습니다.
의 자바스크립트 개발자는 배열 및 기타 이터러블을 쉽게 조작합니다.

... 연산자는 사용 위치나 방법에 따라 스프레드 또는 휴식이라고 부를 수 있습니다. 스프레드 연산자로 알려진 시나리오를 살펴보겠습니다.

NB: 게시물의 목적을 위해 우리는 배열을 사용할 것이지만 ... 연산자는 다른 이터러블에서도 작동합니다.

확산 연산자(...)

어레이를 병으로 간주하겠습니다. 스프레드 연산자를 사용하면 병 자체를 잡고 원하는 위치에 내용물을 넣지 않고도 병의 모든 내용물을 가져올 수 있습니다. 다음 코드를 살펴보겠습니다.

const animals = [🦁, 🐘, 🐍, 🦍, 🐯];
const someOtherAnimals = [...animals];
// someOtherAnimals now contains 🦁, 🐘, 🐍, 🦍, 🐯 and
// animals remains unchanged

여기에서 펼치기 연산자는 동물 배열의 내용을 someOtherAnimals 배열로 복사하는 데 사용됩니다. 스프레드 연산자를 사용하여 여러 배열의 내용을 다른 배열로 복사할 수도 있습니다.

const wild = [🦁, 🐘, 🐍, 🦍, 🐯];
const domestic = [🐐, 🐔, 🐱, 🐶];
const animals = [...wild, ...domestic];
// animals now contains 🦁, 🐘, 🐍, 🦍, 🐯, 🐐, 🐔, 🐱, 🐶 and
// both wild and domestic remains unchanged.

휴식 연산자(...)

나머지 연산자를 사용하면 무한한 수의 인수를 배열로 나타낼 수 있습니다. 따라서 배열의 요소를 펼치는 스프레드 연산자와 달리 나머지 연산자(또는 일부 사람들이 부르는 수집 연산자)는 여러 요소를 배열로 그룹화합니다. 작동 방식은 다음과 같습니다.

const addAll = (...numbers) => {
    return numbers.reduce((acc, num) => acc + num);
};
const sum = addAll(1, 2, 3, 4); // sum is 10
const sum1 = addAll(1, 2, 3, 4, 5, 6, 7, 8, 9, 10); // sum1 is 55

addAll 함수에서 개수에 관계없이 모든 인수를 numbers 매개변수로 수집한 다음 합계를 반환합니다. 그렇게 하면 일반 배열을 수정하는 것처럼 숫자 매개변수를 수정할 수 있습니다. 나머지 연산자를 사용하는 방법에 대한 또 다른 예는 다음과 같습니다.

const multiplyByNum = (multiplier, ...numbers) => {
    return numbers.map(num => num * multiplier);
};

const multiplyBy2 = multiplyByNum(2, 1, 2, 3, 4);
// multiplyBy2 is [2, 4, 6, 8]

이 경우 승수 ​​매개변수로 첫 번째 인수를 수집하고 배열로 숫자 매개변수에 다른 모든 요소를 ​​수집한 다음 각 숫자에 승수를 곱합니다.

요약하면 스프레드 연산자는 배열의 내용을 펼치고 나머지 연산자는 요소(함수에 대한 인수)를 배열로 수집합니다.