[JavaScript] var, let, const

 

 

 

 

 

 

자바스크립트에서 변수를 선언하는 방법에는 

var, let, const 

세 가지가 있습니다.

 

 

 

 

 

 

 

1. 중복 선언 가능 여부

---

var : 중복 선언 가능

- var는 중복해서 변수 선언을 여러 번 해도 에러 없이 각각 다른 값이 출력될 수 있음

- 초기화 없이 선언만 한 경우엔 변수 선언문 자체가 무시됨 (이 또한 에러발생 하지 않음)

- 이는 기존에 선언했던 변수의 존재를 잊고 값을 재할당하게 되는 등의 실수를 저지르기 쉽다는 단점이 있음

// 변수 선언 + 초기화
var testVar = "TEST1";
console.log(testVar); // TEST1

// 변수 선언 + 초기화
var testVar = "TEST1";
console.log(testVar); // TEST1 

// 변수 선언 (초기화 X)
var testVar;
console.log(testVar); // TEST1

 

 

let / const : 중복 선언 불가능

- let, const로 선언한 변수는 중복 선언 불가능

- 아래 코드를 보면 이미 선언한 변수를 다시 선언할 경우 에러가 발생하는 것을 알 수 있음

- 변수 선언 시 let, const는 var에 비해서 코드 안전성을 높일 수 있음

let testLet = "TEST1";
let testLet = "TEST2"; // SyntaxError: Identifier 'testLet' has already been declared

const testConst = "TEST3";
const testConst = "TEST4"; // SyntaxError: Identifier 'testConst' has already been declared

 

 

 

 

 

 

 

 

 

2. 재할당

---

var / let : 값 재할당 가능

- var와 let은 변수 선언 및 초기화 이후에 반복해서 다른 값을 재할당 가능

var testVar = "aaaa";
testVar = "bbbb";
console.log(testVar); // bbbb 

let testLet = "cccc";
testLet = "dddd";
console.log(testLet); // dddd

 

 

const : 값 재할당 불가능

- const는 상수를 선언하는 키워드

- 초기 선언 및 초기화 한 뒤, 다른 값을 재할당 불가능

const testConst = "aaaa";
testConst = "bbbb"; // TypeError: Assignment to constant variable.

 

 

 

 

 

 

 

 

3. 스코프 (Scope)

---

스코프
스코프란 유효한 참조 범위를 뜻하며, var로 선언한 변수와 let, const로 선언한 변수의 스코프는 다름

 

var : 함수 레벨 스코프 (function-level scope)

- var는 함수 내부에 선언된 변수만 지역변수로 한정하며, 나머지는 모두 전역변수로 간주

- testVarFunc 함수 내부에서 선언된 testVar 변수는 함수 내부에서만 참조가 가능하며, 외부에서 참조 시 에러가 발생

- 함수를 제외한 영역에서 var로 선언한 변수는 전역변수로 취급

function testVarFunc() {    
	var testVar = "aaaa";    
	console.log(testVar);
} 

testVarFunc(); // aaaa 
console.log(testVar); // ReferenceError: testVar is not defined

 

 

- 자바스크립트에서는 if, for, while, try/catch 문 등의 코드 블록 { ... } 내부에서 var로 선언된 변수를 전역 변수로 간주
- 그렇기 때문에, 블록 외부에서도 어디에서나 참조 가능

if(true) {    
	var testVar = "aaaa";    
	console.log(testVar); // aaaa
}

 

 

let / const : 블록 레벨 스코프 (block-level scope)

- let, const는 함수 내부는 물론이며 if, for문 등의 코드 블록 { ... } 에서 선언된 변수도 지역변수로 취급

if(true) {    
	let testLet1 = "qqqq";    
	console.log(testLet1); // qqqq
}

function testLet() {    
	let testLet2 = "zzzz";    
	console.log(testLet2);
} 

console.log(testLet2); // ReferenceError: testLet2 is not defined

 

결론은 var는 함수 내부에 선언된 변수만 지역 변수로 인정하는 함수 레벨 스코프이고, let, const는 블록 내부에서 선언된 변수까지도 지역변수로 인정하는 블록 레벨 스코프

 

 

 

 

 

 

4. 호이스팅

---

호이스팅
호이스팅이란 자바스크립트의 Parser는 코드를 실행하기 전에 해당 코드를 한번 훑어보는 일종의 코드 평가 과정을 거치는데, 이때 변수 선언문을 미리 실행해 두기 때문에 뒤에서 선언된 변수도 앞의 코드에서 참조할 수 있게 되는 걸 말한다.

 

var : 변수 호이스팅 발생

- 아래 코드에서 변수 testVar 가 선언되기 전에 참조되었음에도 에러가 발생하지 않음

- 이는 코드 실행 전에 자바스크립트 내부에서 미리 변수를 선언하고 undefined로 초기화를 해두었기 때문

console.log(testVar); // undefined 
var testVar = "aaaa"; 
console.log(testVar); // aaaa

 

 

let / const : 다른 방식으로 변수 호이스팅 발생

- let, const로 변수를 선언하는 경우, 자바스크립트 내부에서는 코드 실행 전에는 변수 선언만 되며, 초기화는 코드 실행 과정에서 변수 선언문을 만났을 때 수행

- 값을 참조할 수 없어서 호이스팅이 발생하지 않는 것처럼 보이는 것임

- 변수의 선언과 초기화 사이에 일시적으로 변수 값을 참조할 수 없는 구간인 TDZ(Temporal Dead Zone)에 빠졌기 때문에 보이는 현상

console.log(testLet); // ReferenceError: testLet is not defined 
let testLet = "aaaa";
console.log(testLet); // aaaa

 

 

 

 

구분	중복선언	재할당	스코프	호이스팅
var	O	O	함수 레벨 스코프	변수 호이스팅 발생
let	X	O	블록 레벨 스코프	다른 방식으로 변수 호이스팅 발생
const	X	X	블록 레벨 스코프	다른 방식으로 변수 호이스팅 발생