자바스크립트 초보자도 이해할 수 있는 호이스팅 Hoisting

	선언	할당	범위	호이스팅	생성 과정
var	재선언 O	재할당 O	function 함수 내부	가능	1. 선언 및 초기화 단계 2. 할당 단계
let	재선언 X	재할당 O	{}  블록(중괄호 내부)	가능	1. 선언단계 2. 초기화 단계 3. 할당 단계
const	재선언 X	재선언 X	{}  블록(중괄호 내부)	가능	1. 선언 + 초기화 + 할당

 

---

1. 호이스팅

호이스팅의 사전적인 정의를 살펴보자

끌어올린다라...뭘 끌어올린다는거지???

 

 

 

바로 변수나 함수의 선언이 코드 최상단으로 끌어올려지는 듯한 현상을 말한다.

지난번 https://ella951230.tistory.com/entry/자바스크립트-변수-const-let-var

자바스크립트) 변수 const, let, var

위 포스팅에서 변수의 선언과 할당에 대해서 배웠다. 

 

선언부분이 코드의 최상단으로 끌어올려지는 것을 말한다.

 

2. 예시로 살펴보는 호이스팅(var)

바로 예시로 들어가보자

아래와 같은 코드가 있다.

var 이름 이라고 선언하기도 전에 

console.log(이름) 이라는 변수를 출력하고 있다. 

과연 콘솔창에 어떻게 나올까...? 

선언도 안했는데... 에러나는거 아니야? 라고 생각하고 있던 찰나...

<script>
  
  console.log(이름);
  var 이름 = 'Kim';
  console.log(이름);

</script>

 

콘솔창을 보니 undefined가 먼저 나오고, 'Kim'이 출력되는것을 볼수있다.

보통 상황에서는 변수가 선언이 안되어있으면 에러메세지가 떠야한다. (error : 변수 '나이' is not defined)

그런데, undefined라는게 떴다. undefined는 변수가 선언은 되었는데, 값을 아무것도 할당하지 않았을 때 출력이 된다.  

 

대체... 와...와이러노???

바로 호이스팅 특징 때문이다!

아래 그림처럼 우리 눈에는 선언이 맨 마지막에 된것처럼 보이지만,

실제 자바스크립트 내부에서는 

var 이름 이라는 선언부는 맨 상단으로 끌어올려지고

할당은 뒤에서 되는 걸 알수있다.

이렇게 선언부가 위로 끌어올려지는 현상은 var,let,const, 함수를 만들어도 위로 땡겨 올라간다.

 

위 개념을 살펴보고 아래 주석과 함께 예시를 살펴보면 이해가 잘될것이다.

var 이름;   //호이스팅 현상 작동 : 변수 선언부가 코드 맨 윗상단으로 끌어올려진다.
console.log(이름);   // 위에 이미 선언은 했으나 할당이 안되어있기 때문에 콘솔창에 undefined로 나옴
이름 = 'Kim'   // 이제 여기서 할당을 했다.
console.log(이름);  //그러니 여기서 콘솔창에 'Kim'이라고 나온다.

 

3. 그런데, let 과 const는 var와 조금 다르다.

변수를 선언할 수 있는 이 세 키워드 모두는 호이스팅은 되지만 어떠한 부분에서 다를까?

 

예시를 살펴보자

왜 함수 내부에서 var로 선언한 변수는 undefined가 출력되고, let으로 선언한 변수는 오류가 날까??

 

var는 변수를 선언하기 전에 변수를 사용했는데(참조했는데) 에러를 안뿜고 undefined가 출력되었다.  

// 오류가 안나는 var로 선언한 변수

함수(); //undefined
function 함수() {
  console.log(안녕);
  var 안녕 = 'Hello!';
}

let은 변수를 선언전에 참조했을때 에러를 뿜었다. 

// 오류가 나는 let으로 선언한 변수

함수(); //오류!!!!
function 함수() {
  console.log(안녕);
  let 안녕 = 'Hello!';
}

let 변수는 Hoisting이 되긴 하지만 var 변수처럼 자동으로 undefined 라는 값을 할당 해주지 않는다. 그냥 호이스팅 되고나서 빈 공간이 되어버린다. 

그래서, let 이랑 const 로 만든 변수는 에러를 뿜기 때문에 엄격하게 변수를 선언할 수 있고, 실수(변수 선언하기도 전에 쓰는거 ) 를 미연에 방지할수있다. 

 

4. 결론 : var는 쓰지 말장....ㅎㅎ

1) 중복선언으로 인해 예기치 못한 값의 반환

2) 함수가 아닌 다른 블록 스코프{}에서 선언된 변수는 모두 전역 변수로 취급되어 예기치 못한 할당 

3) 선언 전에 변수를 참조하면 undefined가 될 수 있음

 

 

 

 

 

 

자료 출처

https://nuhends.tistory.com/111

코딩애플 ES6 신문법 인강

https://espania.tistory.com/m/404