JavaScript에서 호이스팅 이해하기

JavaScript에서 호이스팅 이해하기

2022-10-19 last update

5 minutes reading javascript react programming webdev
호이스팅은 기능이 아니라 JavaScript의 개념입니다. 다른 스크립팅 또는 서버 측 언어에서는 변수나 함수를 사용하기 전에 선언해야 합니다.

JavaScript에서는 변수와 함수 이름을 선언하기 전에 사용할 수 있습니다. JavaScript 컴파일러는 모든 변수 및 함수 선언을 맨 위로 이동하여 오류가 발생하지 않도록 합니다. 이것을 호이스팅이라고 합니다.

x = "Neeraj Kumar";

alert('x = ' + x); // display x = "Neeraj Kumar"

var x;


코드 실행 직전에 컴파일러 자체가 함수를 해당 범위의 맨 위로 이동하는 것을 호이스팅이라고 합니다.

또한 아래와 같이 변수를 다른 변수에 할당할 수도 있습니다.

x = "Neeraj";
y = "Kumar";

alert('x = ' + x);
alert('y = ' + y);

var x;
var y;


호이스팅은 선언으로만 가능하지만 초기화는 불가능합니다. JavaScript는 한 줄로 선언되고 초기화된 변수를 이동하지 않습니다.Example: Hoisting not applicable for initialized variables
alert('x = ' + x); // display x = undefined

var x = "Neeraj";


위의 예에서 볼 수 있듯이 var x = "Neeraj"가 호이스트되지 않기 때문에 x의 값은 정의되지 않습니다.
기능의 게양
JavaScript 컴파일러는 변수 선언과 같은 방식으로 함수 정의를 맨 위로 이동시킵니다.Example: Function Hoisting
alert(Sum(50, 50)); // 100

function Sum(val1, val2)
{
    return val1 + val2;
}

Please note that JavaScript compiler does not move function expression.Example: Hoisting on function expression
Add(50, 50); // error

var Add = function Sum(val1, val2)
{
    return val1 + val2;
}

Hoisting Functions Before VariablesJavaScript 컴파일러는 변수 선언 전에 함수의 정의를 이동합니다. 다음 예가 그것을 증명합니다.Example: Function Hoisting Before Variables경고(UseMe);

var UseMe;

function UseMe()
{            
    alert("UseMe function called");
}


위의 예에 따라 UseMe 함수 정의가 표시됩니다. 따라서 함수는 변수보다 먼저 이동합니다.Points to Remember :1.JavaScript 컴파일러는 변수 및 함수 선언을 이동합니다.
위로 올라가게 되는데 이것을 호이스팅(hoisting)이라고 합니다.
2. 변수 선언만 맨 위로 이동하고, 맨 위로 이동합니다.
초기화.
3. 함수 정의가 변수보다 먼저 이동합니다.