자바스크립트 (JavaScript)의 호이스팅 (Hoisting)은 코드 실행 전에 변수와 함수 선언을 끌어올리는 동작을 말하는 것
호이스팅은 자바스크립트 엔진이 스크립트를 처리하기 전에 소스 코드를 미리 확인하여 실행 컨텍스트에 해당 변수와 함수를 등록하는 과정을 의미한다.
변수 호이스팅은 변수 선언이 해당 범위의 최상단으로 끌어올려지는 것을 의미한다.
즉, 변수를 선언하기 전에 변수를 사용하는 것이 가능해지지만 변수의 초기화는 실제 선언 위치에서 이루어지기 떄문에 호이스팅으로 인한 변수의 값이 undefined로 출력된다
함수 호이스팅은 함수 선언문을 해당 범위의 최상단으로 끌어올리는 것을 의미한다.
이렇게 하면 함수를 선언하기 전에 호출할 수 있다.
console.log(x); // undefined
var x = 5;
console.log(x); // 5
foo(); // "Hello, World!"
function foo() {
console.log("Hello, World!");
}
위 코드에서 변수 'x' 와 함수 'foo()'는 호이스팅에 의해 해당 범위의 최상단으로 끌어올려지기 때문에 첫번째 'console.log(x)'는 변수가 선언되었지만 초기화되지 않았기 때문에 'undefined'를 출력하고 이후 변수 'x' 가 초기화 되고 난 후에 'console.log(x)'는 '5' 를 출력하게 된다.
마찬가지로 foo() 함수도 호이스팅에 의해 선언문이 최상단으로 이동하며 함수를 선언하기 전에 호출할 수 있다
그래서 foo() 함수를 호출하면 "Hello, World!"가 출력된다.
호이스팅은 코드의 가독성과 예측성을 해치므로 변수와 함수를 선언한 후에 사용하는것이 좋다고 한다.
코드를 읽기 쉽게 작성하고 호이스팅에 의존하지 않도록 하는것이 좋다.