Hoisting(호이스팅)

🎃 Hoisting(호이스팅)

Hoisting 은 "끌어올린다" 라는 의미이다. 즉, Javascript에서 호이스팅은 코드에 선언된 변수(var) 및 함수 선언문이 해당 스코프의 최상단으로 끌어올려지는 것이다. (함수범위 혹은 전역범위)

컴파일러는 자바스크립트 엔진이 인터프리팅(interpreting) 하기 전에 컴파일을 하는데 ,이 때 호이스팅이 발생하는 것이다.

🎃 호이스팅의 대상

var 변수 선언과 함수 선언문에서만 호이스팅이 일어난다.

• var 변수/함수의 선언만 위로 끌어올려지며, 할당은 끌어올려지지 않는다.
• let/const 변수선언과 함수표현식은 호이스팅이 발생하지 않는다.

// 이 코드는
console.log(a);
var a = 1;
console.log(a);

// 이처럼 실행된다.
var a;	// 변수 선언부분만 끌어올려졌다.
console.log(a);	
a = 1;
console.log(a);	



function foo() {            // 함수선언문 (호이스팅O)
  console.log("hello");
}
var foo2 = function() {     // 함수표현식 (호이스팅X)
  console.log("hello2");
}

🎃 호이스팅의 규칙

• 함수선언문은 구현위치와 관계없이 맨 위로 호이스팅된다.
• 함수표현식은 선언과 할당이 분리된다. (var 표현식은 선언부만 호이스팅)
• new Function() 객체 역시 호이스팅되지 않는다.
• 같은 이름의 변수 선언문은 함수 선언문보다 위로 호이스팅된다.
• 값이 할당된 변수는 변수가 함수선언문을, 할당되지 않은 변수는 함수선언문이 변수를 덮어쓴다. (즉, 비어있다면 함수가 들어오게 됨)

var myName = "Heee"; // 값 할당
var yourName; // 값 할당 X

function myName() { // 같은 이름의 함수 선언
	console.log("myName Function");
}
function yourName() { // 같은 이름의 함수 선언
	console.log("yourName Function");
}

console.log(typeof myName); //  "string"
console.log(typeof yourName); //  "function"
// yourName 변수 선언문에는 값이 할당되어 있지 않기 때문에, 함수 선언문이 변수를 덮어쓰므로 fucntion
// myName 변수 선언문에는 값이 할당되었으므로, 변수가 함수선언문을 덮어쓰므로 string(변수의 값)