[JS] 객체의 얕은 복사(Shallow copy)와 깊은 복사(Deep copy)

 

 

 

 

 

✅ 객체 복사의 문제점

object의 값을 복사할 때는 대상 전체가 아닌 object 내 주소 값만 복사되는 문제 발생

가리키는 대상 전체를 복사하는 방법을 얕은 복사(Shallow copy), 깊은 복사(Deep copy)를 통해 가능

 

 

 

🔸 얕은 복사(Shallow copy) - 1

• 반복문 for문을 통한 객체 복사

let user = {
	name: "john",
    age: 23,
};

let admin = {};

// shallow copy
for (let key in user) {
	admin[key] = user[key];
}

admin.name = "park";

console.log(admin.name);	// "park"
console.log(user.name);		// "john"

 

 

 

🔸 얕은 복사(Shallow copy) - 2

• Object.assign()를 이용한 복사

let user = {
	name: "john",
    age: 23,
}

let admin_obj = Object.assign({}, user);

admin_obj.name = "park";
user.age = 30;

console.log(admin_obj.name);	// "park"
console.log(user.name);			// "john"
console.log(admin_obj.age);		// 23
console.log(user.age);			// 30

 

 

 

🔸 얕은 복사(Shallow copy) - 3

• 전개 연산자(Spread Operator)를 이용한 복사

let user = {
	name: "john",
    age: 23,
}

let admin_spread = { ...user };

admin_obj.name = "park";
user.age = 30;

console.log(admin_obj.name);	// "park"
console.log(user.name);			// "john"
console.log(admin_obj.age);		// 23
console.log(user.age);			// 30

 

 

 

✅ 얕은 복사(shallow copy) 문제점

객체 내 또 다른 객체가 있으면, 그 객체는 복사 되지 않음

되도록 객체의 대한 복사를 의도할 때에는, 깊은 복사를 사용하는 것이 좋다.

 

 

---

 

🔹 깊은 복사(Deep copy) - 1

• 재귀 함수를 이용한 깊은 객체 복사

let user = {
	name: "john",
    age: 23,
    sizes: {
    	height: 180,
        weight: 72,
    },
};

function copyObj(obj) {
	let result = {};
    for (let key in obj) {
    	if (typeof obj[key] === "object") result [key] = copy(obj[key]);
        else result[key] = obj[key];
    }
    return result;
}
let admin = copyObj(user);
admin.sizes.weight + 1;
console.log(admin.sizes.weight);	// 73
console.log(user.sizes.weight);		// 72

 

🔹 깊은 복사(Deep copy) - 2

• JSON 객체를 이용한 깊은 복사
• stringify는 객체를 문자열로 변환하는데 이 때 원본 객체와의 참조가 끊김 

let user = {
	name: "john",
    age: 23,
    sizes: {
    	height: 180,
        weight: 72,
    },
};

// user 객체를 string으로 변환했다가, 다시 JS object로 변환
let admin_json = JSON.parse(JSON.stringify(user));

admin.sizes.weight + 1;
admin_json.sizes.height - 1;


console.log(admin.sizes.weight);	// 73
console.log(admin.sizes.height);	// 179
console.log(user.sizes.weight);		// 72
console.log(user.sizes.height);		// 180