변수 복사 과정은 어떻게 진행될까?

let a ='abc'

(일반형 데이터) 변수 선언 과정에서 메모리에서 어떤 일이 일어나는지 간단하게 살펴보자

1. 변수를 선언하는 순간 변수 영역에 빈공간을 확보하고 해당 공간에 식별자 a를 지정한다.
2. 데이터 영역에 빈공간을 확보하고(해당 문자열이 없다면) 문자열 'abc'를 저장한다
3.변수 영역에서 a의 식별자를 검색한 후 저장한 문자열의 데이터 주소를 a식별자 공간에 대입한다.

let obj = {
	a: 10,
    b: 'aaa'
}

참조형 데이터를 변수에 할당하는 과정은 약간의 차이가 있다. 여러개의 프로퍼티로 이뤄진 데이터 그룹이므로 저장하기 위해 '객체의 변수 영역'이 존재하고있다. 

 

 

위에서 보듯 우리가 익히 아는 식별자 안에 데이터를 넣는게 아닌 각각 따로 저장을 한 뒤 이어주는 식으로 데이터를 할당한다.

 

🤔 그렇다면 변수 복사를 하면 메모리안에선 어떤 일이 일어날까?

기본형 데이터와 참조형 데이터로 나누어 비교해보자

📍 일반형 변수 복사

let a = 10;
let b = a;
console.log(b) // 10
console.log(a === b) // true

일반형 변수 복사 과정은 굉장히 간단하다 먼저 아래 그림처럼 10의 데이터를 가진 변수 a 가 있다고 해보자

새로운 b 변수를 선언하면 변수영역의 빈공간인 @1002를 확보하고 식별자를 b로 지정한다. a의 변수를 복사하고 싶다면 이후 @1002 의 값에 a와 같은 데이터 주소인 @5001을 넣어주면된다.

만약 여기서 변수b 에 데이터 20을 할당하면  b의 값이  a와 달라지므로 콘솔에 a === b를 찍어보면 false 를 반환한다.

기본형 데이터가 '불변값' 이라 불리는 이유

📍 참조형 변수 복사

let obj1 = {
	a: 10,
    b: 'aaa'
 }
 let obj2 = obj1;
 console.log(obj2) // {a: 10, b: 'aaa'}
 console.log(obj1 === obj2) // true

참조형 변수 복사 또한 일반형 변수 복사

와 큰 차이는 없다. 먼저 아래 그림처럼 선언과 할당이 완료된 obj1 가 있다.

let obj2 = obj1 데이터를 할당 하면 먼저 빈 공간 @1002 을 확보하고 식별자를 obj2 로 지정한다. 이후 obj1를 검색해 @1002의 값인 @5001을 @1002에 값으로 대입한다.

현재 객체 obj1과 obj2는 같은 객체의 변수 영역을 공유 하므로 한 객체의 프로퍼티의 값이 변하더라도 둘 다 변하게 된다.

참조형 데이터가 '가변값' 이라 설명할 때의 '가변'은 참조형 데이터 자체를 변경할 경우가 아니라 프로퍼티를 변경할 때 만 성립된다.

obj1.a = 20;
console.log(obj2) // {a: 20, d: 'aaa'}

✅ 보통 자바스크립트 책에서 기본형은 값을 복사하고 참조형은 주솟값을 복사한다곤 하지만 사실은 어떤 데이터 타입이든 변수에 할당하기 위해서는 주솟값을 복사한다. 단, 기본형은 복사 과정이 한번이지만 참조형은 한 단계를 더 거친다는 차이점이 있다.

 

 

🤔 만약 프로퍼티는 모두 같지만 완전 새로운 객체를 생성하고 싶다면?

새로운 객체를 생성한 후 for in문을 통해서 안의 데이터들을 복사해서 넣는다.
*for in 문: 상속된 열거 가능한 속성들을 포함하여 객체에서 문자열로 키가 지정된 모든 열거 가능한 속성에 대해 반복

let obj1 = {a: 10, b: 'aaa'};

let obj2 = {}; // 빈 객체 생성
for(let key in obj1){ // 객체 obj1 의 key들을 순회
	 obj2[key] = obj1[key]; // key a와 b가 순차적으로 obj2로 데이터 할당
}

console.log(obj2) // {a: 10, b: 'aaa'}

위의 그림에서 보이듯 둘은 프로퍼티 값들만 같은 주소값을 공유할뿐  obj1 과 obj2는 다른 '객체의 변수 영역'을 가지고 있어 서로의 변화에 영향을 끼치지 않는다.

console.log( obj1 === obj2 ) // false