[Javascript] 연산자 Spread 사용 방법(1): 복사, 합치기

Javascript의 ES6버전을 소개해 드렸습니다. 그리고 하나씩 자세히 포스팅하고 있어요.

이번 포스팅은 Spread 연산자입니다.

---

Javascript Spread 연산자

Javascript의 Spread 연산자는 ES6버전에서 새롭게 등장한 연산자입니다. 새롭게 등장했지만 너무나 활용도가 좋아서 Javascript를 이용하는 많은 프로그램(Node.js, React 등)에서도 자주 사용하는 문법입니다.

 

Spread 연산자는 ... 입니다. 점 세 개를 연산자로 사용한다니 첫 느낌이 신기한 느낌입니다. Spread 연산자는 아래와 같이 사용합니다.

const arr = [1, 2, 3, 4, 5];

console.log(...arr); // 1 2 3 4 5

Spread 연산자는 반복문처럼 배열에서 사용하면 기존 데이터를 일렬로 나열해 줍니다. 그렇다면 이 기능을 어디에 사용할 수 있을까요?

---

Javascript Spread를 이용한 배열 복사

Spread 연산자를 이용해서 배열을 손쉽게 복사하고 필요한 것을 추가할 수 있습니다.

const num1 = [1, 2, 3, 4, 5];
const num2 = [...num1, 6, 7, 8];

console.log(num2); // [1, 2, 3, 4, 5, 6, 7, 8]

배열 내부에서 Spread 연산자를 사용하면 가지고 있는 값들을 나열하기 때문에 배열 내부에서 사용하면 데이터를 추가할 수 있습니다. 이 기능을 사용하면 배열 복사도 손쉽게 가능합니다.

const num1 = [1, 2, 3, 4, 5];
const num2 = [...num1];

console.log(num2);

단순히 배열 복사만 할 때 이와같이 사용할 수 있습니다. Javascript에서는 배열을 복사할 때 아래와 같이 사용하면 문제가 발생합니다.

const num1 = [1, 2, 3, 4, 5];
const num2 = num1;

console.log(num1); // [1, 2, 3, 4, 5]
console.log(num2); // [1, 2, 3, 4, 5]

num2.push(6);

console.log(num1); // [1, 2, 3, 4, 5, 6]
console.log(num2); // [1, 2, 3, 4, 5, 6]

배열을 복사할 것이라 생각했지만 단지 연결을 시켜준 것이라 생각할 수 있습니다.

---

Javascript Spread를 이용한 Object 복사

배열을 복사했다면 Object는 어떨까요? Object 역시 복사할 수 있습니다.

const student1 = {name: 'Ironman', power: 90};
const student2 = {age: 45, height: 175};

const student3 = {...student1, ...student2};

console.log(student3); //{name: "Ironman", power: 90, age: 45, height: 175}

Object도 간단하게 합칠 수 있다는게 너무 편한 연산자인 것 같습니다.

---

이번 포스팅에서는 ES6 이상에서 새롭게 등장한 Spread 연산자에 대해서 알아보았습니다. 사용하기 굉장히 쉬운 연산자이며 사용법 역시 간단해서 활용도가 매우 좋은 연산자입니다. 도움이 되셨으면 합니다. 이상입니다.