[Javascript 문법] var, let, const 차이, 사용법

1.변수의 3가지 종류 Why?

자바스크립트에서 변수를 선언하는 법은 var, let, const 3가지가 있습니다.

var 변수 선언 방식 이외에 let과 const는 ES6 이후 나온 문법으로, 코드량이 많아질 때 오류를 막기 위해서 탄생했습니다.

 

예를 들어, name 이라는 변수를 선언한 것을 잊고 다시 선언해서 문제가 발생한 경우, var를 사용하면 찾기 힘들지만 let을 사용하면 런타임 이전에 에러가 발생하여 많은 문제를 방지할 수 있습니다.

""" var를 썼을 때 """
var name = 'kim'
var name = 'lee'  // 정상 동작을 하여, 똑같은 변수명을 썼음에도 알 수 없습니다

""" let을 썼을 때 """
let name = 'kim'
let name = 'lee'	// SyntaxError가 발생하여, 실행 전에 변수명이 중복된 것을 알 수 있습니다.

특징을 표로 간단하게 정리해 보았습니다.

종류	재선언	재할당	스코프	초기화	호이스팅	TDZ
var	O	O	함수 레벨	선언 시	O	X
let	X	O	블록 레벨	선언 후	O	O
const	X	X	블록 레벨	선언 시	O	O

자세한 차이는 다음 챕터에서 다루고, 특이한 점만 설명해 보겠습니다.

• let은 선언과 초기화가 분리 되어있고 중간에 TDZ의 영향을 받습니다. 
• 호이스팅은 모두 발생하지만, let, const는 TDZ의 영향을 받기 때문에 호이스팅이 발생하지 않는 것처럼 동작합니다.
• const는 선언과 동시에 초기 값을 할당해 주어야 합니다.

 

---

 

2.var, let, const의 차이

 

재선언

var top = 'Garen'
var top = 'Darius'        // 재선언이 가능함

let mid = 'Syndra'
let mid = 'Pantheon'     // SyntaxError: 재선언 불가

const bottom = 'Ezreal'
const bottom = 'KaiSa'  // SyntaxError: 재선언 불가

재할당

var top = 'Fiora'
top = 'Aatrox'         // 재할당이 가능함

let mid = 'Zed'
mid = 'Viktor'        // 재할당이 가능함

const bottom = 'Varus'
bottom = 'Lucian'    // SyntaxError: 재할당 불가 (immutable)

---

리액트를 공부한 분이라면  'const에 재할당 하는걸 본거같은데?' 라는 의문이 들 수 있을 것 같습니다.

const는 배열, 객체일 때 요소를 변경하는건 가능하기 때문입니다.

예를 들어, 

const ban = ['Lee Sin','Hecarim','Graves']
ban[0] = 'Master Yi'             // 배열,객체 자체가 아닌, 요소를 변경하는 것은 가능

const ban = ['Irelia','Katarina','Yone']
ban = ['Renekton','Gwen','KSante']   // TypeError: 아예 새로운 배열,객체를 할당하는 것은 불가능

요소를 변경하는 것과 새로운 배열,겍체를 할당하는 것은 다른 것임을 알 수 있습니다.

 

스코프

var는 함수 레벨 스코프이므로 함수 블록만 스코프로 인정하기 때문에, if, for 블록에서 생성한 변수는 전역변수가 됩니다.

for (var i=0;i<3;i++) {
	console.log(i); 0,1,2
}
console.log(i);    // 3

따라서 전역변수가 남발되어 원치 않는 값이 찍힐 수 있습니다.

 

하지만 let, const는 블록 레벨 스코프이므로, '{ }' 안에서만 작동하는 지역변수가 되므로, 외부에서 참조가 불가능합니다.

for (let i=0;i<3;i++) {
	console.log(i); 0,1,2
}
console.log(i);    // ReferenceError: i is not defined

if (true){ 
    const a = 3
}
console.log(a)    //ReferenceError: a is not defined

 

---

3.var, let, const 사용법 정리

변수를 선언할때 웬만하면 const를 사용하시고 재할당이 필요하다고 생각될 경우 let을 사용하시는 걸 추천드립니다.

이는 코드가 많아지면 생길 오류를 빠르게 찾기 위해서 이고 var의 사용은 자제하는 습관을 갖도록 합시다.