JavaScript 변수선언(variable declaration)과 할당(assigment)

변수선언 (variable declaration)이란

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

변수를 사용하려면 반드시 선언이 필요하다. 변수를 선언할 때는 var, let, const 키워드를 사용한다.
es6에서 let과 const 키워드가 도입되기 이전까지 var 키워드는 자바스크립트에서는 변수를 선언할 수 있는 유일한 키워드였다.

 

이번 포스팅에서는 let과 const를 이해하기에 앞서 var를 이용하여 변수를 선언하고 그 선언된 변수가 무슨 문제점을 가지고 있는지 단점을 알아보고 이해해보자. 이후 var의 문제점으로 인해 도입된 let과 const에 대해서 이해해보자.

 

var result;

변수 선언

 

var를 통해 변수를 선언하였다. 위 그림처럼 변수 선언을 통해 변수 이름을 등록하고 값을 저장할 메모리 공간을 확보한다.

변수만 선언하였고 변수에 값을 할당하지는 않았다. 변수에 값을 할당하지 않으면 값이 비어있어야 하는데 그림과 같이 undefined라는 값을 가지고 있다. 이렇듯 var는 자바스크립트 엔진에 의해 암묵적으로 undefined라는 값이 할당되어 초기화된다. 

* undefined는 자바스크립트에서 제공하는 원시 타입의 값이다. 자바스크립트에는 6가지의 원시 타입이 있다.그 중 하나가 undefined type이다. undefined type = " var 키워드로 선언된 변수에 암묵적으로 할당되는 값" 으로 이해하면 된다. 

 

변수를 사용하려면 반드시 선언을 해야 한다. 변수뿐만 아니라 모든 식별자도 그렇다. 만약 선언하지 않은 식별자에 접근하면 ReferenceError(참조 에러)가 발생한다. ReferenceError는 식별자를 통해 값을 참조하려 했지만 식별자를 찾을 수 없을때 발생하는 에러이다.

 

값의 할당

 

변수에 값을 할당 할 때는 할당 연산자(=)를 사용한다.

할당 연산자는 우변의 값을 좌변의 변수에 할당한다.

 

var result;           // 변수 선언
result = 100;        // 값의 할당

var result = 100;    //변수 선언과 값의 할당

 

첫 번째 줄과 두 번째 줄처럼 변수 선언과 값의 할당을 나누어서 할 수 있다. 그리고 마지막 줄처럼 변수선언과 값의 할당을 동시에 할 수 있다. 하지만 두 방법은 모두 동일하게 동작한다. 자바스크립트는 마지막 줄처럼 변수 선언과 값의 할당을 하나의 문으로 단축 표현해도 2개의 문으로 나누어 각각 실행한다.

 

변수의 선언과 값의 할당은 서로 다른 시점에 이루어진다.

변수의 선언은 소스 코드가 차례대로 실행되는 런타임 이전 시점에 이루어지고 값의 할당은 소스 코드가 차례대로 실행되는 런타임에 실행된다.

 

[1-1]
console.log(result);   //undefined가 출력

var result;   변수 선언 (1)
result = 100; 값의 할당 (2)

console.log(result)  //100이 출력

 

[1-1] 코드처럼 변수 선언(1)은 런타임 실행 이전(호이스팅)에 먼저 실행된다. 그러므로 맨 윗줄에서 실행되는 console.log(result)의 결과가 undefined로 출력된다. undefined는 변수가 없다는 뜻이 아니다. 변수가 있는데 안에 값이 비어있다는 뜻과도 같다.

이렇듯 변수를 선언하기도 전인데 변수 result의 값이 undefined로 출력되었다. 원래대로라면 만들어지지 않은, 즉 ReferenceError가 발생해야 한다. 하지만 에러가 나지 않는다는 뜻은 변수가 만들어졌다는 얘기다. 그 이유는 위 설명처럼 변수 선언은 런타임 이전(호이스팅)에 실행되기 때문이다.

런타임 실행 이전에 변수 선언이 이루어지고 소스 코드를 읽는 런타임이 실행되면 위에서부터 차례대로 소스코드를 읽어 내려간다. 값의 할당(2)번이 실행되고 마지막에 나오는 console.log(result) 값에는 undefined가 아닌 100이 출력된다.

 

[1-2]
console.log(result);    // undefined 출력

var result = 100;       //변수 선언과 값의 할당

console.log(result);    // 100 출력

이 코드도 변수 선언은 똑같은 시점에 실행된다. 그렇기에 [1-2]에 첫 번째, 두번째 result 값도 [1-1]의 첫 번째, 두 번째 result값과 동일하게 출력되는 것이다.

이번 글에서 제일 중요한 점은 변수 선언은 런타임 이전(호이스팅)에 실행된다는 것이다. 

호이스팅에 대해서는 다음 글에 포스팅하겠다.

 

 

 

 

(도서 "모던자바스크립트 Deep Dive"를 참고하여 글을 작성함.)