JS에서 사용되는 변수 선언 키워드는 var, let, const가 있다.
const는 그 쓰임이 비교적 명확해 var, let과 차이가 있지만, var과 let의 차이는 무엇이고 언제 무엇을 써야할지 애매하다.
var, let, const의 특징과 주의사항을 정리했다.
1. Var
var은 2015년의 ES6이 나오기 전까지 유일한 변수 선언 키워드였다.
따라서 2015년 이전의 모든 js 코드의 변수 선언은 var로 이루어졌다.
현재는 let, const의 등장으로 예전보다 쓰임이 줄어들었다.
그러나 예전 브라우저에서 코드를 실행해야 할 경우, var로 변수를 선언해야 한다.
2. Let
let은 ES6이 나오면서 등장한 변수 선언 키워드이다.
var과의 차이점이 여러 가지 존재한다.
1) let으로 선언된 변수는 같은 scope에서 절대 다시 선언될 수 없다.
var로 선언하는 경우, 다음과 같은 코드에서 에러가 발생하지 않는다.
var x = "John Doe";
var x = 0;그러나 let으로 선언하는 경우, 에러가 발생한다.
let x = "John Doe";
let x = 0;2) let으로 선언된 변수는 사용되기 전에 무조건 선언되어야 한다.
js는 ES6 이전에는 Global Scope과 Function Scope만이 존재했다.
ES6부터 let과 const가 생겨나면서 Block Scope이 생겼다.
Block Scope에서는 block 내부에서 선언된 변수들에 대해 block 밖에서 접근할 수 없다.
var로 선언하는 경우, 다음과 같이 block 밖에서 x를 사용할 수 있다.
{
var x = 2;
}
// 여기서 x가 사용 가능하다그러나 let으로 선언하는 경우, 다음과 같다.
{
let x = 2;
}
// 여기서 x가 사용 불가하다3) block 안에서 let으로 다시 선언된 변수는 block 밖의 변수에 영향을 주지 않는다.
var로 선언하는 경우, block 내부에서 다시 선언하면 block 외부의 변수까지 변하게 된다.
var x = 10;
{
var x = 2;
}
// x값이 2로 변한다.let으로 선언하는 경우, 그렇지 않다.
let x = 10;
{
let x = 2;
}
// x값이 10으로 유지된다.4) let은 선언되기 전에 사용될 수 없다.
var로 선언하는 경우, 선언되기도 전에 변수 사용이 가능하다.
이는 var로 선언된 변수는 맨 위로 hoisting되고 initialized되기 때문이다.
따라서 다음과 같은 코드가 가능하다.
carName = "Volvo";
var carName;그러나 let으로 선언하는 경우, 선언되기 전에 변수가 사용될 수 없다.
이는 let으로 선언된 변수는 맨 위로 hoisting되기는 하지만, initialized되지 않기 때문이다.
따라서 다음과 같은 코드가 불가하다.
carName = "Saab";
let carName = "Volvo";- Hoisting (호이스팅)이란 모든 선언들을 현재 scope의 맨 위로 옮기는 것을 의미한다.
hoisting을 제대로 이해하지 못했다면 프로그램에 버그나 에러가 발생할 수 있다.
따라서 이를 피하기 위해 항상 scope의 맨 위에 모든 변수들의 선언을 하는 것이 좋다.
3. const
const 또한 let과 마찬가지로 ES6 이후로 등장한 변수 선언 키워드이다.
특징 1) const는 let이나 var과는 다르게 다시 할당이 불가능하다.
const PI = 3.141592653589793;
PI = 3.14; // 에러가 발생한다.
PI = PI + 10; // 에러가 발생한다.따라서 const는 value가 절대 변하지 않을 것을 알 때 사용한다.
특징 2) const는 선언될 때 무조건 값을 할당해야 한다.
다음과 같은 코드는 올바르지 않다.
const PI;
PI = 3.14159265359;특징 3) const는 constant value를 정의하는 것이 아니라, value로의 constant reference를 정의한다.
따라서 value, array, object를 다시 할당하는 것은 불가능하지만, constant array의 elements, constant object의 properties를 바꾸는 것은 가능하다.
다음과 같이 array를 다시 할당하는 것은 불가능하다.
const cars = ["Saab", "Volvo", "BMW"];
cars = ["Toyota", "Volvo", "Audi"];그러나 다음과 같이 constant array의 element를 바꾸는 것은 가능하다.
const cars = ["Saab", "Volvo", "BMW"];
cars[0] = "Toyota";
cars.push("Audi");특징 4) const는 let과 마찬가지로 block scope가 적용된다.
const x = 10;
{
const x = 2;
// x값은 2이다.
}
// x값은 10이다.특징 5) 선언되기 전에 const 변수를 사용할 수 없다.
let과 마찬가지로 const는 맨 위로 hoisting되지만 initialized되지 않기 때문이다.
alert (carName);
const carName = "Volvo";
// ReferenceError가 발생한다.*참고
https://www.w3schools.com/js/js_variables.asp
https://www.w3schools.com/js/js_let.asp
https://www.w3schools.com/js/js_const.asp
https://www.w3schools.com/js/js_hoisting.asp
