자바스크립트를 배운지 얼마 안됐다 보니 치명적인 실수를 저질렀다.

결론부터 이야기 하자면 값복사와 참조복사의 차이점을 알지 못해 저지른 실수이다.

값복사(깊은 복사)

값 복사란 말 그대로 다른 변수의 값을 복사해 오는 것이다. 코드를 보자.

let a = 100;
let b = a;
a = 101;
console.log(a); //출력 : 101
console.log(b); //출력 : 100

당연하다고 생각하는가? 나에게도 당연했다 ㅎㅎ 다음은 참조 복사에 대한 예시이다.

참조복사(얕은 복사)

먼저 코드를 살펴보자

let obj = {
    'name' : 'jinhyuk',
    'age' : 26,
    'hobby' : 'soccer'
};
let obj2 = obj;
obj2['name'] = 'babo';
console.log(obj);
console.log(obj2);

위의 코드는 객체를 선언한 후 다른 객체에 그 객체의 값을 복사한 경우이다. 내가 바랬던 것은 obj2에 obj의 내용이 복사되고 obj2를 내가 자유롭게 사용하는 것이었다. 하지만 결과는 다음과 같다.

출력
{ name: 'babo', age: 26, hobby: 'soccer' }
{ name: 'babo', age: 26, hobby: 'soccer' }

obj2는 obj의 주소를 참조 하게 된다. 따라서 obj2의 값을 바꾸게 되면 주소에 있는 값이 바뀌게 되므로 같은 주소를 참조하고 있는 obj의 값도 자연스럽게 바뀌게 된다.

이를 해결하기 위해서는 새로운 객체를 선언하고 반복문을 통해 복사하고 싶은 객체의 값을 새로운 객체에게 부여해주면 된다.

let obj = {
    'name' : 'jinhyuk',
    'age' : 26,
    'hobby' : 'soccer'
};

function copy(obj){
    let returnObj = {'name':"", 'age':0, 'hobby' : ""};
    for(let i in obj){
        returnObj[i] = obj[i];
    }
    return returnObj;
}

let obj2 = copy(obj);
obj2['name'] = 'no babo';
console.log(obj);
console.log(obj2);

출력
{ name: 'jinhyuk', age: 26, hobby: 'soccer' }
{ name: 'no babo', age: 26, hobby: 'soccer' }

더 효율적인 방법이 있을 수도 있으니 궁금하면 검색해보도록 하자.