[JavaScript] var 와 let 그리고 const

<!-- 본 포스팅은 개인공부를 위한 용도로 잘못된 정보가 있을 수 있습니다. 오류 발견시 댓글 환영합니다. -->

키워드 var, let 그리고 const

---

기본

---

ECMAScript 5까지는 식별자에 값을 넣기 위해서는 var 키워드를 사용하여 변수를 정의하는 방법 밖에 없었다.

그런데 ECMAScript 6부터 let 키워드를 사용한 변수, const 키워드를 사용한 상수 라는 개념이 추가되었다

.

사용법은 키워드 '식별자 = 값;' 형태로 선언하며, 값을 넣은 후 식별자를 통해 내부의 값을 사용할 수 있다.

var, let, const 키워드를 사용한 변수/상수의 정의 및 출력

var variableA = 10;
let variableB = 20;
const constantC = 30;
 
console.log(variableA);
console.log(variableB);
console.log(constantC);

식별자에 값을 넣을 때, 사용하는 키워드 var, let, const를 정리하면 아래와 같다.

키워드	구분	선언 위치	재선언
var	변수	전역 스코프	가능
let	변수	해당 스코프	불가능
const	상수	해당 스코프	불가능

변수(var, let)와 상수(const) 구분

---

변수는 '변할 수 있는 값'이고, 상수는 '변하지 않는 값'이다.

let 키워드를 사용한 변수 variable의 값은 변경 가능하다.

let variableA = 100;
let variableB;

variableA = 200;

const 키워드를 사용한 상수 constant는 변경할 수 없다.

또한 상수는 선언할 때 반드시 값을 넣어줘야 한다.

const constantA = 100;
const constantB;                // 상수 선언 불가능

constantA = 200;              // 상수 값 변경 불가능

var 키워드로 선언한 변수와 let 키워드로 선언한 변수의 차이

---

var와 let의 차이를 설명하기 위해서는 먼저 스코프에 대해 알아야 한다.

** 스코프 : 특정 변수를 사용할 수 있는 유효 범위. 전역 변수와 지역 변수를 결정하는 요인이 된다.

// 전역 스코프
{
// 스코프 A
{
// 스코프 B
}
}

일반인 프로그래밍 언어에 따르면 특정 스코프 안에서 선언한 변수는 해당 스코프 안에서만 사용할 수 있으며, 스코프를 벗어날 때 제거해야 메모리를 적절하게 이용할 수 있다.

그러나 자바스크립트의 var 키워드로 선언한 변수는 외부의 스코프에서 사용할 수 있다.

{
// 스코프 A
var variable = 300;
}
 
{
// 스코프 B
alert(variable);
}
 
// 전역 스코프
alert(variable);

위의 코드에서 스코프 A에서 선언한 variable은 스코프 B와 전역 스코프에서 사용되었다.

반면 let 키워드는 자원을 적절하게 이용하도록 특정 스코프 내부에서만 변수를 사용될 수 있도록 한다.

{
// 스코프 A
let variable = 300;
}
 
{
// 스코프 B
alert(variable);
}
 
// 전역 스코프
alert(variable);

let 키워드로 선언한 변수 variable은 변수를 선언한 스코프 A에서만 사용 가능하므로 스코프 B와 전역 스코프에서 사용될 수 없다.

따라서 alert 함수를 호출하는 스코프에는 variable 변수가 선언되지 않았으므로 에러가 발생한다.

재선언

---

같은 이름으로 변수 또는 상수를 다시 선언하는 것을 재선언이라 한다.

var variableA = 10;
var variableA = 200;
 
let variableB = 20;
let vatiableB = 30;

var 키워드로 변수를 선언할 때는 문제 없으나, let 키워드로 변수를 선언한 후 재선언 할 경우 오류가 발생한다.

const 키워드 역시 재선언하면 오류가 발생한다.

정리

---

var 키워드는 일반적인 프로그래밍 언어와 많이 달라 익숙하지 못한 개발자들에 많은 혼란을 초래한다.

개인적으로 ECMAScript 6을 활용할 수 있는 환경이라면 var키워드 보다는 let과 const 키워드를 사용하는 것이 좋다고 생각한다.

그러나 아직 많은 자바스크립트 개발환경에서 var 키워드를 사용하고 있으므로 꼭 사용법을 알아두어야 하겠다.