[자바스크립트] 객체A에서 객체B를 복사 후 객체 B의 특정 프로퍼티 삭제

 

객제A의 값을 객체B에 전체 복사해서 사용하되 특정 변수는 빼고 사용 하고 싶을때가 있다.

 

그럴때 단순히 = 대입연산자를 사용하여 처리하면 서로 다른 객체 A와 B가 같은 곳을 참조 하고 있기 때문에

둘 중 하나의 객체 값만 변경되도 둘 다 영향을 받는다. 

[ 1. 영향 받는 코드 ]

let objA = {
    id:"testID",
    pw:"testPW1234!"
};

let objB = objA;

console.log("objA:"+JSONbig.stringify(objA));
console.log("objB:"+JSONbig.stringify(objB));

// delete 연산자를 사용하여 프로퍼티 삭제
delete objB.pw; 

// 둘다 삭제됨!
console.log("objA:"+JSONbig.stringify(objA));
console.log("objB:"+JSONbig.stringify(objB));

 

[ 결과 ]

 

보면 objB의 pw 프로퍼티를 삭제 했지만 objA도 같이 영향을 받는다. 

 

어떻게 하면 각기 영향받지 않고 없앨수있을까?

---

 

내가 찾은 답은 Object.assign()을 사용하는 것이다. 

Object.assign()를 사용하면 A -> B로 프로퍼티를 복사하고 복사된 대상 객체를 반환 받는다. 이때 대상 객체의 메모리 공간은 변경되지 않고 유지된다. 

 

[ 2. 영향 받지 않는 코드 - 삭제]

let objC = {
    id:"testID",
    pw:"testPW1234!"
};

// Object.assign() 사용하여 프로퍼티 복사 
let objD = Object.assign({}, objC);

console.log("objC:"+JSONbig.stringify(objC));
console.log("objD:"+JSONbig.stringify(objD));

// objD의 pw만 삭제
delete objD.pw;

console.log("objC:"+JSONbig.stringify(objC));
console.log("objD:"+JSONbig.stringify(objD));

 

[ 결과 ]

 

내가 원하는대로 objD의 pw만 삭제 되었다!!

 

---

 

추가로 objD에만 프로퍼티를 추가해도 objC는 영향을 받지 않는다. 

 

[ 3. 영향 받지 않는 코드 - 추가 ]

let objC = {
    id:"testID",
    pw:"testPW1234!"
};

// Object.assign() 사용하여 프로퍼티 복사 
let objD = Object.assign({}, objC);

console.log(objC);
console.log(objD);

// objD의 pw만 삭제
delete objD.pw;

console.log(objC);
console.log(objD);

objD.ninkname ="핫썸머";

console.log(objC);
console.log(objD);

 

[ 결과 ]

 

 

 

※ 코드1과 코드2는 webstorm에서 실행했고, 코드3은 브라우저에서 실행해서 [결과]와 [코드]가 약간 다르다.