본문 바로가기
JavaScript

[JavaScript] 변수 생성 키워드 var, let, const

by Caffein not null 2024. 6. 29.

자바스크립트에는 자바와는 다르게 변수 생성시 자료형을 지정하지 않고 키워드를 사용한다.

ES6 이전에는 var 키워드로만 변수 선언이 가능했다.

하지만 var 키워드로 생성된 변수에는 여러가지 단점이 있다.

이를 보완하기 위해 ES6 이후 let, const 키워드가 추가되었다.

let을 사용하여 var 변수의 단점을 보완할 수 있고 const로 상수를 선언할 수 있다.

 

var 키워드의 단점

 

1. 중복 선언이 가능하여 데이터가 손실될 수 있다.

// var
var a = "apple";	// apple
var a = "banana";	// banana

// let
let b = "apple";	// apple
let b = "banana";	// SyntaxError: Identifier 'b' has already been declared

 

2. 블록 레벨의 스코프를 지원하지 않고 함수 레벨의 스코프를 지원하기 때문에 의도치 않게 전역 변수가 생성될 수 있다.

// 블록 스코프
// 제어문, 반복문 (if, for, while, try/catch)등의 코드 블럭 내부에서 사용시 전역변수로 생성된다.
if(true){
	var a = "apple";
    console.log(a)	// apple
}
console.log(a)	// apple

// 함수 스코프
// 함수 내부에서만 지역변수로 선언된다.
function useVar() {
  var b = "banana";
  console.log(b);	// banana
}
console.log(b);	// ReferenceError: b is not defined

 

3. 호이스팅으로 인해 코드가 이해하기 힘들어 질 수 있다.

// var
console.log(a); // undefined
var a = "apple";
console.log(a); // apple

// let
console.log(b); // Cannot access 'b' before initialization
let b = "banana";
console.log(b); // banana

 

1. 변수 선언시 var 키워드는 사용하지 않는게 좋다.
2. 변수에 재할당이 필요한 경우가 아니라면 const를 사용한다.
3. 재할당이 필요하다면 let을 사용한다.

그렇다면 var 키워드는 왜 남아있는 것일까?
그 이유는 브라우저 지원때문이다.
var 키워드를 삭제한다면 브라우저에서 더이상 var를 지원하지 않게되는데
그렇게 되면 var를 사용하여 작성된 많은 스크립트와 전세계 다양한 웹페이지들의 작동이 멈출것이다.
그렇기 때문에 사용하지 않지만 아직 남아있는 것이다.