[자바스크립트] 변수의 호이스팅과 스코프

지금은 자바스크립트에서 let과 const를 사용하여, 변수를 선언하지만, ES6 문법 이전에는

var 키워드 밖에 존재하지 않았다. var 키워드에 존재하는 특징들로 인해, 개발 시 문제점이 발생하였고,

그 문제점들을 보완하기위해 나온 변수 선언 키워드가 let과 const이다.

 

 

자바스크립트에서 변수를 선언할 때, 발생하는

변수의 선언문을 유효 범위 최상단으로 끌어올리는 현상이다.

function TestVar() {
  console.log(value);
  var value = 10;
  console.log(value);
}

function TestLet() {
  console.log(value);
  let value = 10;
  console.log(value);
}

TestVar();
TestLet();

 

두 함수를 호출한 결과이다. 일단 var와 let 선언 둘 다 같은 결과가 나왔다.

여기서 이해가 안되는 부분은 왜 선언하지 않은 value 값을 console.log 했을 때, 에러가 발생하지 않고, 

'undefined'  /  '값이 할당 되지 않았다.' 가 나온 것 일까.

이게 변수의 호이스팅이다. 위 두 함수가 실제 어떻게 동작하는 지 보면 아래와 같다.

function TestVar() {
  var value;
  console.log(value);
  value = 10;
  console.log(value);
}

function TestLet() {
  let value;
  console.log(value);
  value = 10;
  console.log(value);
}

TestVar();
TestLet();

 

각각 함수 안의 변수 선언을 함수의 최상단으로 끌어올렸다. 

이렇게 보면 var와 let의 차이가 없는 것 처럼 보인다.

한 단계 더 진행해서 아래는 어떤 결과가 나올까?

function TestVar() {
  console.log(value);
  if (true) {
    var value = 10;
  }
  console.log(value);
}

function TestLet() {
  console.log(value);
  if (true) {
    let value = 10;
  }
  console.log(value);
}

TestVar();
TestLet();

 

조건이 무조건 참인 if문 안에 변수 선언을 넣었다.

결과는 TestVar() 함수는 이전과 결과가 같지만, TestLet() 함수는 에러가 발생했다.

이것이 var와 let의 차이점이다.

바로 스코프, 변수 유효범위의 차이.

 

var는 함수스코프, let, const는 블록스코프 이다.

함수스코프는 유효범위가 함수

블록스코프는 유효범위가 자신이 포함된 {} 블록이다.

변수 선언 시 호이스팅이 발생하는 범위가 스코프에 의해 정해진다.

위의 코드를 다시 쪼개서 보면, 아래와 같다.

function TestVar() {
  var value;
  console.log(value);
  if (true) {
    value = 10;
  }
  console.log(value);
}

function TestLet() {
  console.log(value);
  if (true) {
    let value;
    value = 10;
  }
  console.log(value);
}

TestVar();
TestLet();

 

if문 안에 있던 var 선언문은 함수스코프에 의해, 함수 최상단으로 끌어올려졌고,

if문 안에 있던 let 선언문은 블록스코프에 의해, if문 블록 내에 그대로 있게 되었다.

 

이렇게 짧은 코드를 봤을 땐, 크게 차이가 없고 눈으로 충분히 따라갈 수 있을거라 생각하지만,

코드 길어질수록, 함수스코프 호이스팅으로 인해 var 변수 선언 시 에러의 위험도가 높아진다.

 

따라서, 지금은 let과 const로 변수 선언을 한다.