게양

자바스크립트에서 호이스팅 변수와 함수 선언은 실행 컨텍스트를 위해 변수 객체가 생성될 때 발생합니다. 코드를 실행하기 전에 브라우저javascript engine는 현재 실행 컨텍스트에서 변수 및 함수 선언을 검색합니다. 간단히 말해서 함수와 변수는 코드가 실행되기 전에 발견되므로 자바스크립트는 실행 모드에서 만나면 계산하는 방법을 알고 있습니다. 이 프로세스를 자바스크립트 커뮤니티에서는 호이스팅이라고 합니다.

함수 선언 호이스팅

발생하는 각 함수 선언( function myFunc() )에 대해 해당 함수에 대한 포인터 역할을 하는 변수 객체에 속성이 생성됩니다. 이 포인터를 사용하면 선언되기 전에 코드에서 함수를 호출할 수 있습니다. 콘솔에서 아래 코드를 시도하십시오.

myFunc(10);

function myFunc(num) {
   console.log(`Your number is ` + num)
};

함수 표현식은 변수로 취급된다는 점을 언급할 가치가 있습니다. 선언 전에 함수 표현식을 호출하면 함수가 실행되지 않습니다.

runCode();

var runCode = () => {
   console.log("I'm a variable, that points to a function. I don't get defined until execution.")
}

변수 선언 호이스팅

브라우저 엔진은 변수 선언도 찾습니다. 각 변수 선언에 대해 속성이 변수 개체에 생성되고 (사용된 키워드에 따라) 정의되지 않음으로 설정됩니다.

var

var를 사용하여 변수를 선언하면 호이스팅 시 해당 변수가 undefined로 설정됩니다. 이렇게 하면 선언하기 전에 변수를 호출할 수 있습니다. 물론 값은 undefined 입니다. 콘솔에서 아래 코드를 시도하십시오.

console.log(age);

var age = 23;

console.log(age);

상수 && 하자

const 또는 let를 사용하여 변수를 선언하면 포인터가 정상적으로 생성되지만 변수는 초기화되지 않습니다(일명 undefined 로 설정됨). 변수를 호출하면 Uncaught ReferenceError 가 표시됩니다.

console.log( cat, dog );

const cat = "Ozma";
let dog = "Pippin";

게양이하지 않는 것.

a strict definition of hoisting suggests that variable and function declarations are physically moved to the top of your code, but this is not in fact what happens. Instead, the variable and function declarations are put into memory during the compile phase, but stay exactly where you typed them in your code.

From the MDN

표지 이미지: 호이스팅 검색 중 발견한 멋진 사진 creative commons


Boston Public Library의 "Great hoists, Hulett and Brown electric at work"은 CC BY 2.0에 따라 사용이 허가되었습니다.