호이스팅(Hoisting)

변수의 선언은 hoisting 된다. 변수가 선언되면, 해당 변수의 유효범위 최상위로 선언을 변경된다.

var x = 10
function f() {
  //여기에 변수가 재선언됨
  console.log(x) //undefined
  var x = 100
  console.log(x) //100
}

x의 유효범위가 f함수 이내 이므로 함수 최상위에서 선언되어 오류가 나지않고 undefined 값이 표시된다.

문제점

function f() {
  //여기에 변수가 선언됨
  for (var i = 0; i < $nav_li.length; i++) {
    $nav_li[i].on('click', function() {
      console.log(i)
    })
  }
}

반복문/조건문 블록 안에서 생각과 다르게 동작된다. 첫번째 $nav_li를 클릭하면 1이 표시되게 하고 싶지만,$nav_li.length가 표시된다. for문이 끝나도, for문 밖에서 변수가 선언되어 값이 남아있다.

해결방법

1. es6환경이라면 var보다 let/const을 사용한다.

   let의 유효범위는 블록 단위이다. 반복문/조건문 블록밖에서 선언되지 않게 된다.

2. es5환경이라면 즉시실행함수로 캡슐화한다.

   var의 유효범위는 함수단위이다. 블록 내부의 문구를 즉시실행함수로 캡슐화하여, 내부에서 변수를 사용하게 한다.