들어가며: 객체 병합, 그 달콤한 고민
안녕하세요, 개발자 여러분! 오늘은 JavaScript의 숨겨진 보석 같은 메서드, Object.assign()에 대해 이야기해볼까 합니다.
여러분, 이런 경험 있으신가요? 여러 객체의 프로퍼티를 하나로 합치려고 할 때마다 반복문을 돌리거나, 복잡한 로직을 짜느라 머리를 싸매본 적이 있다면, 이 글을 주목해주세요. Object.assign()은 그런 여러분의 고민을 한 방에 해결해줄 마법 같은 도구입니다.
자, 이제 Object.assign()의 세계로 빠져볼까요? 🚀
목차
Object.assign()이란?
Object.assign()은 ES6에서 도입된 메서드로, 하나 이상의 '출처(source)' 객체들의 모든 열거 가능한 자체 속성을 '대상(target)' 객체에 복사합니다. 그리고 이 대상 객체를 반환합니다.
간단히 말해, 여러 객체를 하나로 합치는 강력한 도구입니다.
기본 사용법
Object.assign()의 기본 문법은 다음과 같습니다:
Object.assign(target, source1, source2, /* …, */ sourceN)target: 속성을 받을 대상 객체source1, source2, ..., sourceN: 속성을 제공할 하나 이상의 출처 객체들
예를 들어보겠습니다:
const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };
const returnedTarget = Object.assign(target, source);
console.log(target); // { a: 1, b: 4, c: 5 }
console.log(returnedTarget); // { a: 1, b: 4, c: 5 }이 예제에서 source 객체의 속성들이 target 객체로 복사되었습니다. 주목할 점은 b 속성이 덮어쓰여졌다는 것입니다.
실전 예제
1. 객체 복제
const obj = { a: 1 };
const copy = Object.assign({}, obj);
console.log(copy); // { a: 1 }2. 기본값 설정
const defaults = { color: 'red', fontSize: 12 };
const userSettings = { fontSize: 16 };
const result = Object.assign({}, defaults, userSettings);
console.log(result); // { color: 'red', fontSize: 16 }3. 객체 병합
const o1 = { a: 1 };
const o2 = { b: 2 };
const o3 = { c: 3 };
const obj = Object.assign(o1, o2, o3);
console.log(obj); // { a: 1, b: 2, c: 3 }
console.log(o1); // { a: 1, b: 2, c: 3 }, 대상 객체 자체가 변경됨주의할 점
- 얕은 복사:
Object.assign()은 얕은 복사만 수행합니다. 중첩된 객체는 참조만 복사됩니다.
const obj1 = { a: 0, b: { c: 0 } };
const obj2 = Object.assign({}, obj1);
obj2.b.c = 3;
console.log(obj1.b.c); // 3-
프로토타입 체인과 열거 불가능한 속성:
Object.assign()은 프로토타입 체인의 속성과 열거 불가능한 속성은 복사하지 않습니다. -
동일한 키 처리: 여러 출처 객체에 동일한 키가 있을 경우, 마지막 출처의 값이 사용됩니다.
대안과 비교
- 전개 연산자 (Spread Operator)
ES6의 전개 연산자도 비슷한 기능을 제공합니다:
const merged = { ...obj1, ...obj2 };전개 연산자는 새 객체를 생성하므로, 원본 객체를 변경하지 않는다는 장점이 있습니다.
- lodash의 _.merge()
Lodash 라이브러리의 _.merge() 메서드는 깊은 병합을 수행합니다:
const _ = require('lodash');
const merged = _.merge({}, obj1, obj2);마치며
Object.assign()은 JavaScript에서 객체를 다루는 강력한 도구입니다. 단순한 객체 병합부터 복잡한 설정 관리까지, 다양한 상황에서 유용하게 사용될 수 있습니다.
하지만 얕은 복사라는 한계점을 항상 염두에 두어야 합니다. 깊은 복사가 필요한 경우, 직접 구현하거나 라이브러리를 사용하는 것이 좋습니다.
이제 여러분도 Object.assign()의 마법사가 되셨습니다! 여러분의 코드에서 어떻게 활용하실지 기대가 됩니다. 해피 코딩하세요! 🎉
추가 학습 자료
