Rest 연산자와 Spread 연산자에 대해

이번에는 Javascript의  ES6버전에서 추가되어 최근에 JS에서 자주 사용되는 Rest 연산자와 Spread 연산자에 대해 한번 정리해보고자 한다,

 

 

Rest 연산자(' . . . ')란?

● Rest 연산자는 2015년에 업데이트된 Javascript 버전인 ES6에서 새로 추가된 연산자로 이름처럼 남은 매개변수들을 하나의 배열로 묶어주는 연산자이고, 변수 앞에 '. . .' 를 붙여 선언한다.

 

 

 

Rest 연산자는 무엇이고 어떤 특징을 가졌는지에 대해선 아래 예제를 통해 자세히 알아보도록 하자.

 

 

 

function rest_operator(num1, num2) {
    console.log(num1, num2);
}

rest_operator(1, 2, 3, 4, 5);

 

 

 

 

 

위의 예제는 함수가 전달인자를 어떻게 처리하는지에 대해 알아보기 위한 예제이다. rest_operator라는 함수의 전달인자는 num1과 num2 2개만 지정하였기에 1,2,3,4,5 값을 5개 전달하여도 전달인자는 2번쨰까지만 받고 있는 모습이다. 그렇다면 Rest Operator를 활용하여 2번쨰 전달인자인 'num2'를 '...num2'로 바꾸면 어떤 결곽값이 출력될까?

 

아래 에제를 확인해보자.

 

 

 

 

function rest_operator(num1, ...num2) {
    console.log(num1, num2);
}

rest_operator(1, 2, 3, 4, '안녕');

 

 

 

 

 

 

위의 결과값처럼 num2를 Rest Operator를 활용하게되면 num1로 전달된 1을 제외하고 남은 전달인자들이 하나의 배열로 모두 num2로 전달되는 것을 확인해 볼 수 있다.

 

이처럼 Rest Operator는 불특정 다수의 인자를 하나의 배열로 묶어주는 역활을 한다.

 

또한 Rest Operator를 사용한 인자는 전달 매개변수의 가장 마지막에 위치해야한다, 그렇지 않으면 아래 사진처럼 문법오류처리되어 에러를 발생시키게 된다.

 

 

 

 

 

 

 

위와 같은 특징으로 인하여 Rest Operator는 함수의 매개변수를 배열로 다루고 싶을 떄 쓰이기에, 객체나 배열의 일부 값을 추출한 후, 나머지 값을 새로운 배열이나 객체에 할당하고자 할때나 유용하게 쓰이며, 예상되지 않은 수의 인자를 받아야할 때 주로 쓰인다. 

 

위에서 Rest Operator에 대해 자세히 알아 보았다면 다음으로 Spread Operator에 대해 자세히 알아보도록 하겠다.

 

 

 

Spread 연산자란?

●  Spread 연산자는 2015년에 업데이트된 Javascript 버전인 ES6에서 새로 추가된 연산자로 이름 그대로 배열이나 객체의 요소를 펼쳐서 개별 요소로 만드는데 사용되는 연산자이고, Rest와 동일하게 변수 앞에 '. . .' 를 붙여 선언한다.

 

객체를 펼친다는 말이 이해하기 어려울 수 있기에 아래 에시를 통해 어떤식으로 활용되는지 확인해보도록 하자.

 

 

 

 

활용 예시 1) 함수 호출에서 매개변수로 배열을 전달하는 경우 

 

function sum (a, b, c, d, e) {
    return a+b+c+d+e;
}
 
let arr = [20, 30];

console.log(
    sum (10, ...arr, 40, 50)
);

 

 

 

 

 

 

활용 예시 2) 배열 리터럴에서 여러 배열을 합치거나 복사하는 경우

 

let face = [ 'eyes', 'nose', 'mouth'];
let head = [ 'hair', ...face, 'ears'];

console.log(head);

 

 

 

 

 

 

 

활용 예시 3) 객체를 생성할때(객체 리터럴) 객체를 복사하거나 속성을 병합하는 경우

 

 

let drinks = {
    coffe: 'latte',
    coca: 'cola'
}

let newDrinks = {
    lemon: 'tea',
    orange: 'juice',
    drinks
}

console.log(newDrinks);

 

 

 

 

 

위의 예시는 객체 리퍼럴시 객체를 복사하는 과정에서 Spread Operator를 사용하지 않았을 때 출력되는 결과값인데, drinks의 속성이 나타나지 않는 모습이다. 여기서 drinks객체에 Sqread Operator를 적용시켜주면 아래와 같이 원하는 결과값이 출력되는 것을 알 수 있다,

 

 

 

 

let drinks = {
    coffe: 'latte',
    coca: 'cola'
}

let newDrinks = {
    lemon: 'tea',
    orange: 'juice',
    ...drinks
}

console.log(newDrinks);

 

 

 

 

 

마지막 예시인 객체 리터럴에서 객체를 복사하는 경우에 Spread Operator를 사용하지 않는다면 아래와 같이 기존 배열도 같이 수정되는 것에 주의해야한다. 해당 문제는 프로젝트의 크기가 커질 수록 다른 배열의 값을 수정하게 되는 것이 많은 에러를 불러올 수 있기 때문에 배열이나 객체를 복사하게 되는 경우 항상 Spread Operator를 활용하는 것이 권장된다.

 

let arr = [ 1, 2, 3];
let arrCopy = [...arr];
arrCopy.push(4);

console.log(arr);
console.log(arrCopy);

 

\

 

 

 

위의 결과값은 제대로 Spread Operator를 사용하여 배열 리퍼럴에서 배열 복사를 활용한 것이다. 새로 선언한 배열에 새로운 값을 추가하여도 새로 선언한 배열만 수정되는 것을 알 수 있다.

 

 

 

 

let arr = [ 1, 2, 3];
let arrCopy = arr;
arrCopy.push(4);

console.log(arr);
console.log(arrCopy);

 

 

 

 

위의 결과값은 Spread Operator를 사용하지 않고 배열 리퍼럴에서 배열 복사를 활용한 것이다. 새로 선언한 배열에 새로운 값을 추가하면 기존 배열도 같이 수정되는 것을 확인할 수 있다.

 

 

 

Rest 연산자 vs Spread 연산자

 

Rest 연산자와 Spread 연산자 모두 변수앞에 ...을 붙이기에 같은 연산자가 아닌지 헷갈려할 수 있기에 둘의 차이점에 대해 정리해보고자 한다.

 

Spread 연산자는 배열이나 객체를 개별요소로 '펼치는'데 사용되고, Rest 연산자는 함수의 매개변수를 하나의 배열로 '묶는'데 사용된다. 

 

또한, Spread 연산자는 주로 함수 호출이나 배열과 객체를 선언할 때 사용되지만, Rest 연산자는 함수의 매개변수(전달인자)를 정의하는데 주로 사용되며, Spread 연산자는 함수 호출에 배열이나 객체를 확장하여 사용하기 위해 사용되지만 Rest 연산자는 전달인자들을 그훕화하기 위해 주로 사용된다.