[JavaScript] 값에 의한 복사, 참조에 의한 복사 ✅

parkheeddong·2023년 5월 1일

JavaScript

목록 보기
10/26
post-thumbnail

1. 값에 의한 복사, 참조에 의한 복사

기본적으로 모든 primitive 값은 copy by value로 값이 저장, 복사된다.

let original = '안녕하세요';
let clone = original;

console.log(original); // 안녕하세요
console.log(clone);    // 안녕하세요

clone = '안녕히 가세요';

console.log(original);  // 안녕하세요
console.log(clone);     // 안녕히 가세요

console.log(original === clone); // false

original -- 0x000001 -> '안녕하세요'
clone ----- 0x000002 -> '안녕히 가세요'

객체는 copy by reference, ‘참조에 의해' 저장되고 복사된다.

객체 변수엔 객체가 그대로 저장되는 것이 아니라, 객체가 저장되어있는 '메모리 주소’인 객체에 대한 '참조 값’이 저장된다.

let originalObj = {
    say: '안녕하세요',
}

let cloneObj = originalObj;

console.log(originalObj);   // { say: '안녕하세요' }
console.log(cloneObj);      // { say: '안녕하세요' }

originalObj['name'] = 'jenny';
console.log(originalObj);   // { say: '안녕하세요', name: 'jenny' }
console.log(cloneObj);      // { say: '안녕하세요', name: 'jenny' }

console.log(originalObj === cloneObj); // true

originalObj -- 0x000001 -> 0x000003
cloneObj ----- 0x000002 -> 0x000003
-------------- 0x000003 -> {say: '안녕하세요',}


2. 스프레드 연산자 ✨

spread 연산자를 사용하면 copy by value로 객체를 복사할 수 있다.

const jenny = {
    name : '제니',
    group : '블랙핑크',
}

const jenny2 = {
    ...jenny,
}

console.log(jenny === jenny2); // false

// spread 연산자를 사용하면 copy by value로 객체를 복사할 수 있다.

const jenny3 = {
    country: 'korea',
    ...jenny,
}

console.log(jenny3);
// { country: 'korea', name: '제니', group: '블랙핑크' }

👀 불변 객체

객체는 참조의 형태로 저장되고, 복사되고, 전달된다.

따라서 원시타입과 달리 객체는 공유가 가능하여, 언제든지 참조된 값이 변경될 수 있다..!

따라서 우리는 객체를 불변객체로 만들어서 (Object.freeze 등으로) 프로퍼티의 변경을 방지하거나, 객체를 변경할 때 새로운 객체를 생성한 후 방어적 복사를 통해 변경하도록 해야 한다.


0개의 댓글