JS 원시형과 참조형의 차이

https://webclub.tistory.com/638

JS Basics #1 - JS 기본형과 참조형 차이점 정리

 

 

 

*/
let키워드인 a 선언합니다.
a에 원시형인 숫자(10)를 할당한다.
이 때, a의 메모리 주소는 100번지로 가정합니다.
*/
let a = 10;


/*
a에 20을 재할당(대입)합니다.
이 때, 100번지 주소에 새로운 값을 할당하는 것이 아니라
새로운 값 20을 저장할 새로운 메모리 주소(200번지)가 할당되고
변수 a는 이제 새로운 메모리 주소(200번지)를 가리키게 됩니다.
*/
a = 20;


/*
참조형 객체는 다르게 동작합니다.
객체 자체는 메모리의 특정 주소에 저장되고, 변수는 그 객체의 참조(주소)를 저장합니다.
즉, 잠조형 객체는 주소인 300번지를 저장합니다.
b --> [300번지] { b1: 10, b2: 20 }
*/
let b = {
  b1: 10,
  b2: 20
};

/*
객체의 속성을 변경해도 b의 메모리 주소는 변경되지 않습니다.
b는 여전히 300번지를 가리키며, 객체의 속성 값만 변경됩니다.
*/
b.b1 = 30;


/*
하지만 객체의 참조를 변경(재할당)하면
새로운 값을 저장할 새로운 메모리 주소(400번지)가 할당되고
b는 새로운 메모리 주소(400번지)를 가리키게 됩니다.
b --> [400번지] { b1: 40, b2: 50 }
*/
b = { b1: 40, b2: 50 };

위를 통해 const 키워드에서 재할당 상황도 알아봅시다.

/*
const 키워드 변수는 재할당(대입)이 불가능합니다.
즉, 새로운 메모리 주소를 할당하고 변수가 가르키는 메모리 주소를 변경할 수 없습니다.

아래 코드에서 const a = 10; 실행 시 a의 메모리 주소 100번지가 할당되고
100번지에 10이라는 원시형 값을 담게됩니다.
하지만 재할당 시 const 키워드 변수이기 때문에 오류가 발생합니다.
따라서 새로운 메모리 주소 할당과 변수가 가르키는 주소의 변경이 금지됩니다.
*/
const a = 10;
a=20; // 오류 발생!



/*
아래 코드에서 b의 메모리 주소 200번지가 할당됩니다.
참조형 객체의 값 변경(b.b1=20;)에서는 객체의 메모리 주소는 변하지 않기 때문에 오류가 발생하지 않습니다.
하지만 객체의 재할당에서는 변수가 새로운 객체의 메모리 주소를 참조하게 되므로 const 키워드의
재할당 금지 규칙에 의해 오류가 발생합니다.
*/

const b = {
	b1:10,
    b2:20
};

b.b1 = 20; // 가능

// 오류 발생!
b = { 
	b3:30
    b4:40
};