Javascript ES6 - Spread Operator

Spread Operator를 한 마디로 정리하자면 ‘괄호를 없애주는 연산자’입니다. 괄호를 없앤다는 말이 무엇일까요?

 

const array1 = ['hello', 'world'];
console.log(array); // ['hello', 'world']
console.log(...array); // hello world

 

두 개의 결과값이 다른 것을 알 수 있습니다. array1라는 변수에 array를 담았을 때 콘솔에 출력해보면 진짜 array가 나옵니다. 그런데 ...array1은 대괄호가 없어지고 hello world가 나옵니다. 문자(string)에 붙여도 동일한 결과가 나옵니다. 사실 문자(string)도 배열과 동일합니다. 가령 ‘hello’라는 문자가 있을 때 hello[0]을 하면 h가 출력이 됩니다. 따라서 문자에 Spread Operator를 붙여주면 h e l l o 이렇게 따로따로 떨어진 결과를 볼 수 있습니다.

 

 

Spread Operator를 사용하는 용도가 몇 가지 있는데요. 그것을 살펴보도록 하겠습니다.

 

1️⃣  Array Deep Copy ( + Array 합치기 )

 

const a = [1,2,3];
const b = [4,5];

const c = [1,2,3,4,5]; // 이렇게 만들어라!

 

c를 만들려면 어떻게 해야될까요?

 

const c = [...a, ...b];

 

이렇게 해주면 됩니다. Spread Operator가 괄호를 없애주는 연산자라 했으므로 ...a는 1,2,3 일 것이고 그 다음에 , 로 연결이 되고 있고 ...b는 4,5 일 것이기 때문입니다. 몹시 간단합니다. 이렇게 array 두 개를 합칠 때 Spread Operator를 사용하면 아주 손쉽게 할 수 있습니다.

 

그러나 좀 더 중요한 것은 Deep Copy입니다.

 

const a = [1,2,3];
const b = a;

 

이렇게 되면 b는 어떤 값이 올까요? [1,2,3]이 될 것입니다. a를 b에 할당했기 때문이죠. 그런데 이렇게 하면 문제가 하나 생깁니다.

 

const a = [1,2,3];
const b = a;

a[3] = 4;

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

 

a를 수정해서 4라는 새로운 값을 array안에 넣었습니다. 그런데 b를 출력해보니 b도 자동으로 수정이 되고 있네요. 여기서 한 가지 중요한 사실을 알 수 있습니다. array나 object와 같이 레퍼런스 자료들은 값을 할당하는 식으로 복사하게 된다면 서로 값을 공유한다는 것입니다. 따라서 이런 것을 방지하기 위해서 Deep Copy를 해야되는데 그 때 Spread Operator 를 사용합니다.

 

const a = [1,2,3];
const b = [...a];


a[3]= 4;
console.log(b); //[1,2,3]

 

Spread Operator를 사용하여 array를 복사하면 b에도 일단 [1,2,3]이라는 array가 복사가 됩니다. 단, 이제 값을 공유하는게 아니라 독립적인 복사본이 생깁니다. 따라서 a를 수정해도 b는 독립적으로 존재하기 때문에 수정이 되지 않는 것을 알 수 있습니다. 이렇게 독립적으로 존재하는 복사본을 만드는 것을 Deep Copy라고 합니다.

 

2️⃣  Object 복사와 합치기에 사용할 수 있습니다.

 

const o1 = { a : 1, b : 2 };
const o2 = { c : 3, 그리고 o1에 있는거 전부.. };

 

 

o2를 어떻게 만들어야 할까요?

 

const o2 = { c: 3, ...o1 };

 

이렇게 만들면 됩니다. Spread Operator 는 대괄호, 중괄호, 소괄호 모두를 없애줍니다.

 

 

⚠️object를 만드는데 중복이 일어나면 어떡할까요?

 

const o1 = { a : 1, b : 2};
const o2 = { a : 3, ...o1 };
console.log(o2); // {a: 1, b:2}

 

지금 o2를 만들 때 Spread Operator를 이용하여 만들고 있습니다. 이 때 a라는 key가 두 개가 있어서 중복이 발생함을 알 수 있습니다. 결과를 출력해보니 a: 1 이 되었네요. 이렇게 object 안에서 중복이 발생하면 뒤에 오는 값이 이긴다고 알고 있으면 될 것 같습니다.

 

 

3️⃣  array를 파라미터 형태로 집어넣고 싶을 때 사용합니다.

 

function add(a,b,c){
   console.log(a + b + c)
}
add(1,2,3);

 

이런 코드가 있을 때 더하기(1,2,3) 이렇게 일일이 1,2,3을 넣어주는 것이 아니라 이미 존재하는 array의 내부자료를 그대로 쏙 넣어주고 싶으면 어떻게 해야될까요?

 

더하기(1,2,3);
더하기(어레이[0],어레이[1],어레이[2]);

 

일일이 이렇게 직접 하는 방법도 있지만 Spread Operator를 사용하면 더 편하게 코딩하는 방법이 있습니다.

 

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

const array1 = [1, 2, 3];
더하기(...array1);

몹시 간단하게 array 자료를 parameter에 넣을 수 있습니다.