[Javascript] 스프레드 연산자 (Spread Operator)

스프레드 연산자 (Spread Operator)

자바스크립트에서 스프레드 연산자를 사용하면 Array, 반복 가능한 객체 등의 요소를 전개하거나 펼칠 수 있다.

배열

const group1 = ["민수", "철수"];
const group2 = ["영희", "유리"];

const groupAll = [...group1, ...group2];

console.log(groupAll); 
// ["민수", "철수", "영희", "유리"];

위의 코드처럼 두개의 배열을 하나로 병합하려고 할때 ES6에서는 스프레드 연산자를 활용하여 간편하게 병합 가능하다.

하지만 기존에 생성되어 있는 배열이나 객체에 새로운 값을 추가하거나 삭제하게되면 값을 참조 하기때문에 되어 할당 되어있는 배열 또는 객체도 변경되게 된다.

ES5에서는 slice 또는 map 을 사용해 복사하였다.

// slice
const group1 = ["민수", "철수"];
let group2 = group1.slice();

group2.push("영희");

// map
const group1 = ["민수", "철수"];
let group2 = group1.map(user => user);

group2.push("영희");

ES6에서는 스프레드 연산자를 활용해 깔끔하게 사용 가능하다.

// slice
const group1 = ["민수", "철수"];
const group2 = [...group1, "영희"];

객체

객체에서는 스프레드 연산자를 이용해 프로퍼티를 업데이트 하거나 복사가 가능하다. 또한 객체의 특정 프로퍼티 값만 가져오가나 제외 시켜 변수에 할당이 가능하다.

const member = {
  name: "민수",
  age: 22
}

member = { ...member, height: 178 };
console.log(member);
// {name: "민수", age: 22, height: 178};

member = { ...member, name: "철수", age: 25 };
console.log(member);
// {name: "철수", age: 25, height: 178};


const { name, ...memberInfo } = member;
console.log(name); // 철수
console.log(memberInfo)
// { age: 25, height: 178};