[자바스크립트]호이스팅

전역 실행 컨텍스트는 두 단계로 나뉜다.
생성 단계 : 전역 객체, this 구성 되고 전역 객체와 this는 같다.
호이스팅은 전역 실행 컨택스트의 생성 단계에서 일어난다.
호이스팅이란, 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것이다.
자바스크립트 엔진은 코드를 실행하기 전 실행 컨텍스트를 위해 모든 선언(var, let, const, function, class)를 스코프에 등록한다

실행 단계: 코드가 실행된다

1. 변수 호이스팅(var, let, const)

• 자바스크립트의 모든 선언에는 호이스팅이 일어난다

• var의 경우 선언과 함께 undefiend로 메모리에 저장된다(초기화 된다)

• let과 const는 초기화 되지 않은 상태로 선언만 메모리에 저장된다. 초기화 되지 않으면 변수를 참조할 수 없다. 선언이전에 변수를 참조하면 var는 undefined를 반환한다. let과 const는 참조 에러가 발생한다.

• let키워드로 선언된 변수는 선언 단계와 초기화 단계가 분리되어 진핸된다. 즉, 스코프에 변수를 등록(선언 단계)하지만 초기화 단계는 변수 선언문에 도달했을 때 이뤄진다

• 초기화 이전에 변수에 접근하려고 하면 참조 에러가 발샌한다. 아직 변수가 초기화되지 않았기 때문이다. 즉, 변수를 위한 메모리 공간이 아직 확보되지 않았기 때문이다.

호이스팅이란

console.log('1')
console.log(teddy) //undefined
console.log(sing()) // 'ohh lalala'
var teddy = 'bear'
function sing() {
	console.log('ohh lalala')
}

2. 함수 호이스팅
   선언 변수는 키워드에 따라 호이스팅이 다르게 일어난지만 선언된 함수는 완전히 호이스팅된다. 즉 함수 선언문은 전역 실행 컨텍스트의 생성단계에서 메모리에 할당된다.
   그런데 실행 컨텍스트는 전역 객체를 만들 때만 일어나는 것이 아니다. 함수를 실행할 때도 각 함수의 실행 컨텍스트가 만들어 진다.

var favoriteFood = 'grapes';
var foodThoughts = function() {
	console.log("Original favourite food: " + favoriteFood;

	var favoriteFood = "sushi";
	console.log("New favourite food: " + favoriteFood);
}

foodThoughts()

위 함수의 결과는 다음과 같다

new favourite food: sushi
Original favourite food: undefined

생성 단계에서 다음과 같이 메모리에 저장된다.
var favouriteFood = undefined
var foodThoughts = undefined

실행 단계에서는 다음과 같다.

favoriteFood = 'grapes'
foodThoughts = function() {
	console.log("Original favourite food: " + favoriteFood;
	var favoriteFood = sushi
    console.log("New favourite food: " + favoriteFood);
}

호이스팅은 매 함수가 실행될 때마다 일어난다. 함수가 실행되면 새로운 실행 컨텍스트가 만들어지고 함수의 실행 컨텍스트도 생성 단계 실행단계로 나뉘어 일어난다.

foodThoughts의 실행 컨텍스트의 생성 단계

var favouriteFood = undefined;
console.log("Original favourite food: " + favoriteFood;
favoriteFood = sushi
console.log("New favourite food: " + favoriteFood);