본문 바로가기
TIL

얕은 복사 깊은 복사 다시보기

by 은지:) 2024. 1. 28.
728x90
반응형

 

 

 

 

원시 타입 number, string 등등

참조 타입 arr, obj

 

 

 

원시 타입 값 할당하기

 

let a = 1;
let b = 2;

a = b;

b = 3;

console.log(a) //2

 

a, b 는 주소값을 가지고 있음

 

a = b 할 때

 

b가 가지고 있는 주소로 가서 값을 가져온 다음

샥 복사해서

이건 새로운 메모리 공간에 넣고

이 메모리 공간 주소를 a 에 할당하는 거임

 

그러니까 a와 b는 가지고 있는 메모리 주소가 다름

 

 

 

참조 타입 값 할당하기

 

let arr1 = [1,2]
let arr2 = [3,4]

arr1 = arr2

arr2.push(5)

console.log('arr1',arr1) // [3,4,5]

 

 

배열은 참조 타입이기 때문에

arr1 자체가 arr2의 메모리 주소를 참조하게 만듦 

 

그러니까 arr1 의 메모리 주소와 arr2 메모리 주소가 같음

=> 참조 공유

 

 

a = b 는 얕은 복사, 깊은 복사가 이루어지지 않음

 

 

 

 

 

 

 

얕은 복사 문제

 

let originalArray = [1, 2, [3, 4]];
let shallowCopyArray = [...originalArray];

shallowCopyArray[2][0] = 99;
console.log(originalArray[2][0]); // 99

 

 

shollowCopyArray 라는 변수에 새로운 메모리 공간 만들어서 복사함

근데 depth가 있는 부분은 원본 메모리 주소를 참조함

 

얕은 복사는 최상위의 값만 복사하고

그 외 depth가 있는 값들은 원본의 주소를 참조함

 

그래서 깊은 복사가 필요함

 

let obj = { a: 1, b: undefined, c: 3 };
let jsonString = JSON.stringify(obj);

console.log(jsonString) //'{"a":1,"c":3}'

JSON.parse(jsonString) //{ a: 1, c: 3 }

 

이 방법의 문제는 JSON.stringify() 는 undefined 값 있으면 다 키가 날아감  ㅎㅎ

 

 

 

이게 chatGPT가 보여준 방식

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

    let copy = Array.isArray(obj) ? [] : {};
    for (let key in obj) {
        if (obj.hasOwnProperty(key)) {
            copy[key] = deepCopy(obj[key]);
        }
    }

    return copy;
}

let originalArray = [1, 2, [3, 4]];
let deepCopyArray = deepCopy(originalArray);

 

for 문 돌려서 값 복사해 넣어버리기

 

 

아니면

 

lodash 같은 시중에 나온 라이브러리 쓰기

 

 

 

음 이렇게 보면 그냥 귀찮게 메서드 쓰지 말고

for 문 돌리는 게 짜장인 거 같음

 

 

 

 

 

===========================

 

정리본

 

// 참조 타입, 원시 타입


let num1 = 1;
let num2 = 2;

num1 = num2

console.log("num1",num1) // 2

// => number 는 원시 타입이기 때문에 
// num2의 값을 복사해서 메모리에 넣은 후 그 주소값을 num1에 할당함


let arr1 = [1,2]
let arr2 = [3,4]

arr1 = arr2

arr2.push(5)

console.log('arr1',arr1) // [3,4,5]

// 배열은 참조 타입이기 때문에
// arr1 자체가 arr2의 메모리 주소를 참조하게 만듦 => 참조 공유임


let arr3 = [1,2,[3,4]]
let arr3_1 = [...arr3] // 이때 일어나는 게 얕은 복사

arr3.push(4)

console.log('arr3_1', arr3_1) // [1,2,[3,4]]

arr3[2][1] = 7

console.log('arr3_1', arr3_1) // [1,2,[3,7]]

// 얕은 복사는 depth가 생긴 곳에는 원본을 참조함

 

 

 

 

 

728x90
반응형

'TIL' 카테고리의 다른 글

호이스팅 관련 const, let, var 에러 정리  (0) 2024.02.05
팩토리 패턴  (0) 2024.02.05
자바스크립트 메모리 관리 // 호이스팅, 스코프 체이닝  (2) 2024.01.28
static  (1) 2024.01.28
싱글톤  (1) 2024.01.28

댓글