초보자를 위한 JavaScript Object.assign(): 객체 병합 마법 완전 정복! mymaster, 2024년 06월 25일 웹 개발, 특히 JavaScript를 배우는 중이신가요? 복잡한 데이터를 다루다 보면 여러 객체를 하나로 합치고 싶은 순간이 분명히 찾아올 겁니다. “어떻게 하면 여러 객체를 하나로 깔끔하게 합칠 수 있을까?”라는 고민을 해본 적이 있다면, 이 글이 바로 그 해답입니다! JavaScript의 강력한 기능 중 하나인 Object.assign() 메서드를 이용하면 마치 마법처럼 손쉽게 객체를 병합할 수 있습니다. 이 글을 통해 Object.assign() 메서드의 개념부터 다양한 활용법, 주의 사항까지 완벽하게 이해하고 실제 개발에 자신 있게 적용해 보세요! 1. Object.assign()이란 무엇인가요? Object.assign()은 JavaScript에서 제공하는 강력한 메서드로, 여러 개의 출처 객체(source object)의 속성(property)과 값(value)을 하나의 타겟 객체(target object)로 복사하여 병합하는 기능을 합니다. 간단히 말해서, 여러 개의 객체를 하나로 합쳐주는 역할을 한다고 생각하면 됩니다. 예를 들어, ‘철수’라는 사람의 정보를 담은 객체와 ‘영희’라는 사람의 정보를 담은 객체가 있다고 가정해 봅시다. Object.assign() 메서드를 사용하면 이 두 객체를 하나로 합쳐 ‘철수’와 ‘영희’ 두 사람의 정보를 모두 포함하는 새로운 객체를 만들 수 있습니다. 2. Object.assign() 기본 사용법: 객체를 하나로 합치는 마법! Object.assign() 메서드의 기본적인 사용법은 매우 간단합니다. 다음과 같은 형식으로 사용합니다. Object.assign(target, source1, source2, ...); target: 병합된 속성들을 받을 타겟 객체입니다. source1, source2, … : 속성들을 제공할 출처 객체들입니다. 여러 개를 입력할 수 있습니다. 예시: const person = { name: "철수", age: 20 }; const info = { job: "학생", hobby: "독서" }; const mergedObject = Object.assign(person, info); console.log(mergedObject); // 출력: { name: "철수", age: 20, job: "학생", hobby: "독서" } 위 예시에서는 person 객체를 타겟 객체로, info 객체를 출처 객체로 하여 Object.assign() 메서드를 실행했습니다. 그 결과 person 객체에 info 객체의 속성들이 복사되어 mergedObject라는 새로운 객체가 생성되었습니다. mergedObject는 person과 info 객체의 모든 속성을 가지게 됩니다. 주의 사항: 만약 타겟 객체와 출처 객체에 동일한 이름의 속성이 존재하는 경우, 나중에 작성된 출처 객체의 속성 값이 우선 적용됩니다. const obj1 = { a: 1, b: 2 }; const obj2 = { b: 3, c: 4 }; const result = Object.assign(obj1, obj2); console.log(result); // 출력: { a: 1, b: 3, c: 4 } 위 예시에서는 obj1과 obj2 모두 b라는 속성을 가지고 있습니다. Object.assign() 메서드를 실행하면 obj2의 b: 3 속성 값이 최종적으로 적용되어 result 객체의 b 속성 값은 3이 됩니다. 3. Object.assign() 활용하기: 다양한 상황에서 빛을 발하는 마법! 3.1. 얕은 복사 (Shallow Copy) Object.assign()은 객체를 “얕게 복사”하는 데 유용하게 사용됩니다. 얕은 복사는 객체의 속성 값을 새로운 객체에 복사하지만, 속성 값이 객체일 경우 해당 객체에 대한 참조만 복사합니다. 예시: const original = { a: 1, b: { c: 2 } }; const copy = Object.assign({}, original); console.log(copy); // 출력: { a: 1, b: { c: 2 } } copy.a = 3; console.log(original); // 출력: { a: 1, b: { c: 2 } } console.log(copy); // 출력: { a: 3, b: { c: 2 } } copy.b.c = 4; console.log(original); // 출력: { a: 1, b: { c: 4 } } console.log(copy); // 출력: { a: 3, b: { c: 4 } } 위 예시에서 copy 객체는 original 객체의 얕은 복사본입니다. copy.a 값을 변경하면 original.a 값은 변하지 않습니다. 하지만 copy.b.c 값을 변경하면 original.b.c 값도 함께 변경됩니다. 이는 copy.b가 original.b 객체에 대한 참조를 가지고 있기 때문입니다. 3.2. 객체 병합 (Object Merging) Object.assign()은 여러 객체를 하나의 객체로 병합하는 데에도 유용합니다. 예시: const user = { name: "철수", age: 30 }; const address = { city: "서울", country: "한국" }; const contact = { phone: "010-1234-5678" }; const mergedUser = Object.assign({}, user, address, contact); console.log(mergedUser); // 출력: { name: "철수", age: 30, city: "서울", country: "한국", phone: "010-1234-5678" } 위 예시에서는 user, address, contact 세 개의 객체를 Object.assign() 메서드를 사용하여 하나의 mergedUser 객체로 병합했습니다. 3.3. 객체 속성 업데이트 기존 객체의 특정 속성 값만 업데이트하고 싶을 때도 Object.assign()을 사용할 수 있습니다. 예시: const product = { name: "노트북", price: 1000000 }; Object.assign(product, { price: 900000 }); console.log(product); // 출력: { name: "노트북", price: 900000 } 위 예시에서는 product 객체의 price 속성 값을 900000으로 업데이트했습니다. 3.4. 객체 생성과 동시에 속성 추가 새로운 객체를 생성하면서 동시에 여러 속성을 추가해야 할 때도 Object.assign()을 활용할 수 있습니다. 예시: const newObject = Object.assign( {}, { name: "홍길동", age: 25, occupation: "의적" } ); console.log(newObject); // 출력: { name: "홍길동", age: 25, occupation: "의적" } 위 예시에서는 빈 객체({})를 타겟 객체로 사용하여 Object.assign() 메서드를 실행하고, 출처 객체로부터 새로운 객체를 생성하면서 속성들을 추가했습니다. 4. Object.assign() 사용 시 주의 사항: 함정에 빠지지 않도록 조심하세요! 4.1. 얕은 복사의 함정 앞서 언급했듯이 Object.assign()은 얕은 복사를 수행합니다. 따라서 중첩된 객체를 복사할 때는 주의가 필요합니다. 중첩된 객체는 참조 복사되므로 원본 객체의 값이 의도치 않게 변경될 수 있습니다. 예시: const original = { a: 1, b: { c: 2 } }; const shallowCopy = Object.assign({}, original); shallowCopy.b.c = 3; console.log(original.b.c); // 출력: 3 위 예시에서 shallowCopy.b.c 값을 변경하면 원본 객체인 original.b.c 값도 함께 변경됩니다. 이는 shallowCopy.b가 original.b 객체에 대한 참조를 가지고 있기 때문입니다. 해결책: 중첩된 객체를 완전히 분리하여 복사하려면 깊은 복사(Deep Copy)를 수행해야 합니다. 깊은 복사는 중첩된 객체까지도 새롭게 생성하여 복사합니다. 깊은 복사를 위해서는 JSON.parse(JSON.stringify(object)) 메서드를 사용하거나 lodash와 같은 외부 라이브러리를 활용할 수 있습니다. JSON.parse(JSON.stringify(object)) 활용 예시: const original = { a: 1, b: { c: 2 } }; const deepCopy = JSON.parse(JSON.stringify(original)); deepCopy.b.c = 3; console.log(original.b.c); // 출력: 2 console.log(deepCopy.b.c); // 출력: 3 Lodash 라이브러리 활용 예시: const _ = require('lodash'); const original = { a: 1, b: { c: 2 } }; const deepCopy = _.cloneDeep(original); deepCopy.b.c = 3; console.log(original.b.c); // 출력: 2 console.log(deepCopy.b.c); // 출력: 3 4.2. 프로토타입 체인은 복사되지 않음 Object.assign()은 객체의 자신의 속성(own property) 만 복사하고, 프로토타입 체인에 있는 속성은 복사하지 않습니다. 예시: function Animal(name) { this.name = name; } Animal.prototype.speak = function() { console.log(`${this.name} makes a sound`); }; const dog = new Animal('Dog'); const dogCopy = Object.assign({}, dog); console.log(dogCopy.name); // 출력: Dog dogCopy.speak(); // 에러 발생: dogCopy.speak is not a function 위 예시에서 dogCopy 객체는 dog 객체의 name 속성만 복사하고 speak 메서드는 복사하지 않습니다. 이는 speak 메서드가 Animal.prototype에 정의되어 있기 때문입니다. 4.3. Getter 및 Setter 함수는 일반 값으로 복사 Object.assign()은 객체의 getter 및 setter 함수를 일반 값으로 복사합니다. 즉, 복사된 객체에서 해당 속성에 접근하면 getter 함수가 호출되는 것이 아니라 복사된 값이 반환됩니다. 예시: const obj = { get value() { return 10; } }; const copy = Object.assign({}, obj); console.log(copy.value); // 출력: 10 위 예시에서 copy.value는 getter 함수를 호출하는 대신 10이라는 값을 직접 반환합니다. 5. Object.assign() 대체 방법: 객체 병합을 위한 또 다른 마법 지팡이! Object.assign() 외에도 객체를 병합하는 데 사용할 수 있는 다른 방법들이 있습니다. 5.1. Spread Syntax (…) ES6에서 도입된 Spread Syntax(…)를 사용하면 간편하게 객체를 병합할 수 있습니다. 예시: const obj1 = { a: 1, b: 2 }; const obj2 = { b: 3, c: 4 }; const merged = { ...obj1, ...obj2 }; console.log(merged); // 출력: { a: 1, b: 3, c: 4 } 위 예시에서 Spread Syntax(…)를 사용하여 obj1과 obj2를 하나의 객체로 병합했습니다. 동일한 이름의 속성이 있는 경우, obj2의 속성 값이 우선 적용됩니다. 5.2. Object.entries() 및 reduce() 메서드 활용 Object.entries() 메서드를 사용하여 객체의 key-value 쌍을 배열로 변환하고, reduce() 메서드를 사용하여 새로운 객체를 생성하면서 병합할 수 있습니다. 예시: const obj1 = { a: 1, b: 2 }; const obj2 = { b: 3, c: 4 }; const merged = Object.entries(obj1).reduce((acc, [key, value]) => { acc[key] = obj2[key] !== undefined ? obj2[key] : value; return acc; }, {}); console.log(merged); // 출력: { a: 1, b: 3 } 5.3. 외부 라이브러리 활용 lodash, underscore.js와 같은 외부 라이브러리를 사용하면 _.merge() 또는 _.extend()와 같은 메서드를 통해 객체를 쉽게 병합할 수 있습니다. 예시: const _ = require('lodash'); const obj1 = { a: 1, b: 2 }; const obj2 = { b: 3, c: 4 }; const merged = _.merge({}, obj1, obj2); console.log(merged); // 출력: { a: 1, b: 3, c: 4 } 6. 마무리: 이제 당신도 객체 병합 마스터! 지금까지 JavaScript Object.assign() 메서드에 대해 자세히 알아보았습니다. Object.assign()은 객체를 병합하거나 얕은 복사를 수행할 때 유용하게 사용되는 메서드입니다. 하지만 몇 가지 주의 사항을 염두에 두고 사용해야 합니다. 특히 얕은 복사의 특징과 프로토타입 체인, getter 및 setter 함수가 복사되는 방식에 유의해야 합니다. 이제 Object.assign() 메서드를 완벽하게 이해했으니, 자신 있게 JavaScript 코드에 적용하여 더욱 효율적이고 강력한 코드를 작성해 보세요! 목차 Toggle 1. Object.assign()이란 무엇인가요?2. Object.assign() 기본 사용법: 객체를 하나로 합치는 마법!3. Object.assign() 활용하기: 다양한 상황에서 빛을 발하는 마법!3.1. 얕은 복사 (Shallow Copy)3.2. 객체 병합 (Object Merging)3.3. 객체 속성 업데이트3.4. 객체 생성과 동시에 속성 추가4. Object.assign() 사용 시 주의 사항: 함정에 빠지지 않도록 조심하세요!4.1. 얕은 복사의 함정4.2. 프로토타입 체인은 복사되지 않음4.3. Getter 및 Setter 함수는 일반 값으로 복사5. Object.assign() 대체 방법: 객체 병합을 위한 또 다른 마법 지팡이!5.1. Spread Syntax (…)5.2. Object.entries() 및 reduce() 메서드 활용5.3. 외부 라이브러리 활용6. 마무리: 이제 당신도 객체 병합 마스터! post