[JavaScript] Hoisting

👌 Hoisting

함수 안에 있는 선언을 종합하여 최상단으로 끌어올려 최상단에 선언하는 것.

✔ 실행방식

1. 자바스크립트 Parser가 함수 실행 전 해당 함수를 훑는다
2. 함수 안에 존재하는 변수 및 함수선언을 해당 유효 범위의 최상단에 선언한다
   *실제로 코드가 최상단에 위치하도록 변경되는것은 아니며, 내부적으로 처리하는 것

✔ 대상

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

  • var의 선언과 함수선언문만 호이스팅되며, 할당은 호이스팅되지 않는다
  • let 또는 const의 경우에는 호이스팅이 발생하지 않는다

• var vs let

let name = 'dooddi';
var name2 = 'dooddi';

//호이스팅 결과
var name2;		// var 호이스팅
let name = 'dooddi';
name2 = 'dooddi';

• 함수선언문 vs 함수표현식

dooddi();
dooddi2();
function dooddi(){ 	// 함수선언문
  console.log('dooddi');
}
var dooddi2 = function(){
  console.log('dooddi2');
}

//호이스팅 결과
var dooddi2;		// var 호이스팅, 변수 선언이 함수 선언보다 위에 위치
function dooddi(){ 	// 함수표현식 호이스팅
  console.log('dooddi');
}

dooddi();
dooddi2();		// 에러!
dooddi2 = function(){	// 함수표현식은 호이스팅되지 않는다.
  console.log('dooddi2');
}

✔ 주의사항

• 가독성과 유지보수를 위해 호이스팅 사용 지양
  • 가급적 변수 및 함수를 코드 상단부에 선언
  • let과 const 사용

👍 참고 사이트

• [JavaScript] 호이스팅(Hoisting)이란