const, let, var 호이스팅 넌 또 뭐임

기술면접을 가면 꼭 질문으로 나온다는 const, let, var 그리고 호이스팅

 

JavaScript Hosting

우선 짚고 넘어가야 할 Hoisting

인터프리터가 코드를 실행하기 전에 함수, 변수, 클래스 또는 import의 선언문을 해당 범위의 맨 위로 끌어올리는 것 처럼 보이는 현상이다. 

잘 구분해야 함! 변수선언/함수선언을 최상단으로 끌어올리는 것이 아니라 끌어올려진 것 같은 현상이다.

선언이 끌어올려지는 것이고 할당이 끌어올려지지는 않는다.

자바스크립트 엔진은 코드를 실행하기 전에 실행 가능한 코드를 형상화 하고 구분하는 과정 ( => 실행 컨텍스트를 위한 과정)을 거친다.

실행 컨텍스트 과정: 실행 가능한 코드가 실행되기 위해 필요한 환경

실행 되기 전에 꼭 실행 컨텍스트 과정을 거친다.

 

우선 나온 시기도 다르다. 

var는 ES 5문법이고 let, const는 ES 6문법이다. ES6도입 이전까지는 var 키워드 만을 이용해서 변수를 선언했었다.

자바스크립트는 인터프리터 언어이기 때문에 코드를 한줄한줄 읽어 내려 가는데 이 var 때문에 문제가 자주 발생했었다.

var a = "a"
console.log(a) // "a"

var a = "b"
console.log(a) // "b"

같은 변수에 다른 값을 할당하였는데도 에러가 안나고 다음 값을 출력해버린다. 

 

변수 생성 과정

변수 선언

값을 저장하기 위한 메모리 공간 확보, 저장한 메모리를 식별하기 위한 변수 이름 설정

 

변수 초기화

확보된 메모리 공간에 undefined를 할당하여 초기화

 

변수 할당

초기화 단계 후 undefined가 할당된 변수에 원하는 값을 재할당

 

var vs let vs const

var	let	const
재선언 가능	재선언 불가능	재선언 불가능
재할당 가능	재할당 가능	재할당 불가능
선언 전 호출 undefined (할당값 초기화)	선언 전 호출 참조오류	선언 전 호출 참조오류
hoisting 되어 변수 선언 전 참조 가능	변수 선언 시 할당 필수 아님	변수 선언 시 할당 필수

 

 

한 줄 요약 

Hoisting은 모든 선언이 코드의 선두에 끌어올려진 것 같은 현상이고

var는 선언, 초기화가 동시에 이루어지고 let, const는 선언단계만 호이스팅 된다.