내용 정리 JS - 얕은 복사와 깊은 복사

이유승·4일 전
0

내용 정리

목록 보기
32/32
post-thumbnail

1. 얕은 복사 (Shallow Copy)

정의

  • 객체의 1차 필드만 복사하고, 중첩된 객체(또는 배열)는 참조를 복사한다.

  • 즉, 원본 객체와 복사된 객체가 동일한 중첩된 객체를 참조하게 된다.

특징

  • 원본 객체의 중첩된 객체를 수정하면 복사본에서도 수정된 값이 반영된다.

  • 메모리 공간을 절약하지만, 참조로 인한 의도치 않은 데이터 변경 가능성이 있다.

구현 방법

  • Object.assign() 또는 전개 연산자(...)를 사용하면 얕은 복사를 수행한다.

코드 예시

const original = { a: 1, b: { c: 2 } };

// 얕은 복사
const shallowCopy = { ...original };

// 값 변경
shallowCopy.a = 100;
shallowCopy.b.c = 200;

console.log(original); // { a: 1, b: { c: 200 } }
console.log(shallowCopy); // { a: 100, b: { c: 200 } }
  • shallowCopy.a는 원본과 독립적이지만, 중첩 객체 shallowCopy.b.c는 원본과 연결되어 있다.



2. 깊은 복사 (Deep Copy)

정의

  • 객체의 모든 레벨(중첩된 객체, 배열 등)의 값을 복사한다.

  • 복사된 객체는 원본 객체와 완전히 독립적인 메모리를 가진다.

특징

  • 원본 객체와 복사본이 완전히 독립적이다.

  • 메모리 사용량이 증가할 수 있지만, 데이터 충돌 위험을 방지할 수 있다.

구현 방법

JSON.stringify() + JSON.parse()

  • 단순한 객체나 배열에 대해 깊은 복사를 수행한다.

  • 단점: 함수, undefined, 순환 참조가 포함된 객체를 처리하지 못한다.

라이브러리 사용

  • lodash의 _.cloneDeep() 함수는 깊은 복사를 지원한다.

재귀 함수 사용

  • 직접 재귀적으로 객체를 복사하는 코드를 작성할 수 있다.

코드 예시

JSON 기반 깊은 복사

const original = { a: 1, b: { c: 2 } };

// 깊은 복사
const deepCopy = JSON.parse(JSON.stringify(original));

// 값 변경
deepCopy.a = 100;
deepCopy.b.c = 200;

console.log(original); // { a: 1, b: { c: 2 } }
console.log(deepCopy); // { a: 100, b: { c: 200 } }

Lodash를 사용한 깊은 복사


const _ = require('lodash');

const original = { a: 1, b: { c: 2 } };

// 깊은 복사
const deepCopy = _.cloneDeep(original);

// 값 변경
deepCopy.b.c = 200;

console.log(original); // { a: 1, b: { c: 2 } }
console.log(deepCopy); // { a: 1, b: { c: 200 } }

재귀 함수 기반 깊은 복사

function deepClone(obj) {
    if (obj === null || typeof obj !== 'object') return obj;

    const clone = Array.isArray(obj) ? [] : {};
    for (let key in obj) {
        if (obj.hasOwnProperty(key)) {
            clone[key] = deepClone(obj[key]);
        }
    }
    return clone;
}

const original = { a: 1, b: { c: 2 } };

// 깊은 복사
const deepCopy = deepClone(original);

// 값 변경
deepCopy.b.c = 200;

console.log(original); // { a: 1, b: { c: 2 } }
console.log(deepCopy); // { a: 1, b: { c: 200 } }



3. 얕은 복사와 깊은 복사의 선택 기준

  • 얕은 복사: 간단한 객체와 배열에서 사용하며, 중첩된 데이터 구조가 없거나 복사를 위한 성능이 중요한 경우 적합하다.

  • 깊은 복사: 중첩된 데이터 구조나 원본 객체와의 독립성이 중요한 경우 적합하다.

profile
프론트엔드 개발자를 준비하고 있습니다.

0개의 댓글