JS의 Rest 및 Spread 연산자

안녕하세요 여러분! 모두 잘 지내고 계시길 바랍니다.
개발자가 "확산"연산자에 대해 이야기하는 것을 들었거나 JS 코드에서 "..."[Triple Dots]를 보고 이것이 무엇인지 궁금해한 적이 있습니다.
글쎄, 우리는 오늘 그것을 다룰 것입니다.

나머지 연산자와 스프레드 연산자의 구문은 정확히 동일해 보이지만 기능 면에서 서로 정반대입니다.

두 가지를 하나씩 살펴보겠습니다.

나머지 연산자

나머지 연산자는 함수에서 무한한 수의 인수를 가져와 배열로 압축하는 데 사용됩니다.
예시:

function foo(...bar){
    return bar;
}

console.log(foo(1,2,3,4));  // [ 1, 2, 3, 4 ]
console.log(foo(1,2));  // [ 1, 2 ]

함수에 전달하는 매개변수의 수에 관계없이 나머지 연산자는 모든 인수를 수집하여 많은 경우에 유용할 수 있는 배열로 "압축"합니다.

다음과 같이 사용할 수도 있습니다.

function foo(a,b,...bar){
    console.log(a);  // 1
    console.log(b);  // 2
    console.log(bar);  // [ 3, 4 ]
}

foo(1,2,3,4);

우리가 수행한 작업은 "a", "b"를 전달하고 그 다음에 전달하는 모든 내용을 배열로 압축할 것이라고 함수에 전달합니다.
이제 "만약 내가 ..."이라면 어떤 일이 일어날지 생각해 볼 수 있습니다. 걱정하지 마세요.
나머지 오퍼레이터에 값을 전달하지 않으면 어떻게 됩니까?

function foo(a,b,...bar){
    console.log(a);  // 1
    console.log(b);  // 2
    console.log(bar);  // []
}

foo(1,2);

여기서 나머지 매개변수는 값을 가져오지 않아 빈 배열이 됩니다.

그러나 나머지 매개변수를 첫 번째 또는 두 번째 위치로 이동하면 어떻게 됩니까?

function zen(a,...bar,b){  // SyntaxError: Rest parameter must be last formal parameter
    console.log(a);
    console.log(b);
    console.log(bar);
}

zen(1,2,3,4);

실행되지 않습니다. 그 이유는 오류에 명확하게 언급되어 있습니다.
나머지 매개변수는 마지막 함수 인수여야 합니다.

이제 우리는 나머지 연산자가 무엇인지 알았습니다. 사용 사례를 살펴보겠습니다.

두 개의 값을 받아서 그 합을 반환하는 함수를 만든다고 가정해 봅시다. 쉬운? 그렇지 않습니다. 에스컬레이션하겠습니다. 이제 동일한 함수를 만들어야 하지만 가능한 매개변수 수는 얼마든지 있을 수 있으며 함수는 모든 인수의 합계를 반환해야 합니다.

한 가지 접근 방식은 다른 수의 매개 변수에 대해 다른 함수를 만드는 것입니다. 이제 나머지 연산자를 알았으니 걱정할 필요가 없습니다.

function addValues(...values){
    let sum = 0;
    for(let i = 0; i< values.length;i++){
        sum += values[i]
    }
    return sum;
}

console.log(addValues(1,2,3,4,5))  // 15

참고: foreach 또는 reduce 메서드를 사용하여 동일한 작업을 수행할 수 있었지만 이 게시물을 모든 사람들을 위해 일반적으로 유지하기 위해 for 루프를 사용했습니다. 다른 주제는 다른 날에 다루겠습니다.

스프레드 연산자

이전에 나는 나머지와 확산이 모두 동일한 구문을 가지고 있지만 여전히 서로 반대라고 말했습니다.
나머지 연산자가 여러 값을 가져와 압축하는 경우 스프레드 연산자는 개체 값을 확장합니다.

const arr = [1,2,3,4];
console.log(arr);  // [ 1, 2, 3, 4 ]
console.log(...arr);  // 1 2 3 4

보시다시피 전개 연산자는 배열의 값을 전개하고 객체에서도 작동합니다.

Spread Operator는 다음과 같은 다양한 작업에서 사용할 수 있습니다.

어레이 복사

React에서 상태에 추가

배열 연결 또는 결합

수학 함수 사용

NodeList를 배열로 변환

배열을 인수로 사용

목록에 항목 추가

객체 합치기

스프레드는 개체에도 적용됩니다.

const obj = {
    "hello" : "world",
    "foo" : "bar"
}

console.log(obj)  // { hello: 'world', foo: 'bar' }
console.log(...obj)  // TypeError: Found non-callable @@iterator
console.log({...obj})  // { hello: 'world', foo: 'bar' }

개체의 복제본을 만들고 키를 사용하여 값을 업데이트할 수 있습니다.

// Creating array
const arr = [1,2,3];
console.log([...arr, 4,5]);  // [ 1, 2, 3, 4, 5 ]

// Creating Object
const obj = {
    "hello" : "world",
    "foo" : "bar"
};

console.log({...obj, "foo" : "zen"});  // { hello: 'world', foo: 'zen' }

마지막 생각들

나머지 매개변수와 스프레드 연산자는 출시 이후 모든 웹 프로젝트의 필수적인 부분이 되었습니다. 두 가지 모두 명확하게 설명했으면 합니다.
읽어 주셔서 감사합니다.

자, 그럼 우망 미탈이 서명하겠습니다.