호이스팅이란?

면접에서 단골질문 호이스팅이다.
간단하게 설명들을 보면 함수 혹은 변수를 가장 상단으로 올려주는 현상(?)이라고 알수있다.
이번에 확실하게 알아두고자 공부를 해보았다.

 

단어 말 뜻 그대로 끌어올린다는 뜻이다.

 

- 인터프리터가 변수와 함수의 메모리 공간을 선언하기전에 미리 할당하는것을 의미한다.

- 변수와 함수의 선언부가 각자의 현재 스코프 영역 최상단으로 옮겨지는 것을 의미한다.

 

결국, 코드가 시작되기 전에 변수, 함수 선언이 해당 *스코프의 최상단으로 끌어 올려지는 것을 말한다.

더 정확히 말하자면 끌려 올려지는 것처럼 보인다. 코드가 실제로 끌어올려지진 않는다.

*스코프 : 범위를 뜻한다. 즉 변수에 접근할 수 있는 범위

 

자바스크립트는 코드를 실행하기 전에 함수와 변수 선언을 Lexical Enviroment내의 메모리에 추가한다.

 

---

호이스팅 예시

hello(); //hello

function hello(){
	console.log("hello");
}

 

함수 선언식의 호이스팅 예제이다.

함수 선언부는 컴파일 단계에서 Lexical Enviroment의 메모리에 추가되기때문에 

실제 함수 선언을 만나기 전에 함수에 접근할 수 있다.

 

Lexical Enviroment = {
  hello : < func >
}

 

결국, 자바스크립트 엔진이 hello() 코드를 마주치면,

Lexical Enviroment를 확인하여 함수를 찾아 함수를 실행시킨다.

 

다만 함수 표현식은 호이스팅이 되지않는다.

 

//함수 표현식은 호이스팅 x 에러발생
hello();

var hello = function(){
	console.log("hello");
}


//함수 표현식을 사용하기 위해서는..

var hello = function(){
	console.log("hello");
}

hello();

 

 

---

Var의 호이스팅

var변수 또한 호이스팅이 된다.

 

console.log(hello);

var hello = "hello";

 

이렇게하면 아마 undefined가 출력이 될 것이다.

 

이유는 자바스크립트가 선언을 호이스트하는 것이지 초기화(할당)을 하지는 않는다.

 

결국,

 

Lexical Enviroment  = {
 hello : undefined
}

로 저장되어, undefined가 출력이 되는 결과를 얻을 수 있다.

 

let과 const는 호이스팅이 일어나지 않는다.

 

결론

호이스팅이 가급적 일어나지 않도록

함수와 변수를 가급적 코드 상단부에 선언하여 스코프 꼬임을 방지하자..!

var대신 let과 const를 애용하자!