요약

호이스팅은 자바스크립트에서 변수나 함수 선언을 코드 상단으로 끌어올리는 현상이다. 호이스팅을 알면 코드의 흐름을 알고 변수나 함수의 선언 위치에 대해 판단할 수 있게 된다.

호이스팅이란?

호이스팅은 JavaScript에서 변수나 함수의 선언을 스코프의 최상단으로 끌어올리는 현상을 말한다. 코드 실행 전에 변수와 함수 선언이 메모리에 저장되어 선언 전에도 참조할 수 있게 된다.

호이스팅의 중요성

실행 컨텍스트, 스코프

• 실행 컨텍스트 : 자바스크립트 엔진은 코드를 실행하기 전에 실행 컨텍스트를 생성한다. 생성된 실행 컨텍스트에 변수와 함수의 정보가 메모리에 저장되며, 코드 선언문에 도달하기 전에 이렇게 저장되므로 호이스팅이 발생한다.
• 스코프 : 실행 컨텍스트로 담는 정보의 범위가 스코프의 범위가 된다. 따라서 스코프를 기준으로 호이스팅이 발생한다. 어디에 선언하느냐에 따라 스코프 범위가 달라지므로 호이스팅이 어디까지 발생하는지도 구분할 수 있다.
• 따라서 호이스팅 개념을 알면 코드의 흐름을 알고 선언 위치에 대해 분별할 수 있게 된다.

기본 원리

• 변수 호이스팅 : var로 선언된 변수는 선언과 동시에 초기화가 되어 선언 전에 참조하면 우선 undefined를 반환한다. let, const는 변수가 호이스팅 되지만 초기화는 안되며 선언 전에 참조하면 ReferenceError를 발생시킨다.
• 함수 호이스팅 : 함수 선언문(function name() {})으로 정의된 함수는 호이스팅되어 선언 전에도 호출 할 수 있다. 함수 표현식(const name = function() {}, const name = () => {})으로 정의된 함수는 변수 호이스팅의 규칙을 따르므로 ReferenceError를 발생시킨다.
• 클래스 호이스팅 : class 선언도 호이스팅 되지만 let, const와 같은 규칙을 따른다. ReferenceError를 발생시킨다.

호이스팅을 잘 다루기 위한 팁

• var 대신 let과 const를 사용 : let, const로 예측 가능성을 높여야 한다.
• 함수 표현식 사용 : 함수 선언식도 호이스팅이 되므로 var와 같은 의미로 사용을 지양한다.
• 선언과 할당을 가까운 위치에서 하기
• 즉시 실행 함수 표현식 사용하기

즉시 실행 함수 표현식 (Immediately Invoked Function Expression, IIFE)

스코프 격리 즉시 실행 데이터 캡슐화

함수를 선언하고 바로 실행하는 패턴

이 방법은 외부 스코프와 격리할 때 사용한다. 전역 스코프를 오염 시키지 않는다.

//기본 형태
(function() {
  // 코드
})();

//화살표 함수를 사용한 형태
(() => {
  // 코드
})();

하지만 React에서 캡슐화가 필요한 로직은 커스텀 훅(custom hook)을 사용하여 분리하는 것이 가독성을 향상시킬 수 있다.