ES6(ECMAScript2015)의 블록 단위의 유효범위와 변수 선언 키워드인 let, const가 등장하기 전까지 변수 선언은 오직 var을 통해서만 가능했었다. var으로 선언한 변수는 let이나 const와는 다르게 호이스팅 현상을 통해 변수 선언 전부터 변수 참조가 가능했었는데, 이 글을 통해 정리해보고자 한다.

스코프

스코프(scope)란 중괄호 '{}'로 둘러쌓인 코드의 영역을 뜻한다. 물론 중괄호만 스코프를 형성하는 것은 아니며 함수의 경우 괄호 안에 존재하는 매개변수도 스코프에 포함 될 수있다.

변수 선언 시 let이냐 var냐에 따라 기준이 되는 스코프가 다르며, 스코프 안에서 선언된 변수는 스코프 바깥에서 사용할 수 없다.

var

es6의 let과 const가 등장하기 전엔, 자바스크립트의 변수 선언 방식에는 var만이 존재했으며, 변수의 유효 범위는 오직 Global Scope 및 Function Scope만이 존재했기에, 함수 내의 스코프를 제외한 나머지 영역에서의 변수는 모두 전역 변수가 되어버렸다. 또한 var의 변수 호이스팅 특성 상, 선언 시 초기화가 동시에 이루어지기 때문에 자칫하면 아리송한 가독성을 만들어냈다.

var n = 1;

function variable() {
  console.log(`n : ${n}`); // n : undifiend
  var n = 2;
  console.log(`n : ${n}`); // n : 2
}
console.log(`n : ${n}`); // n : 1

variable();

먼저 첫번째 console.log가 에러도 아니고, '1'도 아니고 'undifiend'이 출력된다. var을 많이 사용해보지않고 let과 const만을 사용했던 사람이라면 아리송할 수 있는데, 이 변수 호이스팅에 대해 알아야한다.

변수 호이스팅

function variable() {
  console.log(`n : ${n}`); // n : undifiend
  var n = 2;
  console.log(`n : ${n}`); // n : 2
}
variable();

var n = 1;

function variable() {
  var n;
  console.log(`n : ${n}`); // n : undifiend
  n = 2;
  console.log(`n : ${n}`); // n : 2
}
variable();

둘다 같은 코드이다. 아래의 코드는 위의 코드가 변수 호이스팅에 의해 어떻게 해석되는지 풀어서 쓴 형태이다.

var 키워드를 사용하여 변수를 선언하게되면 해당 변수가 속한 범위(scope) 최상단으로 올려버리는 현상을 호이스팅이라고 한다. 위 예제로 설명하자면 먼저 변수가 선언이 되면 이 변수는 호이스팅에 의해 해당 변수가 속한 범위인(function scope)함수내의 최상단으로 올라가게되고, 선언과 동시에 undifiend으로 초기화 되게된다. 그리고 아래의 할당문을 통해 '2'라는 값으로 할당이 되는것이다. 이로인해 에러가 아닌 undifiend이 출력되게 되며, 변수 선언전에 변수값을 참조할 수 있게된다.

호이스팅이 일어나는 이유 🔗

위 예제 코드를 보면 이런 의문이 생길 수 있다. 굳이 변수 선언 전에 참고해봤자 undifiend일텐데 왜 굳이 호이스팅이란 현상을 일어나게끔 하는지.

이 의문을 해결하기위해선 먼저 var는 변수뿐만 아니라, 함수 까지도 호이스팅 된다는것을 알아야한다. 그리고 호이스팅을 통해 함수를 순서에 상관 없이 선언할 수 있게되는것이다.

var a = function () {
  b();
};

var b = function () {
  console.log("hello");
};

a(); // hello

함수 호이스팅이 없다면 a함수에서 b함수를 호출할 때 b함수가 a함수보다 먼저 나와야한다. 그러나 호이스팅으로 인해 모든 함수 선언이 코드의 최 상단에 존재하는 것처럼 여겨지기 대문에 순서에 상관 없이 함수를 선언할 수 있는것이다.

결론

호이스팅은 변수가 아니라 함수를 위해 존재하는 기능이라고 한다. 다만 초기 자바스크립트를 설계할 당시 var로 변수를 만드나 function으로 함수를 선언하냐에 대해 애매하게 처리했기에, var를 통한 변수 선언도 호이스팅이 일어나게 되었다고 한다. 이러한 var의 호이스팅 문제로 인해 자바스크립트의 ES6에서는 새로운 변수 선언 방식인 let과 const를 추가 하였다.