호이스팅이란

2월 13일에 var, let, const에 대해 쓰고 호이스팅에 대해서도 쓰겠다고 했었는데 이제야 글을 쓰네요..ㅎㅎ

var와 let의 차이에 대해 아직 잘 모르시겠다면 아래의 글을 참고해주시면 감사하겠습니다!

 

2022.02.13 - [javascript 기초] - var, let, const는 어떤 것이며 무엇이 다르고 왜 나왔을까?

var, let, const는 어떤 것이며 무엇이 다르고 왜 나왔을까?

 

우선 자바스크립트에서 변수는 아래의 과정을 거칩니다.

선언  -->  초기화  -->  할당

위에서 변수의 선언이란 이런 변수가 있다고 컴퓨터에게 알리는 것을 의미합니다.

변수의 초기화란 해당 변수를 저장하기 위한 메모리 공간을 확보하는 것을 의미하고 이때의 값은 "undefined"입니다.

그렇기에 값이 할당되기 이전에 해당 변수가 사용되면 "undefined"가 뜨는 것입니다.

할당이란 해당 변수에 어떤 값을 부여하는 것을 의미합니다.

정확히 얘기하면 값을 부여하는 것이 아니라 해당 값이 저장된 메모리 위치를 저장하는 것으로 알고 있습니다.

그렇지만 우선은 쉽게 생각해서 값을 부여하는 것이라고 보시면 될것 같습니다.

 

 

이제 호이스팅이 무엇인지 알아보겠습니다.

아래가 호이스팅에 대한 간략한 설명입니다.

---

자바스크립트는 코드가 실행되기 전에 선언된 변수와 함수를 가져가서 메모리에 저장해둔다.
이때 변수들을 해당 변수가 가지고 있는 범위의 최상단으로 끌어올린다.
var 호이스팅시 변수의 선언과 초기화를 같이 해버린다!
그래서 값이 할당되기 전에 사용되면 undefined가 뜬다.
함수만 지역변수로 인식하고 나머지는 다 전역변수로 인식해서 호이스팅 한다.

---

그리고 몇몇 글들에서 호이스팅은 var에서만 된다고 봤던 거 같은데 그렇지 않다고 합니다.

let도 호이스팅이 지원되는데... 되는데...!!

차이가 있습니다.

Temporal Death Zone (TDZ) 라는게 있어서 var의 호이스팅과는 차이가 있다고 합니다.

var와 달리 let은 TDZ 때문에 해당 변수가 선언이 되고 할당이 되기 이전에 사용하려고 하면 에러가 뜹니다.

 

# TDZ 에러 예시

ReferenceError : Cannot access '해당 변수' before initialization

 

 

# 호이스팅의 가장 기초적인 예시

console.log(a);

var a = 2;

console.log(a);

정답은 undefined / 2

// var의 호이스팅으로 인해 변수 'a'가 선언되고 값이 할당되기 이전에 console.log를 찍어도 에러가 뜨지 않는다.

    var를 let으로 바꾸면 "ReferenceError: a is not defined" 뜨는 것을 알 수 있다.

 

 

# 함수 안의 변수는 지역변수와 전역변수 중 어떤 것으로 인식될까?!

function fnc() {
    var b = 3;
}

console.log(b);

정답은 ReferenceError: b is not defined

// 함수 안의 변수는 지역변수로 인식되어 그 범위 밖에서 사용하면 "ReferenceError: b is not defined" 뜬다.

    var와 let 동일

 

 

# 함수를 제외한 나머지 var 변수들은 지역변수와 전역변수 중 어떤 것으로 인식될까?!

console.log(a);

for (var a = 1; a<5; a++) {
    console.log(a);
}

console.log(a);

정답은 undefined / 1 / 2 / 3 / 4 / 5

// 함수를 제외한 나머지 var 변수들은 전역변수로 인식된다.

일반적으로 for문, if문 등을 사용했을 때 해당 스코프 범위 밖에서 그 변수를 호출하면 에러가 발생해야 하지만 위에서처럼 에러가 발생하지 않고 예상치 못한 값이 나올 수 있어서 유의해야 합니다!

그래서 위의 예제에서 var를 let으로 바꾸면 for문 밖에서는 에러가 발생함을 알 수 있습니다.

 

 

<참고한 자료>

호이스팅에 대해서 재미있게 잘 알려주셔서 공유합니다!

https://www.youtube.com/watch?v=fETYLCU2YYc 

 

https://mong-blog.tistory.com/entry/JS-%ED%98%B8%EC%9D%B4%EC%8A%A4%ED%8C%85hoisting

[JS] 호이스팅(hoisting)