Spread Operator ( ... )

이번 글에서는 Spread Operator에 대해서 알아보겠습니다.

 

아마 spread operator라는 단어를 모를 수도 있습니다.

하지만 js 코드를 보다보면  "...list " 라는 형식으로 쓰여진 변수들을 간혹 찾아볼 수 있습니다.

이렇게 ... 이 붙어있는 것을 spread operator 라는 문법으로 불린다고 합니다.

쉽게 설명하면 '괄호제거 연산자'라고 볼 수 있습니다.

 

예시를 한번 보시죠

let arr = ['a', 'b', 'c'];
console.log(arr);
console.log(...arr);

js 코드를 위와 같이 작성한 후 실행을 한다면

라는 결과를 얻을 수 있습니다.

• console.log(arr);    : 배열 형태로 출력합니다.
• console.log(...arr); : []가 제거되고 값만 출력됩니다.
• 이렇게 값만 출력되는아주 단순한 문법입니다.

 

다른 예시도 있습니다.

let str1 = 'hello';
console.log(...str1);
console.log(str1[0]);
console.log(str1[1]);

코드 작성 후 실행해 본다면

라는 결과를 볼 수 있습니다.

문자 형식의 변수에 적용한다면 알파벳을 하나씩 나열한다는 것을 볼 수 있습니다.

문자인 경우에는 조금 예외적으로 알아두면 될 것 같습니다.

 

 

그럼 spread operator의 장점은 뭐가 있을지 알아보겠습니다.

1. array의 합치기 & 복사

2개의 array를 1개의 array로 만들어야 할 때 

let a = [1, 2, 3];
let b = [4, 5, 6];
let c = [...a, ...b];

console.log(c);

그리고 코드 실행을 한다면

라는 결과를 얻을 수 있습니다.

• a 와 b 배열이 있고 c 배열에 두 개를 합치려고 했습니다.
• [...a, ...b]를 통해서 손쉽게 배열이 합쳐집니다.

 

다음은 array를 복사할 때 입니다

        let a = [1, 2, 3];
        let b = a;
        let c = [...a];

        a[1] = 7;

        console.log(a);
        console.log(b);
        console.log(c);

그리고 실행을 하면

인 결과를 얻을 수 있습니다.

• a, b, c 배열로 진행합니다.
• b 배열처럼 복사를 한다면 a 배열의 값을 바꿀 때 b 배열의 값이 같이 바뀌는 것을 알 수 있습니다.
  • 이는 b 배열이 복사된 것이 아니라 a 배열과 값 공유를 하기 때문입니다.
  • 그렇기 때문에 배열 복사를 할 때는 저런 코드를 쓰면 안 됩니다.
• spread operator를 사용해서 c 배열처럼 만든다면 정상적인 복사가 일어난 것을 알 수 있습니다.
  • 이렇게 배열 복사를 하면 원본 값과 별개로 사용할 수 있게 됩니다.
  • 이렇게 복사하는 것을 deep copy라고 부릅니다.
    (deep copy에 대해서는 설명을 따로 적지는 않겠습니다.)

 

2. 오브젝트 형 합치기

지금까지 array 형태에서만 사용해봤지만

spread operator는 오브젝트 형에서 사용해도 됩니다.

        let a = {a : 1};
        let b = {b : 2, c : 3};
        let c = { ...a, ...b };
        console.log(c);

실행을 해본다면

라는 결과를 볼 수 있습니다.

이것을 통해 c 오브젝트에 a 와 b 오브젝트가 합쳐진 것을 확인할 수 있습니다.

 

혹시 겹치는 key에 대해서는 어떻게 처리할까요?

        let a = {a : 1, b : 2};
        let b = {a : 3, ...a};
        let c = {...a, a : 3};
        console.log(b);
        console.log(c);

나중에 오는 key의 value 값으로 덮어쓰는 것을 확인할 수 있습니다.

 

3. 파라미터 형태로 들어가야 할 때

예시부터 보겠습니다.

function plusAction(a,b,c) {
   console.log(a + b + c);
}

plusAction(3,4,6);	// 13

let arr = [2,6,8];

• plusAction이라는 함수를 하나 만들었습니다.
• 파라미터 3개를 넣으면 결과가 잘 출력되는 것을 확인할 수 있습니다.
• 이 때, Array가 있으면 어떻게 해야할까요

 

        function plusAction(a,b,c) {
            console.log(a + b + c);
        }
        let arr = [2,6,8];

        plusAction(arr[0], arr[1], arr[2]);
        plusAction(...arr);

• plusAction(arr[0], arr[1], arr[2]); : spread operator를 몰랐다면, 그리고 없었을 때에는 이렇게 썼을 것입니다.
• plusAction(...arr);                       : spread operator를 통해 변수 3개를 인식해서 동일한 결과를 보여줍니다.

spread operator를 알고 있다면 코드 작성이 조금 더 수월해질 수 있을 것 같습니다.

 

만약 파라미터보다 배열이 더 길면 어떨까요?

        function plusAction(a,b,c) {
            console.log(`a = ${a}, b = ${b}, c = ${c}`);
            console.log(a + b + c);
        }
        let arr = [2,6,8,5,1];

        plusAction(...arr);

아까의 코드를 조금 변형해봤고, 결과입니다.

• 동일한 결과가 나오는 것을 확인할 수 있습니다.
• 그리고 각 파라미터에도 우리가 예상한 값이 들어간 것을 확인할 수 있습니다.
• 그리고 뒤에 더 있는 값들은 무시가 되는 것을 알 수 있습니다.

 

그러면 만약 파라미터보다 배열이 더 짧다면 어떨까요?

        function plusAction(a,b,c) {
            console.log(`a = ${a}, b = ${b}, c = ${c}`);
            console.log(a + b + c);
        }
        let arr = [2,6];

        plusAction(...arr);

아까의 코드를 또 조금 변형했고, 결과입니다.

• 첫번째, 두번째 파라미터는 인식했지만, 세번째 파라미터는 undefined로 표시됩니다.
• 그리고 그에 해당하는 결과도 우리가 원하는 결과가 나오지 못했습니다.
• 배열이 짧다면 문제가 있다는 것을 확인할 수 있습니다.

 

배열이 파라미터 형태로 들어갈 때는 파라미터 개수와 같거나 더 많아야 정상 작동한다는 것을 알 수 있었습니다.

 

 

이렇게 spread operator ( ... ) 에 대해 알아봤습니다.

가끔씩 사용하는 것을 봤고, 이거에 대해 검색하는 것도 약간 어려웠는데,

이렇게라도 알고 정리하게 되었네요.

이제 실전에서 잘 써먹으면 될 것 같습니다

 

이것으로 spread operator에 대한 글을 마치겠습니다.

 

 

 

출처: 코딩애플 - 쉽게 이해하는 JavaScript 객체지향 & ES6 신문법