var, let, const

김태완·2022년 2월 23일
0

프론트엔드

목록 보기
19/30
post-thumbnail

js에서 변수를 선언하는 방법들을 자세하게 정리해보자.

변수선언과 변수할당

javascript에서 변수선언시에는 선언 -> 초기화 -> 재할당순으로 진행된다.

  • 선언 : js엔진에 변수명을 알린다
  • 초기화 : 값을 저장하기위해 암묵적으로 undefined를 저장
  • 재할당 : 초기화한 값을 재할당하는것.

var

  • 선언시 초기화가 동시에 진행된다, 따라서 선언시 undefined가 자동으로 초기화되고 그 상태로 호이스팅이 된다. 따라서 아래처럼 선언 이전에 사용을 해도 undefined가 찍힌다.
console.log(a) // undefined
var a;
  • 심지어 변수선언이 중복해서 가능하다(ㄷㄷ;)
var a = 1;
console.log(a) // 1 
var a = 2;
console.log(a) // 2

let, const

  • 호이스팅이 되기는한다. 정확히 해당 스코프의 최상단으로 호이스팅이 되지만,
    선언 이후 값이 초기화되기전에는 TDZ (Temporal Dead Zone)에 빠져있어서 선언이전에 사용하게되면 reference error가 발생한다!
console.log(a) // undefined
console.log(b) // reference error!
console.log(c) // reference error!

var a = "ktw"
let b = "ktw"
const c = "ktw"

결론

  • var는 선언시 자동으로 undefined로 초기화됨.
  • let, const는 선언따로 초기화 따로임. 선언이후, 초기화 이전에는 TDZ에 빠져있어서 이상태에서 참조를 하면 reference error가 발생한다.
  • let은 재할당이 가능하고 const는 불가능함.
  • var, let, const 모두 호이스팅이 된다!!! 단, var는 함수스코프를가지고 let, const는 블록스코프를 가진다. (아래 예시에서 var는 함수전체, let,const는 if문안에서만 사용가능)
function varArea(){
	if(){
    	var a = 1;
        let b = 2;
        const c = 3;
    }
}
profile
프론트엔드개발

0개의 댓글