Frontend/Javascript

[Javascript] var, let, const

oneyenee 2023. 9. 11. 00:44

변수와 상수

자바스크립트에서 변수는 "프로그래밍을 위해 하나의 값을 저장하는 저장소"라고 볼 수 있다.

JS는 이 변수를 선언하는 방식이 3가지로 나눠져 있는데,

오늘은 var, let, const 이 세가지 선언 방법에 대해서 정리하고자 한다.

 


변수?

 

💡
프로그램 실행 도중에 계속해서 바뀔 수 있는 값을 저장하는 저장소

상수?

💡
처음 할당한 값이 바뀌지 않는 저장소. 따라서 초기 선언 시 값을 비우고 선언하는 것도 불가능하고, 프로그램 실행 중 값을 바꾸는 것도 불가능

 

 

변수명 규칙

  • 변수명에는 기호를 쓸 수 없다. (but, 언더스코어_, 달러$ 는 제외)
  • 변수명은 숫자가 아닌 문자로 시작해야 한다. (ex- 6age는 불가, age5은 가능)
  • 예약어는 변수명으로 사용할 수 없다. (ex- if, else, for 등)

 

 

 


var, let, const 차이점 5가지

1. 중복선언

2. 재할당

3. 스코프 범위

4. 호이스팅 방식

5. 전역 객체 프로퍼티 여부

 

  중복선언 재할당 스코프 범위 호이스팅 방식 전역객체 프로퍼티 여부
const X X 블록 X
let X O 블록 X
var O O 함수 O O

 

 

# 스코프 범위

: 유효한 참조 범위.

  • var : 함수레벨 스코프(function-level scope). 함수 내부에 선언된 변수만 지역변수로 한정. 그 밖의 if문 for문 등과 같은 블록 내에서 선언한 변수는 전역변수로 간주. 뜬금없이 코드 블록 내부에서 선언된 변수를 전역에서 참조할 수 있음.
  • let, const : 블록레벨 스코프 (block-level scope). 함수는 물론이고 블록 내에서 선언된 변수는 지역변수로 인정.

 

 

 

# 호이스팅 방식

  • var : 변수 호이스팅이 발생. 변수 선언 전에 참조해도 에러가 발생하지 않음. 코드 실행 전에 변수가 선언되고 undefined로 초기화 된 상태
  • let, const : 변수 호이스팅이 반만 발생. 코드 실행 전 변수 선언만 해두고 초기화는 X. 런타임 후 선언문을 만났을 때 초기화 수행. 

 

 

💡
TDZ(Temporal Dead Zone) : let, const 처럼 변수의 선언과 초기화 사이에 일시적으로 참조가 불가능한 구간