Javascript 객체 복사(얕은 복사, 깊은 복사)하는 방법

안녕하세요.

 

오늘은 Javascript에서 객체를 복사하는 방법에 대해서 알아보겠습니다.

객체를 복사하는 방법에는 얕은 복사 방법이있고 깊은 복사 방법이 있습니다.

 

얕은 복사와 깊은 복사

얕은 복사란, 객체의 첫 번째 부분만 복사하는 것을 의미합니다.
Object의 내장객체인 assign() 함수를 사용하여 구현합니다.

깊은 복사란, nested한 객체의 모든 하위 객체까지 복사하는 것을 말합니다.
JSON.parse()와 JSON.stringify() 함수를 사용하여 구현합니다.

 

코드

/**
 * 얕은 복사
 * 
 * @param {*} obj 
 */
function shallowObjectCopy(obj)
{
    let copyObj = {};

    Object.assign(copyObj, obj)

    return copyObj;
}

/**
 * 깊은 복사
 *
 * @param {*} obj 
 */
function deepObjectCopy(obj)
{
    return JSON.parse(JSON.stringify(obj));
}

let user =
{
    name: "이두영",
    age: 30,
    etc: {
        nickname: "dylee",
        height: "190"
    }    
};

let shallow = shallowObjectCopy(user);
let deep = deepObjectCopy(user);

console.log('shallow: ', shallow); //expected output: user
console.log('deep: ', deep);    //expected output: user

// 원본 객체의 nickname 변경
user.etc.nickname = "mango";

/**
 * expected output:
 * {
 *      name: "이두영",
 *      age: 30,
 *      etc: {
 *          nickname: "mango",
 *          height: "190"
 *      }
 * }
 */
console.log('user: ', user); //expected output: {... nickname: mango ...};

/**
 * expected output:
 * {
 *      name: "이두영",
 *      age: 30,
 *      etc: {
 *          nickname: "mango",
 *          height: "190"
 *      }
 * }
 */
console.log('shallow: ', shallow);

/**
 * expected output:
 * {
 *      name: "이두영",
 *      age: 30,
 *      etc: {
 *          nickname: "dylee",
 *          height: "190"
 *      }
 * }
 */
console.log('deep: ', deep);

 

참조

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/assign