호이스팅

• 호이스팅이란 아직 선언되지 않은 함수 또는 변수를 끌어 올려서 사용 할 수 있는 자바스크립트의 작동 방식을 의미한다.

• 호이스팅을 방지해야 하는 이유는 코드가 헷갈릴 수 있고 유지보수가 어려워지거나 의도치 않는 결과물을 나타낼 수 있다.

호이스팅 대상

• var 또는 함수 선언문이 대표적 대상이다.
• 재할당은 호이스팅 대상이 아니다.
• let,const,함수 표현식은 대상이 아니다.
  
  
  

var로 선언한 변수의 경우 호이스팅이 일어나고
undefined로 변수를 초기화 한다.

console.log(number);  // undefined
var number = 2;

위의 코드는 자바스크립트에서
이렇게 인식하기 때문이다.

var number;
console.log(number);
number = 2;

반면 let과 const로 선언한 변수의 경우 호이스팅이 일어나지 않고
변수를 초기화하지 않는다. ReferenceError이 발생 한다.
에러를 발생 시켜 버그를 쉽게 찾을 수 있다.

console.log(number) // ReferenceError
const number = 2;

함수를 먼저 호출 해도 호이스팅이 일어나 정상적으로 작동한다.

myFunction();	// 함수 선언식
function myFunction() {
  console.log('함수 선언식');
}

하지만 위와 같은 함수 선언식이 아닌 함수 표현식으로 사용하게 되면
호이스팅을 방지할 수 있다.

myFunction();	// ReferenceError
const myFunction = function myFunction() {
  console.log('함수 표현식');
}

ex1)

myFunction();   // myFunction is not a function
var myFunction = function() {
  console.log('함수 표현식');
}

자바스크립트에서 해석할때
var myFunction은 호이스팅의 영향으로
아래와 같이 인식을 하므로 myFunction is not a function와 같은 에러가 발생

var myFunction;	// undefined
myFunction();	// 함수가 아님
var myFunction = function() {
	console.log('함수 표현식');
}

ex2)

myFunction();   // ReferenceError
const myFunction = function myFunction() {
	console.log('함수 표현식');
}

var가 아닌 const로 바꿔 보았다.



var의 경우 타입 에러가 발생했지만
ReferenceError에러가 발생 한다.
let,const는 호이스팅의 영향을 받지 않기 때문에
작성한 코드 순서대로 실행 한다.
단지 함수를 선언 하기 전에 호출을 해서 에러가 뜬 것이다.

myFunction();   // 함수가 아직 선언 되지 않았어요~
const myFunction = function myFunction() {
	console.log('함수 표현식');
}

느낀 점

• 가독성 부분을 따져봐도 호이스팅이 발생하면 안되겠다는 것을 알겠다.

• var과 let,const에서 발생하는 에러가 비슷한 것 같지만.

• 발생한 에러의 원인을 명확하게 알 수 있는 것 같다.

• 정확하게 느껴지는 무언가는 사실 없었지만 var의 경우 원치 않는 코드? 예측하기가 어렵고 복잡한 코드가 발생 할 일이 생길 것 같은 느낌이 컸다....