hoisting 현상과 단일 var 패턴

Hoisting 

호이스팅hoisting 현상은 개발자들을 어리둥절하게 하는, 자바스크립트 특유의 현상입니다. 

개발자들은 자바스크립트에서 변수의 적용 범위가 다른 언어들과 다르기 때문에 헷갈리는 경우가 많습니다. 

예상치 못한 에러가 발생하지 않게 하기 위해서는, Hosting을 이해하고, 사전에 방지할 수 있는 코드를 작성해야 합니다. 

var exceptOne = 1;
function doA() {
    console.log(exceptOne);
    var exceptOne = 2;
}
doA();

위 코드를 보면, 3번째 라인에서 1을 출력할 것 같지만 결과는 undefined입니다. 

호이스팅 현상 때문입니다. 

자바스크립트는 함수 단위로 안에 있는 변수를 우선으로 여깁니다. 

바깥 범위에 선언된 걸 쓰는 게 아니고, 함수 범위 안에 있는 변수를 끌어와서 사용하게 됩니다. 

문제는!!! 사용되는 코드보다 아래쪽에 선언되어 있는 경우에도 호이스팅 현상이 발생하기 때문에 버그가 발생하거나 헷갈리는 경우가 많습니다.

var expectOne = 1;
function doA() {
    var expectOne;
    console.log(expectOne);
    expectOne = 2;
}
doA();

위 코드 처럼 호이스팅 현상이 발생하게 됩니다.

single var patten

호이스팅 현상을 방지하기 위해서는 단일 var 패턴을 사용합니다.

var expectOne = 10;
function doA() {
    var expectOne = 1, expectTwo, expectThree;
    console.log(expectOne);
    expectTwo = 2;
    console.log(expectTwo);
    expectThree = 3;
    console.log(expectThree);
}
doA();

호이스팅 현상을 방지하기 위해서 함수 내부의 변수들을 모아서 위쪽에 모두 선언합니다. 

이렇게 하면, 정상적으로 1 2 3 이 출력됩니다. 

의도치 않은 오류를 미연에 방지하는 게 좋겠죠?