4. 불변 객체(얕은 복사 , 깊은 복사)

1. 얕은 복사

     - 중첩된 객체에 대해서는 완벽한 복사를 할 수 없다.

        => 중첩된 객체의 경우 참조형 데이터가 저장된 프로퍼티를 복사할 때, 주소값만 복사

     - 바로 아래 단계의 값만 복사 (아래 예제 코드)

//이런 패턴은 어떨까요?
// var copyObject = function (target) {
//     var result = {};

//     //for ~ in 구문을 이용하여, 객체의 모든 프로퍼티에
//     //접근할 수 있습니다.
//     //하드코딩을 하지 않아도 괜찮아요.
//     //이 copyObject로 복사를 한 다음, 복사를 완료한
//     //객체의 프로퍼티를 변경하면 되겠죠?
//     for(var prop in target){
//         result[prop] = target[prop];
//     }
//     return result;
// }

//패턴 적용 모습
var copyObject = function (target) {
    var result = {};
    for(var prop in target){
        result[prop] = target[prop];
    }
    return result;
}
var user = {
    name: "wonjang",
    gender:"male",
};

var user2 = copyObject(user);
user2.name="twojang";

if(user !== user2){
    console.log("유저 정보 변경");
}

console.log(user.name,user2.name);
console.log(user === user2);

 

얕은 복사의 문제점은 아래코드와 같다.

//얕은 복사의 문제
var copyObject = function (target) {
    var result = {};
    for(var prop in target){
        result[prop] = target[prop];
    }
    return result;
}

var user = {
    name: "wonjang",
    urls: {
        portfolio: '~~',
        blog: 'http://blog~~',
        facebook: 'http://facebook~~',
    }
};

var user2 = copyObject(user);
user2.name = "twojang";

//바로 아래 단계에 대해서는 불변성을 유지하기 때문에 값이 달라짐.
console.log(user.name === user2.name); //false

//더 깊은 단계에 대해서는 불변성을 유지하지 못하기 때문에
//값이 같다.
user2.urls.blog = 'http://blog+++';
console.log(user.urls.blog === user2.urls.blog); // true

 

2. 깊은 복사

     - 내부의 모든 값들을 하나하나 다 찾아서 모두 복사하는 방법

     - 재귀적 수행

//위 코드와 이어서 아래에 작성함
//재귀적 수행
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;
}

 

마지막 방법 

 => JSON(=JavaScript Object Notation)을 이용하는 방법도 존재. (적절하지는 않음)