[면접-JS] var,let,const 차이 with호이스팅

목차
1. 호이스팅 
    1-1. 변수 호이스팅
    1-2. 함수 호이스팅
2. var, let ,const 비교

 

1. 호이스팅 

자바스크립트는 실행전에 미리 호이스팅을 통해서 호구조사를 한다.

이때 변수들을 미리 담아둔다. 

이걸 호이스팅이라 하는데 자바스크립트는 엔진이 실행 컨텍스트를 구성할 때 enviormentRecord에 식별자의 정보를 수집한다. 이러한 과정을 통해서 엔진은 함수를 실행하기도 전에 해당컨텍스트 내부 변수명들을 이미 알고있다.

이게 마치 끌어올린 것처럼 보여 호이스팅(=끌어올리다)이라고 명칭한다.

호이스팅은 즉, 선언문이 있는 코드라인을 물리적으로 끌어올린게 아니라 자바스크립트 엔진이 먼저 전체코드를 스캔하고, 그정보를 어딘가에 담아놓는데 그어딘가가 실행컨텍스트의 enviormentRecord이다.

생성 단계 : 선언문만 실행해서 enviormentRecord에 기록
실행 단계  : 선언문 외 나머지 코드 순차적 실행 enviormentRecord 참조하거나 업데이트

 

 

1-1. 변수 호이스팅

 

일단 생성단계에서 전체코드를 스캔하면서 선언할게 있는지 보고 기록한다. 이때 var 키워드는 선언과 동시에 초기화(메모리에 변수 저장을 위해 공간을 확보하는 단계, 기본값으로 undefined가 할당된다.)를 진행한다.

 

아래예시를 보면 자바스크립트 엔진은 돌면서 "어 ! TVChannel이 있네 담아두어야 겠다 !" 하고 기록해둘것이다. 이때 var 특성상 선언과 초기화 동시해 진행하기에 미리 undefined 값이 들어가 있다. 

 

이후 실행하면 담겨있는 undefined 값을 출력하고 이후에 Netflix값을 할당한뒤 다시 Netflix값을 출력하는 과정을 거친다. 

 

근데 let, const는 에러가 뜬다. 호이스팅 과정은 선언만하고 초기화는 이루어지지 않는다.

let로 선언한 변수는 선언 단계와 초기화 단계가 분리되어 실행되기 때문이다.

선언 단계 : 호이스팅으로 선언 단계가 먼저 이루어지고,
초기화 단계 : 실제 코드에 도달했을 때 초기화 단계가 이루어진다.

 

이때 선언은 되고 값이 초기화가 되지않는 경우를 일시적 사각지대라하는데 이때문에 오류가 발생하게 된다.

일시적 사각지대(TDZ: Temporal Dead Zone)
: 스코프의 시작 지점부터 초기화 시작 지점까지의 구간다른 말로, 변수의 선언부터 변수의 초기화가 이루어지기 전까지의 구간

 

그래서 생성단계에서 초기화 된 값을 가지지 못한다.

 

특히 const로 선언한 변수는 선언, 초기화, 할당 단계가 동시에 이루어진다.

그렇지 않으면 문법 오류가 발생한다.

console.log(TVCHANNEL); // ❗️ Uncaught ReferenceError: TVCHANNEL is not defined
const TVCHANNEL; // ❗️Uncaught SyntaxError: Missing initializer in const declaration
const TVCHANNEL = "NETFLIX"; // 선언, 초기화, 할당

 

키워드	선언, 초기화, 할당
var	선언과 초기화를 동시에
let	선언과 초기화 분리
const	선언, 초기화 할당이 동시에

 

1-2. 함수 호이스팅

 

함수 표현식(변수에 함수를 담아 표현) : 변수 호이스팅이랑 동일하게 동작한다. 따라서, 함수 표현식을 정의하기 전에는 사용할 수 없다.

 

 

함수선언식 : 선언과 동시에 완성된 함수 기록해둔다. 선언과 동시에 함수가 생성되어 선언전에도 함수를 사용할 수 있다.

 

 

 

2. var, let ,const 비교

var

중복 선언 가능. 재할당 가능.

var title = 'book';
console.log(title); // book

var title = 'movie';
console.log(title); //movie

title = 'music';
console.log(title);//music

•  최초 변수 var 는 선언한 변수가 동일한 이름으로 중복 선언이 가능하다. 즉, 마지막에 할당된 값이 최종 변수에 저장된다. 
• 하지만 이럴 경우에 내가 잊고 다른것을 입력하는 불상사가 발생할 수 있다.

let

중복선언 불가. 재할당 가능. 

let title = 'book';
console.log(title); // book

let title = 'movie';
console.log(title); 
//Uncaught SyntaxError: Identifier 'title' has already been declared

title = 'music';
console.log(title);//music

 

이후에 이러한 혼선을 피하기 위해 let이 등장했다.

let은 중복선언 불가능 근데 재할당은 가능하다. let은 var과 달리 중복선언 시, 해당 변수는 이미 선언되었다는 에러 메시지를 뱉는다.

 

const 

중복선언 불가. 재할당 불가. 

const title = 'book';
console.log(title); // book

const title = 'movie';
console.log(title); 
//Uncaught SyntaxError: Identifier 'title' has already been declared

title = 'music';
console.log(title);
//Uncaught TypeError: Assignment to constant variable

 

키워드	중복선언 재할당
var	중복선언 가능,재할당 가능
let	중복선언 불가능,재할당 가능
const	중복선언 불가능,재할당 불가능

 

 

출처:

https://cheershennah.tistory.com/231 

https://velog.io/@wlwl99/%EB%B3%80%EC%88%98-%EC%84%A0%EC%96%B8-%EC%B4%88%EA%B8%B0%ED%99%94-%ED%95%A0%EB%8B%B9-%ED%98%B8%EC%9D%B4%EC%8A%A4%ED%8C%85

변수 선언, 초기화, 할당 & 호이스팅 (Hoisting)

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

https://cheershennah.tistory.com/231

[Javascript] var / let / const 차이점 ?