[JSInfo] 참조 객체 복사

cptkuk91·2021년 10월 3일
0

JSInfo

목록 보기
10/26

원시적인 방법이 참조를 활용해 객체를 저장하고 복사하는 방법이다.

원시값(문자열, 숫자, 불린)을 그대로 저장 후 할당하여 복사하는 방법이다.

ex)

let greeting = "Hello";
let hola = greeting;
console.log(hola); // Hello 출력

객체를 조작할 때는 여러 변수를 사용할 수 있습니다.

let user = {name : 'KJ'};
let admin = user;
admin.name = 'YS';
console.log(user.name); // YS 출력

참조에 의한 비교 (==), (===)은 동일하게 동작합니다.
비교 시 두 객체가 동일한 객체인 경우에 참을 반환하죠.

let a = {}
let b = a;

console.log(a == b);
console.log(a === b);

하지만 두 객체가 같은 값을 할당하고 있어, 동등성을 비교하면 거짓을 반환합니다.

ex)

let a = {};
let b = {};

console.log(a == b);

객체 복사

객체가 할당된 변수를 복사하면 동일한 객체에 대한 참조 값이 하나 더 만들어집니다.
자바스크립트에서는 객체 복제 메서드를 지원하지 않기 때문에 참조에 의한 복사를 사용해야합니다.
(실무에서는 객체 복사를 하는 경우가 적습니다.) 정말 복제가 필요한 상황이라면 새로운 객체를 만들어 기존 객체 프로퍼티들을 순회해 원시 수준의 프로퍼티 복사를 하면 됩니다.

let user = {
    name : 'KJ',
    age : 31
}

let fakeUser = {};

for(let key in user){
    fakeUser[key] = user[key];
}

fakeUser.name = "YS";
console.log(fakeUser);

Object.assign 을 통한 병합, 수정, 복사

ex) 병합

let user = {
    name: "KJ",
    age: "31"
}

let userSex = { sex: "M"};
let userPhoneNumber = { PhoneNumber : "12345678"};

let upgradeUser = Object.assign(user, userSex, userPhoneNumber);

console.log(upgradeUser);
// name: "KJ", age: "31", sex: "M", PhoneNumber: "12345678 반환

위와 같이 Object.assign 을 통해 객체 내 데이터를 병합시킬 수 있다.

ex) 수정

let user = {
    name: "KJ",
    age: "31"
}

Object.assign(user, {name: "YS"});
console.log(user.name, user.age);
// KJ -> YS

ex) 복사

let user = {
    name: "KJ",
    age: "31"
}

let upgradeUser = Object.assign({}, user);
// Object.assign({}, 복사할 객체);
console.log(upgradeUser);

중첩 객체에 대한 복사도 가능합니다.

let user = {
    name: "KJ",
    sizes: {
        shirts: 100,
        pants: 30
    }
};

console.log(user.sizes.shirts); // 100 출력

profile
메일은 매일 확인하고 있습니다. 궁금하신 부분이나 틀린 부분에 대한 지적사항이 있으시다면 언제든 편하게 연락 부탁드려요 :)

0개의 댓글