[JavaScript] 변수(variable)란?

변수(Variable)

변수(variable) : 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름
-> 즉, 값을 저장하고 참조하는 메커니즘으로, 값의 위치를 나타내는 상징적인 이름

식별자

식별자(indentifier) : 변수 이름을 식별자라고도 함.
식별자는 값이 아닌 메모리 주소를 기억한다. 즉, 식별자는 메모리 주소에 붙인 이름이다.

변수 선언

변수를 사용하려면 선언이 필수적.
변수 선언 키워드는 var, let, const가 있다.

var name

키워드란?

키워드 : 자바스크립트 엔진(Ex : V8)이 수행할 동작을 규정한 일종의 명령어.
자바스크립트 엔진은 키워드를 만나면 수행해야 할 약속된 동작을 수행함.

변수 선언의 2단계

• 선언 단계 : 변수 이름을 등록하여 자바스크립트 엔진에 변수의 존재를 알림
• 초기화 단계 : 값을 저장하기 위해 메모리 공간을 확보하고, 암묵적으로 undefined를 할당하여 초기화

var 키워드로 선언한 변수는 자동으로 undefined로 암묵적인 초기화가 이루어진다.

변수 호이스팅(variable hoisting)

console.log(name);

var name; // 변수 선언문이 변수를 참조하는 코드보다 뒤에 있다.

위의 코드가 정상적으로 작동하는 이유는,
변수 선언이 코드가 한 줄씩 순차적으로 실행되는 시점인 런타임(runtime)이전에 실행되기 때문이다.

이처럼 변수 선언문이 코드의 맨 앞으로 이동한 것처럼 동작하는 자바스크립트 고유의 특징을 변수 호이스팅(variable hoisting)이라고 한다.
또한, var, let, const, function, function*, class 키워드를 사용하여 선언하는 모든 식별자는 호이스팅된다.

값의 할당

변수에 값을 할당할 때는 할당 연산자 =를 사용한다. 할당 연산자는 우변의 값을 좌변의 변수로 할당한다.

var height
height = 120

// 변수 선언과 할당 동시에 진행
var height = 120

자바스크립트 엔진은 변수의 선언과 할당을 동시에 진행하여도 변수의 선언과 값의 할당을 2개의 문으로 나누어 실행한다.
이 때, 변수 선언과 값의 할당의 실행 시점이 다름을 주의해야 한다

변수 선언은 런타임 이전에 실행되지만, (변수 호이스팅)
값의 할당은 런타임에 실행된다.

// 변수 선언이 먼저 되어 undefined로 초기화됨
console.log(height);

var height;
height = 180;

// 할당된 값 출력
console.log(height)

위의 코드를 실행하면 undefined와 180이 차례대로 출력됨을 확인할 수 있다.
변수 선언이 런타임 이전에 실행되어(변수 호이스팅) undefined로 초기화된 이후,
런타임동안 값의 할당이 실행되어 추후 할당된 값이 출력되는 것이다.


이 때, 메모리 상에서는 변수에 값을 할당한다고 해서 undefined가 있던 메모리 공간을 지우고 해당 메모리 공간에 새로운 할당 값을 저장하는 것이 아닌, 새로운 할당 값을 위한 메모리 공간을 확보한 이후 그 곳에 새 할당 값을 저장한다
이후, 기존 값이 있던 메모리 공간은 가비지 컬렉터에 의해 메모리에서 해제된다
(단, 어떠한 식별자도 참조하고 있지 않을 때)

변수의 재할당

var 키워드로 선언한 변수는 값을 재할당할 수 있다.
위에서 봤듯이, var 키워드로 선언한 변수는 선언하면서 undefined로 초기화되기 때문에 값을 할당하는 것도 재할당이다.

만약, 값을 재할당할 수 없어서 변수에 저장된 값을 변경할 수 없으면 상수(constant)라고 한다.

const height = 180 // const 키워드를 통해 선언된 변수는 재할당이 금지된다.

변수에 값을 재할당할 때에도, 메모리 상에서는 할당에서 살펴보았던 현상이 나타나게 된다.
변수에 값을 재할당한다고 해서 기존 값의 메모리 공간에 덮어씌우는 것이 아니라, 새로운 할당 값을 위한 메모리 공간을 확보한 이후 그 곳에 새 할당 값을 저장한다
이후, 기존 값이 있던 메모리 공간은 가비지 컬렉터에 의해 메모리에서 해제된다
(단, 어떠한 식별자도 참조하고 있지 않을 때)

Reference : 모던 자바스크립트 deep dive(이웅모 지음, 위키북스)