[자바스크립트] 깊은복사(deep copy) 얕은복사(shallow copy)

📌  객체 복사 문제점 (아래 그림을 보며 이해) 

---

아래와 같이 복사하는 경우 주솟값이 복사된 거지 값이 일일이 복사되지 않아 admin의 속성값을 변경했음에도 user의 속성값이 변경하는 현상이 발생한다.

let user = {
    name: "ahn",
    age: 27
}

//객체 복사 문제점: 주솟값이 복사되는 거지 일일이 복사되는 것이 아니다.!
 let admin = user;
 user.name = 30;
 
 // 주솟값이 복사되어 user를 변경했음에도 admin이 변경되는 문제

 

 

📌  얕은 복사(Shallow Copy)를 통한 위와 같은 현상 방지 (3가지)

---

 

//얕은복사 1. for loop

let admin = {};

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


//얕은복사 2. Object.assign
let admin = Object.assign({}, user);


//얕은 복사 3. ...
let admin = { ...user }; //user에 있는 모든 걸 나열해서 복사해주는거

 

 

📌  얕은 복사(Shallow Copy)의 문제점: 객체안의 객체가 있는 경우!!

---

아래 그림과 코드에서 볼 수 있다시피 객체 안의 객체가 있는 경우 얕은 복사로 인해 객체안의 객체는 주솟값만 복사된 채 위의 그냥 복사한 결과랑 비슷한 현상이 나타나는데!!

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

let admin = Object.assign({}, user2);

admin.sizes.weight++;
admin.sizes.height;

// 객체 내 또 다른 객체가 있다면 복사되지 않음 
console.log(admin.sizes.weight);
console.log(admin.sizes.height);
console.log(user.sizes.weight);
console.log(user.sizes.height);

 

 

📌  깊은 복사(Deep Copy)로 해결 ( 2가지 방법)

---

//깊은 복사 1. JSON.parse(JSON.stringify(객체)) : string화 한 후 JSON 형태로 파싱

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


let admin = JSON.parse(JSON.stringify(user));


//깊은 복사 2. 객체 for-loop
function copyObj(obj) {
    let result = {};
    for (let key in obj) {
    	// 재귀함수를 통한 속성: 속성값 복사
        if (typeof obj[key] === "object") result[key] = copyObj(obj[key]);
        //속성: 속성값 복사
        else result[key] = obj[key];
    }
    return result;
}

let admin = copyObj(user);

admin.sizes.weight++;

console.log(admin.sizes.weight);
console.log(user.sizes.weight);

 

 

실무에서 그리드의 정보를 가져와 데이터를 핸들링하는 경우  깊은 복사와 얕은 복사가 쓰이는 일이 빈번히 쓰인다.