본문으로 건너뛰기

변수

정의

값을 저장하기 위해 확보한 메모리 공간 또는 그것을 식별하기 위해 붙은 이름을 말한다.

var result = 1 + 2

위 이미지에서도 알 수 있듯 값의 위치를 가리키는 상징적인 이름이다. 변수명은 식별자라고도 한다.

식별자는 어떤 값을 유일하게 구별 및 식별할 수 있는 고유한 이름을 말한다.

var x = 10 // 대입, 할당, 저장

if (x === 10) {
// 참조
console.log(x)
}

위처럼 식별자를 선언하고 값을 넣는 것을 변수에 값을 대입한다, 할당한다 또는 저장한다라고 하고 선언된 값을 이용하는 것을 참조한다고 한다.

선언

변수 선언은 값을 저장하기 위한 메모리 공간을 확보하고 변수명과 메모리 공간의 주소를 연결하여 값을 저장할 수 있게 준비하는 것이다.

변수를 선언할 때는 var, let, const 키워드를 사용한다. ES5 이전에는 var 키워드만이 존재했지만 ES6부터는 var의 단점을 막기 위해서 let, const가 도입되었고 이들의 사용이 권장된다.

자바스크립트 엔진에서는 변수 선언을 두 단계에 걸쳐 수행한다.

  • 선언: 변수명을 등록해서 엔진에 변수의 존재를 알림.
  • 초기화: 값을 저장하기 위한 메모리 공간을 확보하고 암묵적으로 undefined를 할당해서 초기화.

호이스팅

console.log(num) // undefined
var num

위 상황에서는 참조 에러가 발생하지 않고 undefined가 출력된다. 변수 선언이 코드를 한줄한줄 실행되는 런타임보다 이전 단계에서 먼저 수행되기 때문이다.

자바스크립트 엔진은 코드의 순차적 실행에 앞서 코드 평가를 하면서 코드 실행을 준비하는데 이것은 다른 챕터에서 살펴보도록 하자.

결과적으로 변수 선언의 위치와 상관없이 다른 코드들보다 먼저 실행된다고 볼 수 있다. 이렇게 변수 선언이 코드 맨 위쪽으로 끌올한 것처럼 동작하는 특징을 호이스팅이라고 한다.

할당

위에서 말했듯 변수 선언은 런타임 이전에 실행되나 값의 할당은 런타임에 실행된다.

var x = 10

위 예시처럼 선언과 할당을 한 문장으로 표현해도 엔진에서 선언과 할당을 따로 나누어 실행한다.

var num
num = 10
num = 20

위처럼 재할당을 하는 경우에는 새로운 메모리 공간을 확보한 후 거기에 10, 20을 저장하고 변수명은 그 메모리 주소를 가리킨다. 이전 값이 저장된 주소에서 계속 값이 덮어씌어지거나 바뀌는 것이 아니다.

값을 재할당 할 수 없는 변수를 상수라고 하는데 이는 변수명이 가리키는 메모리 주소를 바꿀 수 없음을 말한다. const 키워드를 통해 상수를 선언할 수 있다.