[Javascript] object-copy

더 자세한 object-copy 설명 보기

원시형 복사

자바스크립트의 원시값(String, Number, Boolean 등)을 복사했을 때는 원본과 복사본이 서로 영향을 미치지 않는다.

let msg1 = "hello!"
let msg2 = msg1

console.log(`msg1: ${msg1} msg2: ${msg2}`);
//msg1: hello! msg2: hello!

msg1 = "hello world!"

console.log(`msg1: ${msg1} msg2: ${msg2}`);
//msg1: hello world! msg2: hello!

그렇다면 객체를 복사하면 어떻게 될까?

객체 참조 (깊은 복사)

const user = {
    name:"san"
}

const admin = user

console.log(user.name);

admin.name = "ha"

console.log(user.name);
console.log(admin.name);

자바스크립트가 객체를 복사할 때는 객체의 값이 아니라 객체가 가르키고 있는 주소를 복사한다.
보기엔 서로 다른 객체지만 사실상 각각 동일한 객체에 대한 참조를 저장하는 두 개의 변수다.

같은 주소를 참조하기 때문에 비교시에도 같게 나온다.

const obj1 = {}
const obj2 = obj1
const obj3 = {}

console.log(obj1 == obj2); // true
console.log(obj1 == obj3); // false

객체 복사 (얕은 복사)

그렇다면 주소값이 다른 객체를 복사하려면 어떻게 해야할까?

새로운 객체 생성 및 반복문

const user = {
    name: "sanha",
    age: 99
}

const admin = {}

for (const key in user) {
    admin[key] = user[key]
}
console.log(`admin.name: ${admin.name} admin.age: ${admin.age}`) 
// admin.name: sanha admin.age: 99
console.log(user == admin);
// false

주소값이 다른 객체를 생성한 후 for in 문을 통해 원본 객체의 값을 하나씩 복사본에 넣어주는 방법이다.

Object.assign 메소드

const user = {
    name: "sanha",
    age: 100
}

const admin = Object.assign({},user)

console.log(`admin.name: ${admin.name} admin.age: ${admin.age}`) 
// admin.name: sanha admin.age: 99
console.log(user == admin);
// false

첫번째 인자에 복사할 대상을 넣고 그 뒤에는 복사하거나 합치고 싶은 객체를 넣으면 된다.