변수선언 데이터 할당_v3.3

1. 가변값과 가변성(with 참조형 데이터)

참조형 데이터의 변수 할당 과정

// 참조형 데이터는 별도 저장공간(obj1을 위한 별도 공간)이 필요합니다!
var obj1 = {
a: 1,
b: 'bbb,
};

⬇️ 강의를 참고해서 아래 표를 직접 작성해보세요!

변수영역	주소	1001	1002	1003	1004
	데이터	obj/a:7103~
데이터영역	주소	5001	5002	5003	5004
	데이터	1 (가비지컬렉터)	b:'bbb'	2

변수영역 var obj1 별도공간	주소	7103	7104	7105	7106
	데이터	a/a:5001 > 3 (가변:변경됨)	b/a:5002	c

1. 기본형 데이터의 변수 할당 과정과 차이점 : 객체의 변수(프로퍼티) 영역의 별도 존재 여부
2. 참조형 데이터가 불변하지 않다(가변하다)라고 하는 이유

var obj1 = {
a: 1,
b: 'bbb',
};

// 데이터를 변경해봅시다.
obj1.a = 2;

1. 위에 작성해놓았던 표를 토대로 변경 테스트를 해보며 알아봅시다 😉
2. 과정은 아래와 같아요.
   1. 변경할 값인 숫자 2를 데이터 영역에서 검색합니다.
   2. 없네요! 2를 새로 추가하고, 해당 주소(ex : @5003)를 obj1을 위한 별도 영역에 갈아껴줍니다.
3. 데이터 영역에 저장된 값은 여전히 계속 불변값이지만, obj1을 위한 별도 영역은 얼마든지 변경이 가능해요. 이것 때문에 참조형 데이터를 흔히, **‘불변하지 않다(=가변하다)’**라고 합니다.
4. 중첩객체의 할당
   1. 자바스크립트에서 중첩객체란, 객체 안에 또 다른 객체가 들어가는 것을 말해요. 이번 주차 초반에 살펴보았듯이 객체는 배열, 함수 등을 모두 포함하는 상위개념이기 때문에 배열을 포함하는 객체도 중첩객체라고 할 수 있답니다.

var obj = {
x: 3,
arr: [3, 4, 5],
}

// obj.arr[1]의 탐색과정은 어떻게 될까요? 작성하신 표에서 한번 찾아가보세요!

변수영역	주소	1001	1002	1003	1004	1005	...
	데이터	obj/7103
데이터영역	주소	5001	5002	5003	5004	5005	...
	데이터	3	4	5

obj 위한 별도공간	주소	7103	7104	...
	데이터	x/5001	arr/8104~

arr 위한 별도공간	주소	8104	8105	8106	...
		[0]/5001	[1]/5002	[2]/5003

1. 참조 카운트가 0인 메모리 주소의 처리
   1. 참조카운트란 무엇일까요?

객체를 참조하는 변수나 다른 객체의 수를 나타내는 값입니다. 참조 카운트가 0인 객체는 더 이상 사용되지 않으므로, 가비지 컬렉터에 의해 메모리에서 제거됩니다.

2. 가비지컬렉터(GC, Garbage Collector)

더 이상 사용되지 않는 객체를 자동으로 메모리에서 제거하는 역할을 합니다. 자바스크립트는 가비지 컬렉션을 수행함으로써 개발자가 명시적으로 메모리 관리를 하지 않아도 되도록 지원합니다. 자바스크립트 엔진에서 내부적으로 수행되며, 개발자는 가비지 컬렉션에 대한 직접적인 제어를 할 수 없습니다.

✅변수 복사의 비교

1. 우리가 지금까지 작성했던 방법과 상당히 유사합니다. 먼저 기본형 및 참조형 데이터의 선언과 할당을 해보고, 변수 복사까지 진행해봅시다! 강의를 참고하여 역시 표를 작성해주세요 😎

// STEP01. 쭉 선언을 먼저 해볼께요.
var a = 10; //기본형
var obj1 = { c: 10, d: 'ddd' }; //참조형

// STEP02. 복사를 수행해볼께요.
var b = a; //기본형
var obj2 = obj1; //참조형

 

변수영역	주소	1001	1002	1003	1004	1005	...
	데이터	a/5001	obj1/7103~	b/a:5001 5003	obj2/7103~ 8104
데이터영역	주소	5001	5002	5003	5004	5005
	데이터	10	'ddd'	15	20

obj1별도공간	주소	7103	7104	...
	데이터	c/5001 5004	d/5002

1. 복사 이후 값 변경(객체의 프로퍼티 변경)
2. 자, 복사까지는 할만 하셨죠? 기본형과 참조형의 두드러지는 차이는 복사한 후의 값 변경에서 일어나요. 한번 수행하고 표를 작성해 보시면서 어떤 차이가 있는지 찾아보도록 합시다 🔥 (값 변경 부분에 대한 작성도 위의 표에 해주세요!)

// STEP01. 쭉 선언을 먼저 해볼께요.
var a = 10; //기본형
var obj1 = { c: 10, d: 'ddd' }; //참조형

// STEP02. 복사를 수행해볼께요.
var b = a; //기본형
var obj2 = obj1; //참조형

b = 15;
obj2.c = 20;

기본형과 참조형의 변수 복사 시 주요한 절차의 차이점은 다음과 같아요!

• 기본형
  • 숫자 15라는 값을 데이터 영역에서 검색 후 없다면 생성
  • 검색한 결과주소 또는 생성한 주소를 변수 영역 b에 갈아끼움
  • a와 b는 서로 다른 데이터 영역의 주소를 바라보고 있기 때문에 영향 없음
• 참조형
  • 숫자 20이라는 값을 데이터 영역에서 검색 후 없다면 생성
  • 검색한 결과주소 또는 생성한 주소 obj2에게 지정되어 있는 별도 영역(7103~)에 갈아끼움
  • obj1도 똑같은 주소를 바라보고 있기 때문에 obj1까지 변경이 됨
  • 바로 아래와 같은 현상이 생기는 것이죠!

// 기본형 변수 복사의 결과는 다른 값!
a !== b;

// 참조형 변수 복사의 결과는 같은 값!(원하지 않았던 결과😭)
obj1 === obj2;

1. 복사 이후 값 변경(객체 자체를 변경)
2. 만약, 객체의 프로퍼티(=속성)에 접근해서 값을 변경하는 것이 아니라 객체 자체를 변경하는 방식으로 값을 바꾼다면 어떨까요? 아래 예제를 한번 같이 따라가볼까요? 🚀

//기본형 데이터
var a = 10;
var b = a;

//참조형 데이터
var obj1 = { c: 10, d: 'ddd' };
var obj2 = obj1;

b = 15;
obj2 = { c: 20, d: 'ddd'};

⬇️ 강의를 참고해서 아래 표를 직접 작성해보세요!