변수선언(Variable Declaraion)

  • 변수선언이란 변수를 생성하는것을 말함.
  • 값을 저장하기 위한 메모리 공간을 확보하고 변수이름과 확보된 메모리 공간의 주소를 연결(name binding)해서 값을 저장할 수 있게 준비하는것
  • 변수선언시 var, let, const 키워드를 사용함
  • 변수선언에 의해 확보된 메모리 공간은 비어있을것으로 생각할 수 있으나 확보된 메모리 공간에는 자바스크립트 엔진에 의해 undefined라는 값이 암묵적으로 할당되어 초기화됨.
  • 자바스크립트 엔진은 변수선언을 다음과 같은 2단계에 거쳐 수행함
    1) 선언단계 : 이름을 등록해서 자바스크립트 엔진에 변수의 존재를 알림.
    2) 초기화단계 : 값을 저장하기 위한 메모리공간을 확보하고 암묵적으로 undefined를 할당해 초기화함.
  • 만약 선언하지 않은 식별자에 접근하면 ReferenceError(참조에러)가 발생함.

변수선언의 실행시점과 변수 호이스팅

  • 자바스크립트엔진은 소스코드를 한줄씩 실행하기 앞서 먼저 소스코드평가과정을 거치면서 소스코드를 실행시키기 위한 준비를 한다.
    이때 소스코드의 평가과정에서 자바스크립트엔진은 변수 선언을 포함한 모든 선언문(변수 선언문, 함수 선언문 등)을 소스코드에서 찾아내 먼저 실행함.
    그리고 소스코드의 평가과정일 끝나면 비로소 변수 선언을 포함한 모든 선언문을 제외하고 소스코드를 한줄씩 실행.
  • 즉, 자바스크립트 엔진은 변수 선언이 소스코드의 어디에 있든 상관없이 다른 코드보다 먼저 실행한다.
    따라서 변수선언이 어디에 위치해있는지와 상관없이 어디서든지 변수참조가 가능하다.
    console.log(score);   // undefined
    var score;            // 변수선언문
    
  • 이처럼 변수선언문이 코드의 선두로 끌어올려진것처럼 동작하는 자바스크립트 고유의 특징을 변수 호이스팅(variable hoisting)이라고 한다.
  • 변수 선언뿐 아니라 var, let, const, function, function*, class 키워드를 사용해서 선언하는 모든 식별자(변수, 함수, 클래스 등)는 호이스팅된다.
    (모든 선언문은 런타임 이전단계에서 먼저 실행되기 떄문)

값의 할당

  • 변수의 선언과 값의 할당을 하나의 문자으로 단축표현해도 자바스크립트 엔진은 변수의 선언과 값의 할당을 2개의 문으로 나누어 실행한다.
  • 변수 선언과 값의 할당은 실행시점이 다르다.
  • 변수 선언은 런타임 이전에 먼저 실행되지만, 할당은 소스코드가 순차적으로 실행되는 시점인 런타임에 실행된다.
    console.log(score);      // undefined  
    var score = 80;          // 변수선언과 값의 할당  
    console.log(score);      // 80  
    
  • 변수에 값을 할당할 때는 이전값 undefined가 저장되어있던 메모리 공간을 지우고 그 메모리 공간에 할당값 80을 새롭게 저장한는것이 아니라 새로운 메모리 공간을 확보하고 그곳에 재할당할 값을 할당한다.

참조(모던 자바스크립트 Deep Dive)