Javascript - Hoisting

오늘 Level-Up 부분을 공부하다가 제일 먼저 나온게 Hoisting! Hoisting의 개념은 도대체 무엇일까 하다가 문서를 뒤져보면서 공부하기 시작했다.

Hoisting이란?
함수안에 있는 선언들을 모두 끌어올려서 Javascript 최상단에 위치하여 읽게끔 한다.

함수안에 필요한 변수들을 최상단으로 올린다는 말이다. 그러면 변수에 할당된 값들도 같이 최상단으로 올라가는 것인가?

아니다. 함수선언문 혹은 var 변수와 같은 것들만 올라가고 그 값들은 그 위치 그대로 있다.

Hoisting 과정
1. 자바스크립트 Parser가 함수 실행전에 함수들을 훑는다.
2. 함수안에 존재하고 있는 변수/함수선언에 대해 기억하고 있다가 해당 함수위치에 오면 실행을 한다.

var 변수 선언과 함수 선언문에만 Hoisting이 일어난다. var 변수와 함수 선언문 둘 중에서는 var 변수 선언이 더 위로 올라가게 된다.

간단한 예를 들어보자)

realisticDreamer();
realisticDreamer2();

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


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

해당 코드들을 Hoisting에 따라서 위치를 한다면.

var realisticDreamer2 // 변수 값이 항상 위로 올라간다.

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

realisticDreamer();
realisticDreamer2();

realisticDreamer2 = function(){
  console.log("hello2");
}

함수 선언문은 위로올라가지만 함수 표현식은 변수를 제외하고는 꿈쩍도 하지않는다.

let, const도 움직이지 않는다.

Javascript ES6문법이 나오면서 var를 거의 쓰지않고 let const위주로 쓰고 있지만, 아직 완전히 ES6문법으로 대체된것이 아니기때문에 var가 호이스팅 됐을 때 어떻게 동작하는 지 알면 좋다.

알야할 것:
코드 유지보수를 위해서 가급적이면 var를 안쓰는것이 좋다!!