기본형과 참조형에 대해서는 아래 블로그에서 확인할 수 있습니다.
데이터 타입의 종류와 특징 이해하기
값 (Value)값이란 데이터를 의미하며, 이는 특정 맥락에 따라 다르게 해석될 수 있습니다.데이터 맥락: 값은 원시 데이터 (primitive value) 또는 해당 데이터를 감싸는 객체 래퍼(wrapper) 안에 포함된 값
dlawi0108.tistory.com
기본형 데이터:
- 기본형 데이터는 값이 담긴 주소값을 바로 복제합니다.
- 값 자체를 복제하기 때문에 원본이 바뀌지 않으며, 불변성을 유지합니다.
1. 기본형 변수 선언
let name = 'jaeone';
let gender = 'male';
1 - 1. 변수명 저장:
name이라는 변수명이 메모리 주소 1002에 데이터로 저장됩니다.
1 - 2. 데이터 저장 및 확인:
'jaeone'이라는 데이터가 저장된 주소가 있는지 확인합니다.
해당 데이터가 없으면, 메모리 주소 5002에 'jaeone'을 저장합니다.
1 - 3. 변수와 데이터 연결:
name이 저장된 주소 1002에서 'jaeone'이 저장된 주소 5002를 참조합니다
2. 기본형 변수 값 복사
let name1 = name;
2 - 1. 새로운 변수 선언:
name이라는 변수명이 메모리 주소 1004에 데이터로 저장됩니다.
2 - 2. 값 복사:
'jaeone'이라는 데이터가 이미 존재하므로 name1은 주소 5002를 참조합니다.
name1은 name이 참조하고 있는 주소 5002를 동일하게 참조하게 됩니다.
즉, name1도 'jaeone'이라는 데이터를 참조하게 됩니다.
3. 기본형 변수 값 변경
name1 = "jaetwo";
3 - 1. 새로운 데이터 저장:
'jaetwo'라는 새로운 데이터가 메모리의 빈 주소인 5004에 저장됩니다.
3 - 2. 참조 변경:
name1은 이제 메모리 주소 5004을 참조하여 'jaetwo' 데이터를 가리킵니다.
name은 여전히 메모리 주소 5002의 'jaeone' 데이터를 참조합니다.
1. 참조형 변수 선언
let obj1 = {name: 'jaeone', gender: 'male'};
1 - 1. 변수명 저장:
obj1라는 변수명이 메모리 주소 1002에 데이터로 저장됩니다.
1 - 2. 객체 내부의 속성 저장:
'jaeone'이 메모리 주소 5002에 저장되고, 'male'이 주소 5003에 저장됩니다.
1 - 3. 객체 저장 및 주소 할당:
속성명 name은 7103에 저장되며 주소 5002를 참조합니다.
속성명 gender는 7104에 저장되며 주소 5003을 참조합니다.
1 - 4. 객체와 속성 연결:
obj1가 저장된 주소 1002에서 속성명 name과 gender의 메모리 주소 7103과 7104를 참조합니다.
2. 참조형 변수 복사 (얕은 복사)
let obj2 = obj1;
2 - 1. 새로운 변수명 저장:
obj1이라는 변수명이 메모리 주소 1003에 데이터로 저장됩니다.
2 - 2. 객체 참조 복사:
obj1은 obj가 참조하고 있는 메모리 주소 1002를 동일하게 참조합니다.
2 - 3. 객체 내부의 속성 참조:
obj1은 obj와 동일하게, 속성명 name과 gender의 메모리 주소 7103과 7104를 참조합니다.
2 - 4. 객체와 속성 연결:
obj1이 저장된 주소 1003에서 obj가 참조하는 동일한 객체를 참조하게 됩니다. 따라서 obj1과 obj는 모두 동일한 객체를 가리키고 있습니다.
3. 참조형 변수 값 변경
obj2.name = 'jaetwo';
3 - 1. 새로운 값 저장:
'jaetwo'라는 새로운 값이 메모리의 빈 주소 5004에 저장됩니다.
3 - 2. 속성 참조 변경:
obj2의 name 속성은 이제 메모리 주소 5004를 참조하여 'jaetwo' 데이터를 가리킵니다.
obj2와 obj가 동일한 객체를 참조하고 있다면, obj의 name 속성도 동일하게 변경됩니다.
3 - 3. 객체와 속성 연결:
객체의 주소는 변하지 않으며, name 속성의 참조 주소만 5002에서 5004로 변경됩니다.
다른 속성들(gender)의 참조는 변경되지 않고 그대로 유지됩니다.
3. 참조형 변수 복사 (깊은 복사)
obj2 = {name: 'jaetwo', gender: 'male'};
4 - 1. 속성 저장:
'jaetwo' 이라는 값은 기존에 이미 저장된 주소 5004를 재사용할 수 있습니다.
'male'이라는 값은 기존에 이미 저장된 주소 5003를 재사용할 수 있습니다.
4 - 2. 객체와 속성 연결:
obj2는 속성명 name을 새로운 주소 7105에 저장하고, 이 주소는 5004를 참조합니다.
속성명 gender는 주소 7106에 저장되며, 기존 주소 5003을 참조합니다.
4 - 3. 객체와 속성 연결의 독립성:
obj2는 이제 obj와 독립적인 객체로, obj2의 속성 변경은 obj에 영향을 주지 않습니다.
깊은 복사가 필요한 이유
깊은 복사는 중첩된 객체가 포함된 구조에서 각 객체와 배열을 개별적으로 복사하여 원본과 완전히 독립적인 복사본을 생성하기 위해 필요합니다. 얕은 복사는 최상위 객체의 참조만 복사하므로, 중첩된 객체나 배열 내부의 변경이 원본에도 영향을 미칠 수 있습니다. 이러한 이유로 중첩된 객체나 배열을 포함하는 경우, 깊은 복사가 필요합니다.
// 얕은 복사
var copyObject = function (target) {
var result = {};
for (var prop in target) {
result[prop] = target[prop];
}
return result;
};
// 깊은 복사
var copyObjectDeep = function (target) {
var result = {};
if (typeof target === 'object' && target !== null) {
for (var prop in target) {
result[prop] = copyObjectDeep(target[prop]);
}
} else {
result = target;
}
return result;
};