자바스크립트 기본 문법 – 데이터 타입 – 객체 – 4 – 객체 복사와 병합

작성자 wooah

자바스크립트 기본 문법 – 데이터 타입 – 객체 – 4 – 객체 복사와 병합

소제목: 객체 복사와 병합

객체 복사와 병합은 자바스크립트에서 중요한 개념입니다. 객체를 복사하거나 여러 객체를 병합하는 방법을 알아보도록 하겠습니다.

객체 복사란?

객체 복사란, 기존 객체의 내용을 새로운 객체로 복사하는 것을 말합니다. 객체를 복사할 때는 주의해야 할 점이 있는데, 일반적으로 객체는 참조 타입이므로 단순히 할당 연산자(=)로 객체를 복사하면 원본 객체와 복사된 객체가 같은 메모리 주소를 참조하게 됩니다. 이러한 경우, 하나의 객체를 변경하면 다른 객체도 함께 변경되는 문제가 발생합니다.

예를 들어, 다음과 같이 person 객체를 정의하고 newPerson에 할당하는 경우를 생각해봅시다.

let person = { name: '홍길동', age: 20 };
let newPerson = person;

위의 코드에서 newPerson은 person 객체를 참조하고 있습니다. 그래서 person 객체나 newPerson 객체 중 하나를 변경하면 다른 객체도 동일하게 변경됩니다.

person.name = '이순신';

console.log(person.name);     // 출력: 이순신
console.log(newPerson.name);  // 출력: 이순신

이런 상황을 피하기 위해서는 객체를 복사하여 새로운 메모리 공간에 저장해야 합니다. 다음은 객체를 복사하는 방법을 소개합니다.

1. 얕은 복사 (Shallow Copy)

얕은 복사는 객체의 첫 번째 수준의 프로퍼티만을 복사하는 방법입니다. 객체의 프로퍼티가 객체일 경우, 해당 객체의 참조만을 복사하므로 중첩된 객체는 같은 메모리를 공유하게 됩니다.

예시:
let person = { name: '홍길동', age: 20 };
let newPerson = Object.assign({}, person);

위의 코드에서 Object.assign() 메서드를 사용하여 빈 객체에 person 객체의 프로퍼티를 복사합니다. 이렇게 하면 newPerson 객체는 person 객체와 동일한 프로퍼티를 가지지만, 다른 메모리 공간에 저장되어 변경이 독립적으로 이루어집니다.

person.name = '이순신';

console.log(person.name);     // 출력: 이순신
console.log(newPerson.name);  // 출력: 홍길동

2. 깊은 복사 (Deep Copy)

깊은 복사는 모든 수준의 프로퍼티를 복사하는 방법입니다. 중첩된 객체의 경우 새로운 메모리 공간에 복사되므로 원본 객체와는 완전히 독립적으로 동작합니다.

예시:
let person = { name: '홍길동', age: 20 };
let newPerson = JSON.parse(JSON.stringify(person));

위의 코드에서 JSON.stringify() 함수를 사용하여 person 객체를 문자열로 변환하고, 다시 JSON.parse() 함수를 사용하여 새로운 객체로 변환합니다. 이렇게 하면 newPerson 객체는 person 객체와 완전히 독립된 복사본이 됩니다.

person.name = '이순신';

console.log(person.name);     // 출력: 이순신
console.log(newPerson.name);  // 출력: 홍길동

객체 병합이란?

객체 병합은 두 개 이상의 객체를 합쳐서 하나의 객체로 만드는 것을 말합니다. 자바스크립트에서는 여러 가지 방법으로 객체를 병합할 수 있습니다.

예시:
let obj1 = { a: 1, b: 2 };
let obj2 = { c: 3, d: 4 };
let mergedObj = { ...obj1, ...obj2 };

위의 코드에서 ... 구문을 사용하여 두 개의 객체를 병합합니다. mergedObj 객체에는 obj1과 obj2의 모든 프로퍼티가 포함됩니다.

console.log(mergedObj);  // 출력: { a: 1, b: 2, c: 3, d: 4 }

주의해야 할 점

  1. 얕은 복사와 깊은 복사의 선택은 상황에 따라 달라집니다. 중첩된 객체를 완전히 복사해야 하는 경우에는 깊은 복사를 사용해야 합니다. 그러나 객체가 매우 크거나 중첩이 깊을 경우 성능 문제가 발생할 수 있으므로 신중하게 선택해야 합니다.
  2. Object.assign() 또는 JSON.parse(JSON.stringify())를 사용하여 객체를 복사할 때, 함수나 심볼과 같은 특수한 타입의 프로퍼티는 복사되지 않습니다.
  3. 병합된 객체에서 동일한 프로퍼티가 있는 경우, 뒤에 나오는 객체의 프로퍼티가 덮어씌워집니다.

이상으로 객체 복사와 병합에 대해 알아보았습니다. 객체를 올바르게 복사하고 병합하여 원하는 동작을 구현하는 데 활용해보세요! 자바스크립트에서 객체 복사와 병합은 매우 유용한 기능이며, 코드의 유지보수성과 효율성을 높일 수 있습니다. 문제가 있거나 추가적인 내용을 알고 싶다면 언제든지 물어보세요. 행운을 빕니다!

답글 남기기