호이스팅
- 인터프리터가 자바스크립트 코드를 해석하는데 있어, global 영역 또는 함수 영역 안에 대해서 주어진 선언들을 모두 끌어올려 해당 유효 범위 최상단에 선언하는 것을 의미
1. 자바스크립트가 코드를 실행하는 방법
- JS 엔진은 소스코드를 평가하고 실행하는 2가지의 과정으로 진행
소스코드 평가 과정
- 선언문으로 작성된 변수와 함수 등을 실행하여 변수와 함수 식별자를 키로 하여 실행 컨텍스트가 관리하는 환경에 등록
실행 컨텍스트는 실행 가능한 코드가 되기 위해 필요한 환경
- key-value 쌍으로 변수와 함수를 등록할 때, 식별자를 key로 value는 undefined로 등록한다.
소스코드 실행 과정
- 평가 과정이 끝나면 소스코드가 순차적으로 실행(런타임 시작)
- 이 떄, 어떠한 변수나 함수를 만났다면 실행 컨텍스트가 관리하는 환경에서 검색하여 참조
2. 호이스팅이 왜 필요할까?
- 위의 언급했듯이 JS는 소스코드를 평가하고 실행하기 때문에 런타임 이전에 선언한 변수와 함수를 실행 컨텍스트가 관리하는 환경에 등록하게 된다
- 이러한 이유 때문에 호이스팅이 발생
3. var, let, const
3-1 var
- var은 선언과 초기화 동시에 진행, 즉 x라는 변수를 선언하였다면 동시에 undefined로 초기화
- var은 undefined로 초기화가 되었기 때문에 사용보다 밑에 선언되어도 참조가 가능
3-2 let, const
- let, const는 선언 이후에 초기화 과정을 진행
- let, const는 값을 할당하기 전까지 초기화가 이루어지지 않기 때문에 사용보다 밑에 선언되면 참조가 불가능
선언하고 초기화전까지를 일시적 사각지대(TDZ)라고 한다
3-3 그럼 let과 const는 호이스팅이 발생하지 않나?
- let, const도 호이스팅이 발생하지만 발생하지 않은 것처럼 보이는 것
- 단지 선언과 초기화 과정이 나눠지기 때문에 해당 선언문이 만나기 전까지 초기화가 되지 않아 참조가 불가능
- 하지만 이러한 점으로 인해 개발자의 실수를 줄일 수 있다
- const는 초기값이 없으면, 컴파일에서 에러가 발생하나 let은 컴파일에서 에러가 나지 않기 때문에 조심해야함
// 에시 - 호이스팅이 일어나기 때문에 전역변수가 아닌 지역변수를 참조하려다가 에러가 발생
let a; // 전역 변수
{
console.log(a); // ReferenceError: Cannot access 'a' before initialization
let a = 2; // 지역 변수
}4. 함수 표현식과 함수 선언식
4.1 함수 선언식
- 일반적인 프로그래밍 언어에서 사용하는 함수 선언 방식
function hello() {
// content
}4.2 함수 표현식
- JS만의 문법으로 사용하는 함수 선언 방식
const hello = function(){
// content
}4.3 둘의 차이점
- 함수 선언식은 호이스팅이 되기 때문에 브라우저 js를 해석할 때, 가장 위로 올린다
- 함수 표현식은 변수만 호이스팅이 되고 함수 자체는 호이스팅이 되지 않아 브라우저 js를 해석할 때, 그 위치에 그대로 있는다.
- 하지만 함수 선언식은 호이스팅으로 인해 코드의 구조를 엉성하게 만들 수도 있다고 더글라스씨가 지적하여 함수 표현식을 권장
