1. Shallow Copy & Deep Copy(얕은 복사와 깊은복사)
- 예시 1.
let Me = {
name : "창모" ,
//객체 안의 객체 _ 중첩된 객체
info : {
nickname : "알아서 뭐하게",
mbti : "ENFJ",
position : "프론트엔드"
}
}위의 Me라는 객체를 friend라는 변수에 복사해서 가지고 왔다고 해보자.
복사한 friend 객체의 값들을 바꾸고 콘솔을 통해 원본과 사본의 값을 비교해보자,
- 예시 2.
// Me 객체 복사해오기
let copyObject = function(target){
//복사한 값들을 넣을 빈사본객체 생성
let result = {}
// 객체의 프로퍼티를 순회하며 복사해오기
for(let key in target){
result[key]=target[key]
}
return result;
}
let friend = copyObject(Me)
// 사본 객체의 name 바꾸기
friend.name = "예봄"
friend.info.position = "백엔드"
//콘솔로 원본과 사본의 프로퍼티 비교
console.log(friend.name , Me.name)
// friend.name = "예봄" , Me.name = "창모"
console.log(friend.info.position , Me.info.position)
//friend.info.position = "백엔드" , Me.info.position = "백엔드"위의 콘솔을 보면 뭔가 이상하다.
friend.name은 바꾸어도 원본이 바뀌지 않는데,
friend.info(객체안의 객체).position은 사본을 바꾸었더니 원본도 바뀌었다.
- 이러한 현상이 발생하는 이유 :
- friend.name 과 Me.name 이 가르키는 메모리 주소가 달라 friend.name의 변경이 Me.name에는 적용이 되지 않는다.
- friend.info.position 과 Me.info.position 은 서로 가르키는 메모리 주소가 같아 같은 주소를 참조하기 때문에 동일하게 바뀐다.
2. 얕은 복사
얕은 복사는 중첩객체의 값을 참조해오는 것으로, 할당된 value 자체를 복사해 새로 할당하는게 아닌 값의 메모리 주소를 참조해온다.
참조자료형은 동적으로 크기가 변하는 데이터를 보관하기 위해 변수가 아닌 다른 곳에 데이터를 저장하고,
변수에는 그 주소만 할당한다.
얕은 복사도 이처럼 주소를 참조해온다.🤓
3. 깊은 복사
깊은 복사는 얕은 복사와 반대로 원본 객체에 할당된 value 자체를 복사해 사본객체에 새로 할당해준다.
따라서 사본을 수정해도 메모리 주소가 서로 다르기 때문에 원본이 수정되지 않는다.
쉽게생각하면, 깊은 복사는 친구의 공책에 적힌 필기를 자기 공책에 베끼고
자기공책의 내용을 수정해도 원본공책은 바뀌지않는 것과 같고
얕은 복사는 내 공책에 친구 공책이 있는 위치만 옮겨적은 거라
수정하는 명령을 내리면 javscript가 제 공책에 적힌 친구 공책 위치로 가서
직접 친구공책을 수정하는 것과 같다.
4. 깊은 복사를 하는 방법
- JSON 객체의 메소드 이용
const obj1 = {
a: 1,
b: "string",
c: {
name: "Leon",
age: "29"
}
};
// Deep Copy 방법
const obj2 = JSON.parse(JSON.stringify(obj1));- 커스텀 재귀 함수 사용
function cloneObject(obj) {
var clone = {};
for (var key in obj) {
if (typeof obj[key] == "object" && obj[key] != null) {
clone[key] = cloneObject(obj[key]);
} else {
clone[key] = obj[key];
}
}
return clone;
}- lodash의 cloneDeep()사용
const original = { a: { b: 2 } };
let copy = _.cloneDeep(original);
copy.a.b = 100;
console.log(original.a.b); //2일단은 이러한 방법이 있다는 것만 알아보자..
Developer