[JS] Spread operator (스프레드 연산자) 활용하기

Spread operator 기본 사용법

ES6 에서 추가된 Spread operator는 … 기호를 붙여서 배열이나 객체의 값을 펼쳐주는 연산자이다.
배열과 객체 이름 앞에 … 을 사용해주면, 배열에서 괄호를 제거해 내부의 값만 빼서 펼쳐준다.
데이터의 연결, 복사 등으로 유용하게 활용할 수 있다.
괄호를 제거해 주는 연산자 이므로 소괄호 / 중괄호 / 대괄호 내부에서만 사용할 수 있다.

const words = ["hello", "world"];
const number = { a: 1, b: 2, c: 3 };

console.log(words); // output: ['hello', 'world']
console.log(...words); // output: hello world
console.log(...number); // output: a: 1, b: 2, c: 3

배열 병합하기

기존에 두개의 배열을 Spread operator을 활용해 병합할 수 있다.

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

const sum = [...num1, ...num2];
console.log(sum); // output: [ 1, 2, 3, 4, 5, 6 ]

배열 복사하기

배열을 복사하는 경우 새로운 배열은 기존의 배열을 참조한다.

const friends1 = ["Jessie", "Tony"];
const friends2 = friends1;

friends1.push("Brian");

console.log(friends1); // output: ['Jessie','Tony', 'Brian']
console.log(friends2); // output: ['Jessie','Tony', 'Brian']

그런데 그냥 이렇게 배열을 복사하면 값의 공유가 일어나기 때문에,
friends1을 수정하면 friends2까지 같이 바뀌어버리는 문제가 생긴다.
따라서 값을 공유하지 않고 독립적인 값을 저장하도록 Spread operator을 사용한다.

const friends1 = ["Jessie", "Tony"];
const friends2 = [...friends1];

friends1.push("Brian");

console.log(friends1); // output: ['Jessie','Tony', 'Brian']
console.log(friends2); // output: ['Jessie','Tony']

friends1은 push 메소드로 인해 값이 추가되었지만,
이미 friends2는 friends1의 값만 빼서 저장해둔 상태이기때문에 변화한 값의 공유가 일어나지 않는다.

객체 복사, 업데이트 하기

const profile = { name: "Jessie", age: 20 };
const newProfile = { ...profile, height: 180 };

console.log(newProfile); // output: {name: 'Jessie', age: 20, height: 180}

위 코드와 같이 객체의 속성값을 복사해와서 추가해줄 수 있다.

const profile = { name: "Jessie", age: 20 };
const newProfile = { ...profile, height: 180, name: "Tony" };

console.log(newProfile); // output: {name: 'Tony', age: 20, height: 180}

속성값이 중복되는 경우, 더 뒤에있는 값으로 덮어쓰는 방식으로 처리되어 자료를 업데이트 할 수 있다.

함수의 파라미터로 활용하기

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

const number = [10, 20, 30];

calculator(...number); // output: 60

배열 내의 자료를 함수의 파라미터로 활용하기 위해 각각의 데이터를 입력하지 않고,
Spread operator를 활용해 한번에 배열 데이터를 넣어줄 수 있다.