자바스크립트에서 변수가 선언되기 이전에 접근하려 하면 어떤 결과를 돌려 받게 될까요?
이렇게 선언되지 않은 변수라며 에러를 던지게 되죠. var 키워드로 선언된 변수라면 어떨까요
undefined라고 출력은 되지만 에러를 발생시키진 않네요. 우리가 var 키워드를 멀리해야 하는 이유가 여기 있습니다. JavaScript로 로직을 작성하는 과정에서 에러를 만나게 되면 동작을 멈추고 프로젝트의 크기가 더 커지기 전에 문제가 되는 부분을 먼저 발견할 수 있죠. 그런데 var 키워드와 같이 에러를 발생시키는 것이 아니라 undefined로 참조가 되면 해당 변수의 선언 코드를 만나기 전에는 아무런 데이터가 담기지 않은 채로 로직이 동작하게 됩니다. 여기서 발생하게 되는 문제를 우리는 미연에 방지하기 어려워질 것이고, 프로젝트의 크기가 비대해진 이후에는 문제 발생 지점을 찾기가 더 어려워지겠죠. 이러한 문제가 발생하는 이유는 var로 선언된 변수는 JavaScript를 해석하는 과정에서 마치 그 선언 단계가 위로 끌어 올려진 듯 동작하기 때문입니다. 그리고 이러한 개념을 호이스팅이라 부릅니다.
호이스팅이란, 함수, 변수의 선언이 마치 위로 끌어올려진 것처럼 동작하는 것을 이야기합니다. JavaScript에서 이러한 동작이 발생하는 이유는 JavaScript가 코드를 해석하고 실행하는 과정과 내부적인 변수의 선언, 할당 과정 때문입니다. JavaScript는 코드를 실행하기 전에 먼저 선언된 변수, 함수 등을 전역 환경에 담아두게 됩니다. 그리고 이후에 정리된 코드를 실행하는 과정을 수행하게 되죠. 변수 선언의 관점에서 바라보면 선언된 변수, 함수 등을 전역 환경에 담아두는 시기에 선언 단계라고 하는 과정을 거치게 됩니다.