호이스팅(Hoisting)

호이스팅은 인터프리터가 코드를 실행하기 전에 함수, 변수, 클래스 또는 임포트(import)의 선언문을 해당 범위의 맨 위로 끌어올리는 것처럼 보이는 현상을 뜻합니다.

hoisting : 끌어 올리기, 들어올려 나르기.

호이스팅

• 스코프(함수) 안에 존재하는 모든 선언들을 해당 스코프의 최상단으로 끌어올리는 것이다.

• 자바스크립트 엔진은 코드를 실행하기 전에 실행 가능한 코드를 형상화하고 구분하는데, 이 과정에서 코드 실행을 위한 모든 선언을 메모리에 저장한다.

• 호이스팅 대상은 두 가지이다.

  • 변수 선언(variable declaration)
  • 함수 선언(function declaration)

함수 호이스팅

• 함수 선언은 선언 단계, 초기화 단계, 할당 단계를 동시에 실행한다.

test();

function test() {
  document.writeln("Hoisting");
}

• 함수 할당이 실행 코드 test()보다 아래에 작성되어 있으므로 실행되지 않아야 할 것 같지만, 호이스팅 때문에 정상적으로 작동한다.

변수 호이스팅

• 변수가 호이스팅 될 때는 선언과 초기화만 된 채로 호이스팅 되고, 할당은 호이스팅되지 않는다.

console.log(value) //선언과 동시에 undifined로 초기화
var value = 'Hello World'
console.log(value) //Hello World

• 그러나 const와 let의 경우 ReferenceError가 발생한다.
• let과 const로 선언한 변수는 호이스팅되었지만, 접근할 수는 없다.

...
console.log(value)
let value = 'Hello World' //ReferenceError
...
console.log(value)
const value = 'Hello World' //ReferenceError

• console.log(value)가 작성된 라인을 TDZ로 여겨, 선언문이 나오기 전까지는 접근할 수 없게 되었을 뿐이다.

---

TDZ(Temporal Dead Zone)

• 스코프의 시작 지점부터 초기화 시작 지점까지의 구간을 TDZ(일시적 사각 지대)라고 한다.

자바스크립트의 변수 처리

자바스크립트는 총 3단계에 걸쳐서 변수를 생성합니다.

• 선언 단계(Declaration phase)

  • 변수 객체를 생성하고 변수를 등록한다.
  • 스코프는 해당 변수 객체를 참조한다.

• 초기화 단계(Initialization phase)

  • 변수 객체에 등록된 변수를 메모리에 할당한다.
  • 변수는 undefined로 초기화된다.

• 할당 단계(Assignment phase)

  • undifined로 초기화된 변수에 실제값을 할당한다.

var와 let/const의 차이

• var 변수는 선언 단계와 초기화 단계를 동시에 진행한다.
• 메모리에 undifined로 등록하기 때문에 할당하기 전에 호출해도 undifined로 호출되는 호이스팅이 발생한다.

• 반면에 let/const는 선언 단계와 초기화 단계가 분리된다.
• 실행 컨텍스트에 변수는 등록되어 있지만, 메모리에 할당되어 있지 않기 때문에 접근할 수 없어 ReferenceError가 발생한다.

• 즉, 실행 컨텍스트에 등록되어 호이스팅은 되지만 TDZ에 의해 메모리에 할당되지 않아 참조 에러가 발생한다.

---

결론

• 코드의 가독성과 유지보수를 위해 호이스팅이 일어나지 않도록 한다.

  • 함수와 변수를 가급적 코드 상단부에서 선언하면, 호이스팅으로 인한 스코프 꼬임 현상을 방지할 수 있다.

• 가급적 let과 const를 사용한다.

  • var을 사용하면 혼란스러운 코드가 생길 수 있다.

---

출처

• 호이스팅
• [JavaScript] 호이스팅이란
• [Javascript] 호이스팅(Hositing)이 무엇인가?!