Js object 깊은 복사 - Js object gip-eun bogsa

💡 얕은 복사(shallow copy) vs 깊은 복사(deep copy)

❗️얕은 복사(shallow copy)란?

const obj1 = { a: 1, b: 2};
const obj2 = obj1;

console.log( obj1 === obj2 ); // true

• 위의 예시처럼 객체를 직접 대입하는 경우 참조에 의한 할당이 이루어지므로 둘은 같은 데이터(주소)를 가지고 있다.
• 이것이 얕은 복사이다.

const obj1 = { a:1, b:2 };
const obj2 = obj1;

obj2.a = 100;

console.log( obj1.a ); // 100

• 위 두 객체는 같은 데이터(주소)를 가지고 있고, 그래서 같은 주소를 참조하고 있다.
• 때문에 obj2의 property를 수정하고, obj1를 출력해도 obj2 값과 동일하다.

❗️깊은 복사(deep copy)란?

얇은 복사 처럼 주소를 복사해서 공유하는 것이 아니라, 아예 새로운 객체안 속성(property)만 복사 해서 사용할 수 없을까?

👉 방법 1. …(spread) 연산자를 통한 복사 (과연 깊은 복사가 될까?)

const obj1 = { a:1, b:2 };
const obj2 = { ...obj };

obj2.a = 100;

console.log( obj1 === obj2 ) // false
console.log( obj1.a ) // 1

• ...(spread) 연산자를 통해 { }안에 obj1의 속성을 복사하여 obj2에 할당하였다.
• 이제 obj1과 obj2는 다른 주소를 갖게되었다. (그러나 딱, 1 depth 까지만)

👉 방법 2. Object.assign() 메소드를 통한 복사 (과연 깊은 복사가 될까?)

Object.assign() - JavaScript | MDN

Object.assign() 메소드는 열거할 수 있는 하나 이상의 출처 객체로부터 대상 객체로 속성을 복사할 때 사용합니다. 대상 객체를 반환합니다.

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

• 먼저 Object.assign() 메소드의 사용법은 MDN을 참고한다.

const obj1 = { a:1, b:2 };
const obj2 = Object.assign({}, obj1);

obj2.a = 100;

console.log( obj1 === obj2 ) // false
console.log( obj1.a ) // 1

• Object.assign() 메소드를 통해 첫 번째 인자로 빈 { } 객체를, 두 번째 인자로 obj1 넣고 obj2 에 할당하였다.
• 이제 obj1과 obj2는 다른 주소를 갖게되었다. (그러나 딱, 1 depth 까지만)

❗️주의, 깊은 복사의 함정

👉 MDN의 전개 구문

참고: Spread 문법은 배열을 복사할 때 1 레벨 깊이에서 효과적으로 동작합니다. 그러므로, 다음 예제와 같이 다차원 배열을 복사하는것에는 적합하지 않을 수 있습니다. (Object.assign() 과 전개 구문이 동일합니다)

• Object.assign() 메소드도 spread 연산자 둘 다 완벽한 Deep copy 되지 않는다.
• 객체가 서로 다르다고 깊은 복사가 이루어진건 아니다.
• 1 depth 까지는 확실하게 Deep copy.
• 2 depth 이상이면 Shallow copy.

👉 …(spread) 연산자를 이용해 depth 2까지 복사하는 방법

const obj1 = { a: { b:1, c:1 }, d: 2};
const obj2 = { ...obj1, a:{ ...obj1.a } };

obj1.a.b = 100;

console.log(obj1 === obj2) // false
console.log(obj2.a.b) // 1

❗️완벽한 Deep copy를 위한 다른 방법

• 재귀적으로 깊은 복사를 수행
• Lodash의 cloneDeep 함수 사용
• JSON.parse()와 JSON.stringify()함수 사용

완벽한 Deep copy 하는 방법은 컨텐츠 준비중..!

Reference

참고 : [2020.04.26] Javascript 깊은 복사의 함정… 모르고 사용하다 뒤통수 맞았다…

참고 : 객체의 얕은 복사 vs 깊은 복사

참고 : [JavaScript] 얕은 복사(Shallow Copy)와 깊은 복사(Deep Copy)

참고 : 얕은 복사(shallow copy) vs 깊은 복사(deep copy)

참고 : 🐯 코어 자바스크립트 – 01 데이터 타입

참고 : Copying Objects in JavaScript | DigitalOcean

사이드 프로젝트 진행 중, 내게 엄청나게 스트레스를 안겨준 요소가 있었다.

Javascript의 깊은 복사의 함정..

우선 이 깊은 복사의 함정을 설명하기 위해서, Object 복사의 개념에 대해 간단히 설명을 해보려고 한다.

얕은 복사(Shallow copy)

우리가 흔히 알고 있듯이, 객체가 담겨있는 변수를 다른 변수에 할당하면 call by reference (데이터 복사가 아닌 참조)가 일어나게 되어, 한 변수의 데이터를 변경하면 다른 변수의 데이터도 함께 변경이 된다.

const person1 = {name:'inyong'};

const person2 = person1;

person1.name = 'jung';

// result

person2.name // 'jung'

person1 === person2; // true - 같은 데이터 주소를 바라보고 있는 두 변수

데이터가 그대로 하나 더 생성된 것이 아닌 해당 데이터의 메모리 주소를 전달하게 돼서, 결국 한 데이터를 공유하게 되는 것이다.

깊은 복사(Depth copy)

한 데이터의 공유가 아닌, 똑같은 구조의 객체를 하나 더 생성하여 따로 사용하고자 할 때가 있다.

이럴 때 우리는 '깊은 복사'라는 개념을 사용한다.

const person1 = { name: "inyong" };

const person2 = Object.assign({}, person1);

person1.name = "jung";

// result

person2.name // 'inyong' - 전혀 다른 메모리 주소의 데이터이므로, person2의 값은 변하지 않음.

person1 === person2 // false - 형태만 같고, 각자 다른 메모리 주소에 저장되어 있는 데이터이다.

데이터 참조가 아닌 객체의 형태를 그대로 복사하게 함으로써, 한 객체가 변경되도 다른 객체의 데이터에는 영향이 없게 된다.

깊은 복사(Depth copy)를 하는 일반적인 방법

Object.assign()

Object.assign()은 ES6인가 ES7인가...Object 형태의 데이터를 쉽게 병합할 수 있게 해주는 함수이다.

const originObj = {a:1};

const newObj = Object.assign({}, originObj); // 빈 Object에 originObj를 병합하여 반환.

// result

newObj // {a:1} 

originObj === newObj // false

빈 Object에다가 복사를 하려는 Object를 병합한다. 그러면 형태는 originObj이지만 실제로는 빈 Object와 originObj가 병합된 새로운 Object가 반환된다.

전개 연산자 (Spread Operation)

ES6에서 새롭게 추가된 Javascript 문법이다. 

const Obj1 = {a:1, b:2};

const Obj2 = {c:3};

const Obj3 = {...Obj1, ...Obj2};

// result

Obj3 // {a:1, b:2, c:3}

...(쩜쩜쩜)을 이용하여, 배열이나 Object 형태의 괄호를 이용하여 풀어서(?) 사용해버리는 방식이다. 

Object 뿐 아니라, 배열도 이와 같은 방식으로 사용할 수 있다.

전개 연산자를 이용한 깊은 복사를 하려면, 아래와 같은 방법으로 할 수 있다.

const Obj1 = {a:1, b:2};

const Obj2 = {...Obj1};

// result

Obj2 // {a:1, b:2}

Obj1 === Obj2 // false

그러나 이러한 깊은 복사를 온전히 믿고 사용하다간 뒤통수 맞는다...

왜냐하면, 이 깊은 복사는 현재의 Depth 이상으로는 깊은 복사를 하지 않기 때문이다.

깊은 복사(Depth copy)의 함정

예시를 들어서 보도록 하자.

const Obj1 = { a: { b: 1 } };

const Obj2 = { ...Obj1 };

// result

Obj2 // { a: { b: 1 } }

Obj1 === Obj2 // false

Depth가 2인 Object를 전개연사자를 이용하여 Obj2 변수에 할당했다. 

확인해보면 Obj1과 Obj2는 형태가 똑같다. 그리고 === 연산자를 이용해 확인해보면, 각자 다른 메모리 주소에 저장된 데이터로 제대로 깊은 복사가 된 것처럼 보인다.

그러나 깊은 복사가 된 것은 제일 바깥의 Depth뿐이다.

const Obj1 = { a: { b: 1 } };

const Obj2 = { ...Obj1 };

// result

Obj2 // { a: { b: 1 } }

Obj1 === Obj2 // false

Obj1.a === Obj2.a // true...!!

두 번째 Depth 이상의 요소들은 참조 값을 전달하는... 즉, 얕은 복사(Shallow copy)를 하게 되는 것이다.
(Object.assign()을 이용해도 동일)

완벽한 깊은 복사를 하는 방법

재귀적으로 깊은 복사를 수행

깊은 복사를 하려는 형태에 맞게 재귀 함수를 만들어서 복사를 해야한다. 여간 귀찮은 일이 아니다...

사용하는 Object의 Depth가 길어질수록 Time Complexity(시간 복잡도)도 늘어나게 된다.

Lodash의 cloneDeep 함수 사용

자바스크립트 고차함수 집합 및 함수형 라이브러리이다.

Lodash의 cloneDeep 함수를 사용하면, 완벽하게 깊은 복사를 할 수 있다.

JSON.parse()와 JSON.stringify()함수 사용

JSON.stringify 함수를 이용해서, Object 전체를 문자열로 변환 후, 다시 JSON.parse 함수를 이용해서 문자열을 Object 형태로 변환한다. 

그러면 문자열로 변환하는 순간 참조 값이 끊기기 때문에 새로운 Object로 만들어 사용할 수 있다. 

하지만 JSON 함수는 엄청나게 리소스를 잡아먹는 함수인 만큼, 성능이 좋지 않은 부분을 고려해야 한다.

나는 이 함정으로 인해, 반나절이란 시간을 허황 없이 버리고 말았다...

데이터를 변경하지도 않았는데 마음대로 변경이 되어 있고, 그 원인은 당최 찾아봐도 알 수가 없었다.

이 깊은 복사를 굳게 믿었기 때문에...