javascript 호이스팅

JavaScript에서 호이스팅은 코드 실행 전에 변수 및 함수 선언이 끌어올려지는 동작을 말합니다. 이로 인해 변수와 함수가 선언된 위치보다 상단에서 사용될 수 있는 특징이 있습니다.

변수 호이스팅:
변수 선언은 해당 스코프의 맨 위로 끌어올려집니다. 즉, 변수를 선언하기 전에도 변수를 사용할 수 있습니다. 그러나 변수의 할당은 끌어올려지지 않으며, 실제 선언 이전에 변수에 접근하면 undefined로 초기화됩니다.

console.log(myVariable); // undefined
var myVariable = 10;

여기에서 이 코드의 작동 순서는 밑에 코드와 같습니다

var myVariable
console.log(myVariable); // undefined
myVariable = 10;

선언이 이루어지고 console.log가 실행이 되고 myVariable을 10으로 초기화를 하기때문에 위에있는 console.log 는 undefined가 나오게되는겁니다

 

함수 호이스팅:
함수 선언은 변수 선언보다 더 높은 우선순위로 호이스팅됩니다. 즉, 함수를 선언하기 전에도 함수를 호출할 수 있습니다.

myFunction(); // "Hello, World!"

function myFunction() {
  console.log("Hello, World!");
}

이 코드또한 제대로 작동이 되는데 함수가 호이스팅이 되었기때문에 함수 호출이 위에있어도 정상작동을 하게됩니다

 

하지만 함수 표현식에서는

myFunction(); // TypeError: myFunction is not a function

var myFunction = function() {
  console.log("Hello, World!");
};

myFunction 이 초기화가 되고 그다음에 함수를 호출하고 myFunctio에 함수를 담는거기때문에 위에 있는 함수 호이스팅이 아니라 변수 호이스팅이 일어나서 함수가 실행되지않습니다

푸하