[ES6][JS] Javascript Hoisting 이슈와 해결법

◆목표

Javascript의 Hoisting 이슈
- 정의 
- 현상과 이유
- 해결 방법

---

1. Hoisting 이슈 정의

- 일반적인 언어에서는 함수, 변수를 선언한 후에 사용이 가능하지만 JS에서는 호이 스팅(끌어올린다)이라는 현상 때문에 에러가 발생하지 않는다. 이렇게 에러가 발생하지 않는 점으로 인해 논리적 오류가 발생한다.

 

2. Hoisting 현상과 이유

- Hoisting 현상은 변수, 함수에서 발생하지만 이슈가 되는 포인트는 Var 키워드로 선언했을때다.

Tip) var 키워드란?

let, const가 나오기전에 사용하던 키워드로 해당 키워드를 사용하면 같은 이름의 변수를 여러 번 선언하더라도 오류를 발생시키지 않는 이슈가 있음

 

 

<입력>

console.log(b);
 b = 1;
console.log(b);
 var b = 2;
console.log(b);

<출력>

undefiend
1
2

※입력문이 실제 동작하는 방식※

JS 엔진은 코드를 만났을 때 변수,함수 선언문을 먼저 찾아서 상위로 올린다.

(단, 변수를 초기화하지 않고 선언만 실시. 그래서 undefiend 출력됨)

var b;
console.log(b);
b = 1;
console.log(b);
b = 2;
console.log(b);

3. 해결방안

- 변수 선언의 경우, var 키워드는 쓰지 않고, let과 const만 사용하여 선언하기

- 함수 선언의 경우 함수 표현식으로 사용할 것

//함수 선언문
function f(){
  console.log("hi");
}

//함수 표현식
let fun = function(){
  console.log("hi");
}