[모던 자바스크립트 Deep Dive] 4장 변수

J·2023년 6월 22일

모던 자바스크립트 Deep Dive 복습

목록 보기

1/15

프로그래밍 언어는 기억하고 싶은 값을 메모리에 저장하고, 저장된 값을 읽어 들여 재사용하기 위해 변수라는 메커니즘을 제공.
변수는 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름을 말함. 즉, 값의 위치를 가리키는 상징적인 이름.
- 메모리?
  데이터를 기억하는 공간. 데이터를 저장할 수 있는 메모리 셀의 집합체. (1메모리셀: 1byte = 8bit)
예를 들어 보자, 10 + 20은 연산을 통해 새로운 값 30 생성. 30은 메모리 공간에 저장되며 이 값을 재사용할 수 있도록 값이 저장된 메모리 공간에 상징적인 이름을 붙인 것이 변수.
```
var result = 10 + 20;
   
// result: 변수 명
// 30: 변수 값
// 변수에 값을 저장하는 것: 할당
// 변수에 저장된 값을 읽어 들이는 것: 참조
```

변수를 생성하는 것. 별수를 사용하려면 반드시 선언이 필요함.
변수 선언의 3가지 키워드. var, let, const
변수 선언의 단계
- 선언: 변수 이름을 등록해 자바스크립트 엔진에 변수의 존재를 알림.
- 초기화: 값을 저장하기 위한 메모리 공간을 확보하고 암묵적으로 undefined를 할당해 초기화.

var 키워드를 사용한 변수 선언은 선언, 초기화 단계가 동시 진행됨.

var score;
// 선언 단계를 통해 변수 이름 score 등록
// 초기화 단계를 통해 score 변수에 암묵적으로 undefined 할

자바스크립트 엔진은 변수 선언을 포함한 모든 선언문을 소스코드에서 찾아내 먼저 실행함. 아래 코드를 보면 ReferenceError가 아닌 undefined가 출력됨.
```
console.log(score); // Output: undefined
   
var score; // 변수 선언문
```
이처럼 변수 선언문이 코드의 선두로 끌어 올려진 것 처럼 동작하는 자바스크립트 고유의 특징을 호이스팅이라고 함. 변수 선언 뿐만 아니라 var, let, const, function 등의 키워드를 사용해 선언하는 모든 식별자들은 호이스팅 됨. 모든 선언문은 런타임 이전 단계에서 먼저 실행되기 때문.

값을 먼저 할당하고, 변수를 선언하면? 결과는 같다. 왜? 호이스팅!

console.log(score); // Output: undefined
   
score = 80;
var score;
   
console.log(score); // Output: 80

변수에 값을 할당할 때는 이전 값 undefined가 저장되어 있던 메모리 공간을 지우고 그 메모리 공간에 할당 값 80을 새롭게 저장하는 것이 아니라 새로운 메모리 공간을 확보하고 그곳에 할당 값 80을 저장함.

이미 값이 할당되어 있는 변수에 새로운 값을 또다시 할당하는 것.
```
var score = 100;
score = 90;
```
var로 선언한 변수는 값을 재할당할 수 있음. 그래서 변수다. variable
값을 재할당할 수 없어서 저장된 값을 변경할 수 없다면 그것은 상수. const
변수를 재할당하면? 기존 메모리 공간을 지우고 재할당 값을 새로 저장하는 것이 아니라 또다시 새로운 메모리 공간을 확보하고 그 메모리 공간에 저장함.
위 그림을 보면 이전 값인 undefined와 80은 어떤 변수도 값으로 갖고 있지 않음. 이러한 불필요한 값들은 가비지 콜렉터에 의해 메모리에서 자동 해제됨. 언제 해제될지는 예측할 수 없음.
- 가비지 콜렉터?
  애플리케이션이 할당한 메모리 공간을 주기적으로 검사하여 더 이상 사용되지 않는 메모리를 해제하는 기능. 자바스크립트는 가비지 콜렉터를 내장하고 있는 언어로 이를 통해 메모리 누수를 방지함.

벨로그로 이사 중