자바스크립트에서 호이스팅

코드에 함수를 작성하기 전에 왜 함수를 호출할 수 있었는지 궁금한 적이 있습니까? 호이스팅 덕분에 가능합니다.

호이스팅은 변수와 함수의 선언을 . 이는 코드 실행 전에 컴파일 중에 발생합니다.

따라서 변수와 함수가 선언된 위치에 관계없이 해당 범위의 맨 위로 이동됩니다. 함수가 코드에서 선언되기 전에 코드에서 함수를 사용할 수 있습니다.

printName("John"); // Output: 'My name is John'

function printName(name) {
  console.log("My name is " + name);
}

변수가 부분적으로 호이스팅됨

함수는 완전히 호이스트되지만 변수는 부분적으로만 호이스팅된다는 점을 기억하는 것이 중요합니다.
JavaScript는 초기화가 아닌 선언만 호이스트하기 때문입니다.

즉, JS 엔진은 변수를 메모리에 할당하지만 값은 할당하지 않습니다. 코드 실행 중에 해당 값이 할당(초기화)됩니다. 실행 전에 변수에는 기본 초기화가 있습니다. undefined 를 사용하여 선언된 변수의 경우 var이고 그렇지 않으면 초기화되지 않습니다.

console.log(name); // returns 'undefined' (JavaScript has hoisted the variable declaration only)

var name = 'John'; // initialization and declaration 

console.log(name); // after the line is executed, it returns 'John'

이 때문에 변수를 선언하기 전에 변수를 사용할 수 있습니다. 그러나 호이스팅된 변수는 undefined 로 초기화될 수 있으므로 주의해야 합니다.

let 및 const 호이스팅

const 및 let 를 사용하면 var 와 마찬가지로 변수가 블록의 맨 위로 호이스팅되지만 기본값으로 초기화되지는 않습니다. 따라서 let 또는 const로 선언된 변수가 초기화되기 전에 사용되면 예외(참조 오류)가 발생합니다.

console.log(name); // Output: ReferenceError: name is not defined
const name = 'John';

엄격 모드' 사용

JavaScript의 es5 버전에 도입된 엄격 모드도 사용할 수 있습니다. 제한된 모드에서 컴파일러는 변수가 선언되기 전에는 변수 사용을 허용하지 않습니다.

'use strict';

console.log(name); // Output: ReferenceError: name is not defined
name = 'John';

함수 표현식과 선언

함수 선언은 맨 위로 완전히 호이스팅되지만 함수 표현식(변수와 유사)은 완전히 호이스팅되지 않는다는 점을 잊지 말아야 합니다. 함수 표현식은 블록의 맨 위로 호이스팅되지만 코드가 실행될 때까지 초기화되지 않습니다.

declaration(); // This function has been hoisted

// Function declaration
function declaration() {
  console.log('I am hoisted');
};

expression(); // Output: "TypeError: expression is not a function

// Function expression
var expression = function() {
  console.log('I am declared during execution');
};