배열의 얕은 복사(Shallow copy) & 깊은 복사(Deep copy)

개발을 하는데, 논리적으로는 분명히 맞는데, 왜 안될까 안될까 하다가

얕은 복사와 깊은 복사라는 개념이 있다는 것을 주임님에게 들어 알게 되었다. 

개발 중에 두 배열이 있었는데, 

한 배열은 그 객체 값이 변하면 참조되는 객체 값 또한 변했는데,

다른 배열은 그 객체 값이 변했음에도 참조되는 객체 값은 변하지 않아서 

'하나는 참조 값이 바뀌는데 왜 다른 하나는 안 바뀌지'라고 계에에에에속 고민했다.

왜냐면 얕은 복사, 깊은 복사의 개념을 몰랐으니까.

그래서 정리!

얕은 복사 & 깊은 복사

1. 얕은 복사란?

얕은 복사는 배열을 복사하지만 복사한 객체가 바뀌면 참조되고 있는 배열 또한 변한다.

안고 있는(?) 객체가 안겨있는(?) 객체의 값에 영향을 준다는 의미이다.

var firstValue = [1,2,3,4];
var shallowCopyArray = firstValue;
 
shallowCopyArray[0] = 'hello';
 
console.log(shallowCopyArray); // 결과값: ["hello",2,3,4]
 
 

요렇게 배열의 0번째 값이 변해버린닷.

2. 깊은 복사란?

복사한 객체가 변한다고 참조되고 있는 배열이 영향을 받지 않는다.

서로 마이웨이란 것이다.

    
var firstValue = [1,2,3,4];
var deepCopyArray = newObj(firstValue);
 
function newObj(param){
    var result = [];
        
    $.each(param, function(idx, item){
            result[idx] = param[idx];
    });
 
    result[0] = 'hello';
    return result;
};
 
console.log(JSON.stringify(deepCopyArray)); // 결과값: ["hello", 2,3,4]
console.log(JSON.stringify(firstValue)); // 결과값: [1,2,3,4]
 
    });

깊은 복사를 하려면 새 객체를 만들어서 원본 객체에 반복문을 돌려 일일이 값을 복사해야 한단다.

그러면 깊은 복사. 즉, 참조되는 값과 참조하는 값 사이에 단절이 된다!