[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을 수정했네요.

댓글

Designed by JB FACTORY