2022.08.14 TIL : [자바스크립트] 호이스팅, let 과 var의 차이

✅호이스팅, let 과 var의 차이

 

호이스팅이란, 함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효 범위의 최상단에 선언하는 것을 말합니다.

다시 말해 변수와 함수의 메모리 공간을 미리 할당해두는 것이죠!

 

자바스크립트 엔진은 코드를 실행하기 전 실행 컨텍스트를 위한과정에서 모든 선언(var, let, const, function, class)을 스코프에 등록합니다. (스코프 = 변수와 선언이 유효한 범위)

그리고 코드를 실행시킬 때, 함수 안에 존재하는 변수/함수선언에 대한 정보를 기억하고 있다가 실행시킵니다.

var 키워드로 선언한 변수와 함수 선언문일 경우 선언문보다 참조나 호출이 먼저 나와도 오류 없이 동작합니다.

그러나 let과 const 키워드로 선언한 변수들은 선언문 보다 참조나 호출이 먼저 나오면 참조에러(ReferenceError)가 뜨게 되죠.

 

그렇다면 let 과 const 변수들은 호이스팅이 되지 않은 것일까요?

 

그렇지 않습니다.

 

let과 const 변수도 var 변수와 마찬가지로 코드 실행 전 선언이 끌어올려진 게 맞으나,  선언만 메모리에 저장되어 있을 뿐, 초기화되지 않은 상태로 저장되어 있는 것입니다.

 

그래서 코드 실행 전 참조를 하게 되면 참조에러가 뜨는 거구요!

 

그래서 사실 모든 JS 내에서의 모든 변수와 함수는 호이스팅이 되지만,

var 변수는 undefined로 초기화되고 나머지 변수들은 초기화되지 않은 채 선언만 메모리에 저장되기 때문에 마치 var 변수 '만' 호이스팅이 이루어진 것 처럼 보이는 것입니다!

 

https://www.youtube.com/watch?v=HsJ4oy_jBx0&t=413s 

좀 더 편한 이해를 돕고자 얄팍한 코딩지식 유튜버님의 동영상 주소 남겼습니다!

 

영상 썸네일이 스코프라고 되어있지만 스코프 뿐 만 아니라 호이스팅과 let과 var 변수의 차이도 설명해주시네요!