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 |
댓글