[자바스크립트] 모던 자바스크립트 딥 다이브 4장 변수 내용 정리

4.1 변수란? 사용하는 이유?

변수의 뜻

1. 값을 저장하기 위해 확보한 ’메모리 공간 자체'
2. 또는 1번의 메모리 공간을 식별하기 위해 붙인 이름

사용하는 이유

• 값을 저장하여 재사용 하기 위해
• 값의 저장은 메모리에 저장하고, 연산은 cpu에서 한다.

4.2 식별자

식별자는 원하는 값을 구별, 식별 할 수 있는 고유의 이름을 뜻하며, 식별자는 메모리 주소를 저장하고 있다.

• 식별자의 종류: 변수명, 함수명, 클래스명 등
• 식별자 네이밍 규칙을 준수해야 하는 이유: 연산자 기호가 포함되어 있는 경우 자바스크립트 엔진이 식으로 판단하는 경우가 있음.

4.3 변수 선언

• 변수를 선언 한다는 것: 해당 식별자를 저장할 메모리의 주소값을 확보하는 것

변수의 생성과정

1. 값을 저장하기 위한 메모리 공간 확보
2. 변수 이름과 확보된 메모리 공간의 주소를 연결(name binding)
3. 값을 저장할 수 있도록 준비

var 키워드의 변수 생성 과정

1. 선언 & 초기화(undefined)
2. 할당

let 키워드의 변수 생성 과정

• TDZ: 스코프 시작지점부터 초기화 시작지점(변수 선언문)까지

1. 선언 - 런타임 이전에 먼저 선언됨.
2. 초기화 - 변수 선언문
3. 할당

const 키워드의 변수 생성 과정

1. 선언 & 초기화

• const는 선언과 초기화가 반드시 동시에 이루어져야 한다. 따라서 선언 이전에 접근시 식별자의 선언은 런타임 이전에 먼저 실행되므로 호이스팅은 일어난 상태이지만 초기화가 실행되지 않았으므로 접근이 불가능함을 알리는 에러 발생.

4.4 변수 선언의 실행 시점과 변수 호이스팅

선언 이전에 호출할 경우:

1. var: 선언되면서 자동으로 undefined가 할당(초기화)되어진 상태이므로 undefined 반환.
2. let, const: 호이스팅은 일어나지만 TDZ에 걸려 참조에러 발생.

변수만 호이스팅 되는게 아님. 변수, 함수, 클래스 등 var, let, const, function, function*, class 키워드로 선언하는 모든 식별자는 호이스팅됨.

TDZ

TDZ 내에서 변수에 접근 시 에러 발생: ReferenceError: Cannot access '변수명' before initialization

• TDZ의 정의: **'스코프’**의 시작 지점부터 초기화 지점까지의 영역
• var: 함수 스코프 이므로 함수가 아닌 조건문, 반복문 등에서 선언된 변수도 외부에서 접근이 가능하나 함수 안에서 선언된 변수는 외부에서 접근 불가능.
• let, const: 블록 스코프 이므로 함수, 조건문, 반복문 등 {}코드블럭 내에서 선언된 변수는 외부에서 접근 불가능.(ex: for문 밖에서 i에 접근하려고 하면 정의되지 않음을 알리는 에러 메세지 발생.)

값의 할당과 재할당

할당

자바스크립트 엔진은 변수 선언과 동시에 값을 할당하더라도(하나의 문으로 단축 표현) 변수 선언과 값의 할당을 2개의 문으로 나누어 각각 실행.

1. 변수 선언: 런타임 이전에 실행
2. 값의 할당: 런타임에 실행

var num = 10; // 이 코드는 실제로 아래와 같이 동작한다.

var num; // undefined 할당
num = 10; // 10으로 재할당

런타임

런타임: 소스코드가 한 줄씩 순차적으로 실행되는 시점

재할당

• 동작: 이전 값이 저장된 메모리 공간은 그대로 있고 새로운 메모리 공간에 새로 할당한 값을 저장.
• 쓰레기 값: 변수에 값이 재할당되어 불필요해진 이전에 할당한 값. 이 값들은 가비지 콜렉터에 의해 메모리에서 자동 해제된다.

변수에 값을 할당 시 원시타입과 참조타입의 메모리에 저장되는 값 비교

• 원시타입: 메모리 공간에 실제 값이 저장.
• 참조타입: 메모리 공간에 참조 값이 저장.

처음 자바스크립트를 공부하면서 변수에 값이 저장된다라고 단순하게 알고 있어 혼동이 있었음.

‘값’ 자체가 저장되는 곳은 메모리 공간이며, 변수와 매핑되는 것은 해당 변수에 할당한 값이 ‘저장된 메모리의 주소’이다.(식별자는 값이 아니라 메모리 주소를 기억하고 있다.)

---

이해가 필요한 부분

• 초기화와 할당의 차이
• 실행컨텍스트, 스코프
• var도 tdz가 있음
• 메모리 누수