변수 선언과 할당, 호이스팅

변수란 무엇인가

컴퓨터는 기본적으로 메모리 공간에 데이터를 저장한다. 따라서 데이터를 사용하기 위해서는 해당 대상이 저장된 메모리에 접근해 값을 가져와야 한다. 하지만 대부분의 프로그래밍에서 메모리에 접근해 데이터를 취하는 일은 많지 않을 것이다. 메모리 공간을 식별하기 위해 변수 라는 매커니즘을 사용하기 때문이다. 즉 변수는 하나의 값을 저장하기 위해 확보한 메모리 공간 자체를 의미한다. 우리는 변수를 통해 메모리에 접근해 해당 값을 재사용할 수 있다.

변수의 선언과 할당

var a  // 선언
a = 1  // 할당

var b = 'hello' // 선언과 할당을 원라인으로 진행하는 것이 일반적이지만 동시에 이뤄지는 것은 아니다.

변수 선언이란 메모리 공간에 변수가 들어갈 자리를 만드는 것이다. 데이터를 저장하기 위한 메모리 공간의 주소를 연결해 데이터를 저장할 준비를 하는 것이라 이해하면 좋다. 아직 할당이 완전히 이루어 진 것이 아니다. 그렇지만 해당 메모리 공간은 비어있는 것이 아니다. 초기 할당 값은 자바스크립트의 원시 타입 값 중 하나인 undefined 이 할당된다. 이를 초기화 단계라 한다. 즉 변수 선언은 선언 단계와 초기화 단계로 이루어진다.

왜 초기화가 필요한가

변수가 선언되어 진 메모리 공간은 비어 있다는 것을 장담할 수 없다. 이전에 다른 활동을 통해 사용되어 있던 값이 남아 있을 가능성이 있기 때문이다. 따라서 변수를 통해 메모리 공간만 확보한다면 원치 않는 값이 저장되어 있는 공간을 명명하게 되는 일이 발생할 수 있다. 이를 방지하기 위해 변수 선언 이후 초기화를 통해 해당 값을 초기 undefined 으로 할당한다.

변수에 데이터를 할당

일반적으로 var b = 'hello' 이러한 방식으로 코딩을 하기 때문에 변수 선언과 할당이 동시에 이루어진다고 착각하기 쉽다. 하지만 자바스크립트에서는 명백히 선언 이후에 할당이 이루어진다. 즉 자바스크립트 엔진은 변수 선언과 할당을 한줄로 표현해도 두 단계로 나누어 각각의 단계를 실행한다. 이 때문에 자바스크립트에서는 호이스팅이 발생한다.

호이스팅

console.log(a) // undefined

var a = 80

console.log(a) // 80

자바스크립트는 인터프리터 언어이다. 그 말인 즉슨 코드를 위에서부터 한 줄씩 순차적 실행된다는 의미이다. 위에서 아래로 코드를 실행해 나가면 a가 뭐지? 하고 ''띄용''(ReferenceError) 할 수 있지만 undefined 를 출력한다. 그 이유가 호이스팅이다.

선언과 할당이 일어나는 타이밍

자바스크립트가 코드를 한줄씩 실행하는 시점 이전에 소스코드를 평가하는 과정을 통해 소스 실행 준비를 한다. 이 과정에서 변수 선언은 실행보다 먼저 일어난다. 즉 console.log(a) 가 실행되기 전에 a 라는 변수가 할당보다 먼저 선언 된다는 것을 의미한다.

• 선언: 소스 평가 과정에서 메모리 공간을 undefined 로 우선 확보
• 할당: 소스를 한줄씩 읽어가는 과정 속에서 해당 줄에서 변수에 데이터를 할당

선언 => 할당

따라서 순서를 요약하면 다음과 같다.

• 소스 평가 과정에서 a라는 변수에 해당하는 자리를 메모리에 만들어 놓음
• console.log(a) 가 실행되어 undefined 를 출력
• a 변수에 80이라는 값을 할당
• console.log(a) 가 실행되어 80 을 출력

호이스팅, 선언/할당 완벽 이해 예제

console.log(score) // undefined

score = 80
var score

console.log(score) // 80

작동 순서는 다음과 같다

• score 변수가 메모리에 선언된다 (undefined로 초기화 과정 수행)

• 첫번째 줄이 실행되어 undefined 가 출력된다

• 두번째 줄에서 변수에 80이 할당된다

• console.log(a) 가 실행되어 80 을 출력된다