Fall in IT.

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

프로그래밍언어/Javascript & Typescript

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

D.Y 2019. 12. 15. 13:31
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

안녕하세요.

 

오늘은 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

 

0 Comments
댓글쓰기 폼