JS 변수 선언 방식의 차이: let, const, var

인코딩·2022년 7월 25일

JavaScript

목록 보기
1/8

변수 타입

let - 재선언 불가, 재할당 가능.
const - 재선언, 재할당 불가.
var - 재선언, 재할당 가능.

var는 선언하기 전에 사용할 수 있다.(호이스팅)
선언은 hoisting 되지만, 할당은 hoisting되지 않기 때문에 undefined로 확인된다.
let과 const도 호이스팅이 된다. 하지만 error가 난다. 왜죠?

호이스팅
var 선언문이나 function 선언문 등을 해당 스코프의 선두로 옮긴 것 처럼 동작하는 특성.
JS는 모든 선언에서 호이스팅이 일어난다. 하지만 let, const, 함수표현식은 호이스팅이 발생하지 않는 것 처럼 동작한다. 왜? 이유는 일시적 사각지대(Temporal Dead Zone)에 빠지기 때문.
선언과 초기화가 각각 되기 때문에 (할당 이전에는)변수를 참조할 수 없는 것이다.
이는 코드를 예측 가능하게 하고 잠재적인 버그를 줄일 수 있다.

변수의 생성과정

  1. 선언 단계
  2. 초기화 단계
  3. 할당 단계

var

  1. 선언과 초기화가 동시에. -> 할당 전에 호출하면 error가 나지 않고 undefined가 나옴.
  2. 할당.

let

  1. 선언 단계 -> hoisting 되면서 이루어짐
  2. 초기화 단계 -> 실제 코드에 도달했을 때 이루어짐
  3. 할당 단계

const

  1. 선언+초기화+할당이 동시에.
    선언과 동시에 할당해야 한다(=초기화).

var: 함수 스코프
let, const: 블록 스코프

추가적으로

함수선언식(function A(){~})은 호이스팅이 되고,
함수표현식(let A = function(){~})은 호이스팅이 안되..는 것 처럼 보인다.
함수 표현식을

A();

var A = function() {
 	console.log('test'); 
}

와 같이 var로 선언 하여도 호이스팅이 안되는 이유는,,,~~~

var A;

A();

var A = function() {
 	console.log('test'); 
}

이렇게 호이스팅이 되었을때 A가 함수인지 얘는 모른다..


이런 결과가 나온다.

profile
인생을 코미디처럼 딩기딩딩기딩

0개의 댓글