[자바스크립트 코딩의 기술] 3장 Tip 11

MinJee Lee·2021년 5월 20일
0

JavaScript

목록 보기
2/6
post-thumbnail

tip 11 Object.assign() 으로 조작없이 객체를 생성하라

객체는 완전하지 않다.

객체에 기존 데이터가 있는 상태에서 새로운 필드를 추가하는 경우나 외부 API에서 데이터를 가져와 현재 데이터 모델에 연결해야 하는 경우가 자주 발생한다.

새로운 필드 또는 데이터로 채워지지 않는 나머지 부분을 기본값 객체로 채워야 한다.

  • 기본값을 설정
  • 데이터 유지
  • 새로운 객체 생성

이 모든 것을 할 수 있는 Object.assign 에 대하여 알아보자.

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

const book = {
  author: 'Joe Morgan',
  title: 'Simplifying JavaScript',
};

function addBookDefaults(book, defaults) {
  const fields = Object.keys(defaults); // 객체를 순회하기 위한 작업
  const updated = {};
  for (let i = 0; i < fields.length; i++) {
    const field = fields[i];
    updated[field] = book[field] || defaults[field];
  }
  return updated;
}

장황한 위의 코드들 보다 object.assign() 를 이용하여 다른 객체의 속성을 이용해서 객체를 갱신할 수 있다.

Object.assign 는 어떻게 작동할까

  1. 메서드는 일련의 객체를 전달받음
  2. 가장먼저 인수 받은 객체를 뒤이어 인수로 넘긴 객체의 키- 값을 이용해 갱신
  3. 갱신된 첫번째 객체부터 반환한다.
const anotherBook = {
  title: 'Another book',
  year: 2016,
};

Object.assign(defaults, anotherBook);

// {
//   author: 'Joe Morgan',
//   title: 'Another book',
//   year: 2016,
//   rating: null,
// }

addBookDefaults의 코드가 한줄로 바뀌었다.

하지만 문제가 생겼다. 기본값을 갱신하면서 원본 객체를 조작하게 되었다.

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

const book = {
  author: 'Joe Morgan',
  title: 'Simplifying JavaScript',
};

const updated = Object.assign({}, defaults, book);
// 첫인자로 {}(빈 리터럴 객체)를 두어 default를 조작하지 않고 새로운 객체에 저장

빈 객체를 사용하면 빈 객체에 새로운 값이 갱신 되어 나타난다.

const defaultEmployee = {
  name: {
    first: '',
    last: '',
  },
  years: 0,
};

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

중첩된 객체가 있는 개체를 복사하는 것을 deep copy(깊은 복사) 또는 deep marge(깊은 병합)이라고 한다.

위 코드에서 years 속성은 문제없이 복사할 수 있지만 name 속성운 복사할 수 없다.

employee.name.first = 'Joe';

defaultEmployee;

// {
//   name: {
//     first:'Joe',
//     last: '',
//   },
//   years: 0
// }

이유는 name에 할당된 독립적인 객체에 대한 참조만 복사한다.

따라서 원본 객체 또는 복사한 객체 중 어디서라도 중첩된 객체의 값을 변경하면 원본 객체와 복사한 객체 모두 변경된다.

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

export { defaults };

Object.assign() 을 이용해서 중첩된 객체를 복사하는 방법도 있다.

Lodash 라이브러리의 경우 cloneDeep() 메서드 도 있다.

이 게시물은 자바스크립트 코딩의 기술 책을 요약한 내용입니다.

0개의 댓글