[JavaScript] 객체 펼침 연산자(Spread Operator) 활용하기

 

오늘은 객체 펼침 연산자에 대해 알아보려고 한다. 먼저, 객체에서 펼침 연산자를 사용하는 간단한 코드를 살펴보자.

const book = {
    title: 'Reasons and Persons',
    author: 'Derek Parfit'
};

const update = { ...book, year: 1984 };

console.log(book);
console.log(update);

위 코드에서 ...book은 기존 객체의 모든 키-값 쌍을 새로운 객체로 복사한다. 이후 year: 1984와 같이 추가적인 키-값 쌍을 덧붙일 수 있다. 결과적으로 book 객체는 변경되지 않고, 새로운 객체 update가 생성된다.

 

 

동일한 키가 있을 때

---

객체 펼침 연산자의 중요한 특징 중 하나는 동일한 키가 여러 번 선언될 경우 가장 마지막에 선언된 값을 사용한다는 점이다. 아래 코드를 살펴보자.

 

const book = {
    title: 'Reasons and Persons',
    author: 'Derek Parfit'
};

const update2 = { ...book, title: 'title2' };

console.log(book);
console.log(update2);

동일한 키가 있을 때 Object.assign과의 비

---

이제 이전 포스팅에서 Object.assign으로 하던 작업을 펼침 연산자로 해보자.

 

const defaults = {
    author: '',
    title: '',
    year: 2017,
    rating: null
}


const book = {
    author: 'Joe',
    title: 'Simplifying Javascript'

};

const update = {...defaults, ...book}

console.log(book);
console.log(update);

 

Object.assign과 동일하게, defaults 객체의 키-값 쌍이 먼저 복사되고, book 객체의 값으로 덮어써진다.

 

 

깊은 병합 문제 해결

---

Object.assign처럼 객체 펼침 연산자도 깊은 병합(Deep Merge) 는 지원하지 않는다. 이전 포스팅의 코드를 다시 살펴보자.

const employee = Object.assign(
    {},
    defaultEmployee,
    {
        name: Object.assign({}, defaultEmployee.name)
    }
);

 

위 코드를 펼침 연산자를 사용해 다음과 같이 더 간결하게 작성할 수 있다.

const employee = {
    ...defaultEmployee,
    name: {
        ...defaultEmployee.name
    }
};

객체 펼침 연산자는 가독성을 높이고, 의도를 명확하게 전달할 수 있다는 장점이 있다.