호이스팅(Hoisting)이란

코드가 실행하기 전 변수선언/함수선언이 먼저 메모리에 저장되었다는 것을 의미하며, 곧 해당 스코프의 최상단으로 끌어 올려진 것 같은 현상을 말한다.

• 자바스크립트 엔진은 코드를 실행하기 전 실행 컨텍스트를 위한 과정에서 모든 선언(var, let, const, function, class)을 스코프에 등록한다.

• 코드 실행 전 이미 변수선언/함수선언이 저장되어 있기 때문에 선언문보다 참조/호출이 먼저 나와도 오류 없이 동작한다. (var 변수 선언, 함수선언문일 경우에만 해당)

변수의 호이스팅

• 자바스크립트의 모든 선언에는 호이스팅이 일어난다.

• let, const, class를 이용한 선언문은 호이스팅이 발생하지 않는 것처럼 동작하는 이유
  -> var 키워드는 선언 단계와 초기화 단계가 한번에 진행되어 메모리에 저장,
  -> let과 const는 선언 단계와 초기화 단계가 분리되어 진행되며, 초기화되지 않은 상태로 선언만 메모리에 저장되기 때문에 일시적 사각지대에 빠져 호이스팅이 일어나지 않는 것처럼 보인다.

변수 생성 단계

• 1단계: 선언 단계(Declaration phase)
  변수를 실행 컨텍스트의 변수 객체에 등록한다.
  이 변수 객체는 스코프가 참조하는 대상이 된다.

• 2단계: 초기화 단계(Initialization phase)
  변수 객체에 등록된 변수를 위한 공간을 메모리에 확보한다.
  이 단계에서 변수는 undefined로 초기화 된다.

• 3단계: 할당 단계(Assignment phase)
  undefined로 초기화된 변수에 실제 값을 할당한다.

함수선언문과 함수표현식에서의 호이스팅

• 함수선언문은 호이스팅에 영향을 받지만, 함수표현식은 호이스팅에 영향을 받지 않는다.

• 함수선언문은 코드를 구현한 위치와 관계없이 자바스크립트의 특징인 호이스팅에 따라 브라우저가 자바스크립트를 해석할 때 맨 위로 끌어 올려진다.

• 함수표현식은 함수선언문과 달리 선언과 호출 순서에 따라서 정상적으로 함수가 실행되지 않을 수 있다.
  - 함수표현식에서는 선언과 할당의 분리가 발생한다.
  
  - 함수표현식의 선언이 호출보다 위에 있는 경우 - 정상 출력
  
  - 함수표현식의 선언이 호출보다 아래에 있는 경우 (var 변수에 할당) - TypeError : not a function
  --> 호이스팅에 의해 undefined으로 지정되고, undefined은 함수로 인식되지않은 상태이기때문에 not a function 이라는 오류 발생
  
  - 함수표현식의 선언이 호출보다 아래에 있는 경우 (const/let 변수에 할당) - ReferenceError : not defined
  --> 호이스팅이 이루어지지않아 선언이 되지 않은 상태이기때문에 not defined 라는 오류 발생

호이스팅 우선순위(동일한 변수명을 사용할 때)

• 변수 선언 > 함수 선언문
• 값이 할당되어 있지 않은 변수의 경우, 함수선언문이 변수를 덮어쓴다.
• 값이 할당되어 있는 변수의 경우, 변수가 함수선언문을 덮어쓴다.

호이스팅 사용 시 주의할 점

• 코드의 가독성과 유지보수를 위해 호이스팅이 일어나지 않도록 한다. (var 대신 let, const 사용하기)
• 호이스팅을 제대로 모르더라도 함수와 변수를 가급적 코드 상단부에서 선언하면, 호이스팅으로 인한 스코프 꼬임 현상은 방지할 수 있다.