[JavaScript] 깊은 복사 얕은 복사

오늘은 얕은 복사, 깊은 복사 에 대해 알아보자

솔직히 처음에 이 내용에 대해 공부했을때에 내가 너무 복사라는 단어에 초점을 맞추다보니 내용이 눈에 안들어와서 힘들었었다...

1. 얕은 복사

• 주소 값 을 복사한다는 의미
• 객체를 복사할 때, 해당 객체만 복사하여 새 객체를 생성
• 복사된 객체의 인스턴스 변수는 원본 객체의 인스턴스 변수와 같은 메모리 주소를 참조하며 해당 메모리 주소의 값이 변경되면 다른 객체의 변수 값 역시 동일하게 변경된다.

예시

let objA = [{ id: 1, name: "david" }];
let objB = objA;
objB.name = "jeff";
console.log("objB--", objB);
console.log("objA--", objA);

출력

objB-- [{ id: 1, name: "jeff" }]
objA-- [{ id: 1, name: "jeff" }]

2. 깊은 복사

• 실제 값 을 새로운 메모리 공간에 복사하는 것을 의미
• 객체를 복사할 때 해당 객체와 인스턴스 변수까지 복사
• 데이터 참조가 아닌 객체의 형태를 그대로 복사함으로써 한 객체가 변경되어도 다른 객체의 데이터에는 영향을 주지 않는다.

예시

let objA = { id: 1, a: {name : "david"} };
let objB = {...objA};

objA.id=2;
objA['a'].name = "jeff";

console.log("objB--", objB);
console.log("objA--", objA);

출력

objB-- [{ id: 1, name: "jeff" }]
objA-- [{ id: 2, name: "jeff" }]

실제 값을 메모리 공간에 복사했네? 코레가 깊은 복사...? 뭐야 EZ 허네 !!

❌ NOPE ❌

objA id 값을 재할당했으니 깊은 복사라고 생각할 수 있지만 name 은 여전히 jeff 이기 때문에 완벽하게 깊은 복사를 했다고 볼 수 없어 친구야 ..

그럼 완벽하게 깊은 복사를 하려면 어떻게 해야해?? 말해!! 말하라고 !!!!

(ㄴ...놔야... 말을 하지.... 이...일단 놓고 이야기하자... 말해줄게... 말해주면 되잖아 !!!!)

⭐️ 완벽한 깊은 복사 ⭐️

• JSON.parse()/JSON.stringity()
• JSON.stringity 함수를 이용하여 Object 전체를 문자열로 변환한 뒤 다시 JSON.parse 함수를 이용하여 문자열을 Object 형태로 변환한다. 문자열로 변환하는 과정에서 객체에 대한 참조가 사라지며 새로운 객체로 깊은 복사가 가능하다.

예시

let objA = [{ id: 1, name: "david" }];
let objB = JSON.parse(JSON.stringify(objA[0]));
objB.name = "jeff";
console.log("objB--", objB);
console.log("objA--", objA);

출력

objB-- [{ id: 1, name: "jeff" }]
objA-- [{ id: 1, name: "david" }]

솔직히 어려웠다 ... 이거 알고리즘으로 나오면 ... (말을 아끼겠다)
그래도 어떻게 코드가 돌아가는지에 대해 이해했으니까 너무너무 만족 만족 ^_^ 꺄루룽