javascript const, let, var

22.01.09

js의 변수형 3가지를 정리하겠습니다. 뭔지도 모르고 남들 따라하면서 얕은 개념으로 사용했었는데 한번 정리하고나니 머리에 확실히 들어옵니다.

 

 

 

1.  저들을 구분하는 3가지

 

1. 값 변경 가능 유무

2. 스코프 범위

3. 호이스팅 가능 유무

 

var/let은 선언 후 값 변경 가능

const는 생성할 때 선언된 초기값을 변경할 수 없음.

 

var은 함수 스코프를 가짐,

let과 const는 블록 스코프를 가짐

 

var은 호이스팅이 가능

let과 const는 호이스팅 불가능.

 

 

2. 추가 설명

 

값 변경 가능 유무

const는 선언시에 반드시 값을 작성해주어야하고, 값을 변경하지 않을 때 사용. 변수 값 자체는 바꿀수 없지만 const가 object일 때 property 값이나 배열의 요소 값은 바꿀 수 있다. 즉 참조하고 있는 주소를 바꿀 수 없는 것, 그 주소가 가르키고 있는 데이터를 바꿀 수는 있다.

 

스코프 범위

(var 함수 스코프, let const 블록 스코프)

 

스코프란 해당 변수를 사용할 수 있는 영역을 말하는데 블록 스코프란 {} 같은 블록에서만 범위가 정해진다. 따라서 var name = “inseo”; if(true) {var name = “hyungi”} 요렇게 하면 name has already been declared 오류가 뜬다.

 

호이스팅 가능 유무

js 엔진은 함수선언문 -> 변수 초기화 -> 코드실행의 순으로 이루어지는데

변수 선언이 어디에 있든 상관없이 다른 코드보다 먼저 실행되는 특징을 호이스팅(hoisting)이라 한다.

코드 실행 전 변수 초기화 단계에서 정적 환경의 선언적 환경 레코드에 변수 이름을 바인딩하게 된다.

(정적환경 안에 선언적 환경 레코드라는 property가 있음. 함수 안에 작성된 모든 변수가 그 안에 설정되기 때문에 변수를 찾을 때에는 선언적 환경 레코드에서 찾게된다.)

위 과정처럼 var은 변수 초기화 단계에서 선언적 환경 레코드에 undefined로 초기값을 설정하고 바인딩되는데, let과 const는 초기값을 아예 설정하지 않아 tdz(Temporal Dead Zone)에 들어가게 된다. var은 어쨌든 undefined라는 값이 있기 때문에 호이스팅이 가능하지만 let과 const는 ‘undefined’라는 값조차 없기 때문에 변수 선언코드 위에서 해당 변수를 사용하게 되면 에러가 발생하게 된다.