[JavaScript] ...문법 - 스프레드(spread) 연산자 사용법

자바스크립트에서 ...으로 되어있는 연산자는 두 가지 용도로 사용됩니다. 하나는 함수의 나머지 인자의(rest parameter)로 사용하는 것이고, 또 다른 하나는 이번 포스팅에서 알아볼 스프레드(spread) 연산자입니다.

 

 자바스크립트 스프레드(spread) 연산자 사용법 

자바스크립트의 스프레드(spread) 연산자는 배열이나 객체의 요소를 개별 요소로 펼칠 때 사용되며 주로 배열을 복사하거나 합칠 때, 객체를 복사하거나 업데이트할 때 유용하게 사용할 수 있습니다.

 

스프레드 연산자 문법

// 사용법
// ...배열 or 객체

// 예시 -> 배열의 요소들을 개별 인자값으로 함수에 전달
function sum(x, y, z) {
  return x + y + z;
}

let arrNum = [1, 2, 3];
console.log(sum(...arrNum)); // 스프레드 연산자 사용 -> 결과 : 6

스프레드 연산자는 배열이나 객체 앞에 세 개의 점(...)으로 사용하면 되고, 자바스크립트 객체 중에 반복 가능한 Array, Map, Set, String 등의 구성 요소들을 나열(spread out)할 수 기능을 가지고 있습니다. 위의 예제에서 ...arrNum 처럼 사용하면 arrNum 배열에 있는 요소들을 개별 요소로 풀어쓰게(unpack)됩니다. 위의 예제처럼 쓰시면 x, y, z에 값을 개별로 전달하게 되겠네요.

 

---

 

 배열에서 스프레드 연산자 활용하기 

배열 합치기

See the Pen 스프레드 연산자1 by 우정태 (@sxqouumz-the-reactor) on CodePen.

 

스프레드 연산자를 사용하면 배열을 간편하게 합칠 수 있습니다. 위의 예제를 보시면 ...arr1 ..arr2를 개별 요소로 풀어서 arrResult[ ] 배열에 새롭게 담고 있네요. 참고로 자바스크립트에서는 배열의 각각의 요소마다 타입을 다르게 가질 수 있기 때문에 이렇게 타입이 다른 배열도 합칠 수 있답니다.

 

배열 복사하기

See the Pen 스프레드 연산자2 by 우정태 (@sxqouumz-the-reactor) on CodePen.

 

위의 예제에서 보시면 ...arr1의 요소들을 풀어서 arr2 배열에 새롭게 담고 있습니다. 즉 배열의 복사가 됩니다. 이 경우 깊은복사가 일어나서 독립적인 메모리를 서로 구성하기 때문에 두 배열은 완전히 독립된 개체로 사용이 가능합니다.

 

배열에 요소 추가하기

See the Pen 스프레드 연산자3 by 우정태 (@sxqouumz-the-reactor) on CodePen.

 

스프레드 연산자를 사용해서 배열의 앞, 뒤에 간단하게 값을 추가할 수 있겠습니다. 이 형태도 굉장히 많이 사용합니다.

 

---

 

 객체에서 스프레드 연산자 활용하기 

객체 합치기

See the Pen 스프레드 연산자5 by 우정태 (@sxqouumz-the-reactor) on CodePen.

 

스프레드 연산자를 사용하면 객체들의 모든 속성들을 풀어(unpack)버립니다. 이렇게 풀어낸 속성을 새로운 객체에 합칠 수 있겠죠. 이 경우 같은 속성이 같으면 뒤에 나열한 객체의 속성으로 대입합니다. 그래서 b의 속성값은 3이 되었네요.

 

객체 복사하기

See the Pen 스프레드 연산자4 by 우정태 (@sxqouumz-the-reactor) on CodePen.

 

객체를 복사할 때도 스프레드 연산자를 사용하면 간단하게 복사가 됩니다.

 

객체에 속성값 추가 or 수정하기

See the Pen 스프레드 연산자6 by 우정태 (@sxqouumz-the-reactor) on CodePen.

 

스프레드 연산자를 사용하여 객체의 새로운 속성을 추가할수도 있고, 기존의 속성을 대체할 수도 있습니다. 위의 예제에서는 기존의 객체를 스프레드 연산자(...)를 통해 펼쳐놓고, 새로운 속성인 location을 추가했고, 기존 속성인 name을 수정했네요.