다다의 프로그래밍

변수에 객체를 할당하고 아래와 같이 변수를 복사하고 첫번째 할당한 변수의 값을 변경하면, 복사한 변수의 값도 함께 변경 된다.

const user = { name: "lee", age: 20, email: ["test@naver.com"] };
const test01 = user;

console.log(user);
console.log(test01);

user.name = "kim";

console.log(user);
console.log(test01);

결과

{name: 'lee', age: 20, email: Array(1)}
age:20
email:['test@naver.com']
name:"kim"
[[Prototype]]:Object

{name: 'lee', age: 20, email: Array(1)}
age:20
email:['test@naver.com']
name:"kim"
[[Prototype]]:Object

{name: 'kim', age: 20, email: Array(1)}age: 20
email:['test@naver.com']
name:"kim"
[[Prototype]]:Object

{name: 'kim', age: 20, email: Array(1)}
age: 20
email:['test@naver.com']
name:"kim"
[[Prototype]]:Object

객체의 경우 같은 주소를 참조하기 때문에 원래의 데이터의 값이 바뀌면 복제된 변수도 같은 주소를 참조하기 때문에 같은 값이 출력이 된다.

별도의 주소를 할당 받아 데이터를 복제하는 방법으로 두 변수 사이에 영향을 받지 않게 할수 있다.

1. 얕은 복사(shallow copy)

사용법

const user = { name: "lee", age: 20, email: ["test@naver.com"] };

const test02 = Object.assign({}, user);
const test03 = { ...user }; 

user.name = "kim";

console.log(user);
console.log(test02);
console.log(test03);

결과

{name: 'kim', age: 20, email: Array(1)}
age:20
email:['test@naver.com']
name:"kim"
[[Prototype]]:Object

{name: 'lee', age: 20, email: Array(1)}
age:20
email:['test@naver.com']
name:"lee"
[[Prototype]]:Object

{name: 'lee', age: 20, email: Array(1)}
age:20
email:['test@naver.com']
name:"lee"
[[Prototype]]:Object

얕은 복사일 경우 객체 내에 존재하는 변수가 변경이 되어도 복사된 변수에서는 다른 메모리 주소를 사용하기 때문에 값이 변경 되지 않는것을 확일할 수 있다.

하지만 얕은 복사내에 객체 변수가 존재할 경우 내부에 추가하는 값은 변경된다.

const user = { name: "lee", age: 20, email: ["test@naver.com"] };

const test02 = Object.assign({}, user);
const test03 = { ...user }; 

user.email.push("test@gmail.com");

console.log(user);
console.log(test02);
console.log(test03);

결과

{name: 'lee', age: 20, email: Array(2)}
age:20
email:(2) ['test@naver.com', 'test@gmail.com']
name:"lee"
[[Prototype]]:Object

{name: 'lee', age: 20, email: Array(2)}
age:20
email:(2) ['test@naver.com', 'test@gmail.com']
name:"lee"
[[Prototype]]:Object

{name: 'lee', age: 20, email: Array(2)}
age:20
email:(2) ['test@naver.com', 'test@gmail.com']
name:"lee"
[[Prototype]]:Object

얕은 복사일 경우는 복사가 되었더라도 객체 내에 또 객체가 존재할 경우에는 같은 메모리 주소를 참조하고 있기 때문에 값이 변경이 된다.

이런 경우는 lodash에서 제공하는 깊은 복사를 사용하면 된다.

2. 깊은복사(Deep copy)

사용법

const user = { name: "lee", age: 20, email: ["test@naver.com"] };
const test04 = _.cloneDeep(user);

user.email.push("test@gmail.com");

console.log(user);
console.log(test04);

결과

{name: 'lee', age: 20, email: Array(2)}
age:20
email:(2) ['test@naver.com', 'test@gmail.com']
name:"lee"
[[Prototype]]:Object

{name: 'lee', age: 20, email: Array(1)}
age:20
email:(2) ['test@naver.com']
name:"lee"
[[Prototype]]:Object

깊은 복사 일 경우는 객체내에  타입이 객체인 변수가 변경되더라도 복사된 변수의 값이 변경되지 않는것을 알 수 있다.