자바스크립트에서는 다양한 종류의 변수를 사용할 수 있으며, 각 변수의 사용법과 예시 코드를 보면서 한 번 살펴보자.
1. 변수의 종류와 각각의 특징 및 사용법
• var
ES5 이전에 사용되던 변수 선언 키워드고 var의 범위는 기본적으로 변수를 사용할 수 있는 위치를 의미한다. var 선언은 전역 범위 혹은 함수 범위로 지정된다. var변수가 함수 외부에서 선언될 때의 범위는 전역이다. 즉, 함수 블록 외부에서 var를 사용하여 선언된 모든 변수를 전체 윈도 상에서 사용할 수 있는 것이다. var가 함수 내에서 선언될 때는 함수 범위로 지정된다. 즉, 해당 함수 내에서만 사용하고 접근할 수 있다.
var x = "this is x";
function newFunction() {
var y = "this is y";
}
위의 코드에서 x는 함수 밖에서 선언됐으므로 전역이지만 y는 함수 내에서만 사용됐으므로 해당 함수 내부에서만 사용 가능하다.
var의 또 다른 특징은 재선언되고 업데이트 될 수 있다는 점이다.
var x = "hello Jack";
var x = "Nice to meet you";
• var의 호이스팅
호이스팅이란 변수와 함수 선언이 맨 위로 이동되는 자바스크립트 메커니즘이다.
console.log(x);
var x = "say goodbye";
위와 같은 코드가 있을 때 var변수는 범위 내에서 맨 위로 올려지고, 값은 undefined(정의되지 않음)으로 초기화된다.
• var의 취약점
var x = "Hungry Developer";
var cnt = 5;
if(cnt > 4){
var x = "Full Developer";
}
console.log(x); // "Full Developer"
cnt > 4가 true를 반환하기 때문에 x는 "Full Developer"로 재정의 된다. 의도적으로 재정의한 것이라면 상관없지만 위의 코드가 몇천 줄 이상이 되는 긴 코드라고 생각해 보자, 위에서 x라는 변수를 선언했는데 선언한 사실을 인식하지 못하고 아래에서 또 다른 용도의 변수로 선언할 수 도 있게 된다. 이런 경우 뜻밖의 출력 결과에 놀랄 수 도 있다. 그리고 많은 버그를 발생시킬 수 있기 때문에 let과 const가 필요하게 된 것이다.
• let
ES6부터 도입된 변수 선언 키워드로 블록 스코프를 지원한다. 변수를 재할당할 수 있다. 위에서 언급했던 var 선언에 대한 개선을 반영한 let이 현재 변수 선언에서 선호되고 있다. 방금 다뤘던 var의 문제점을 해결할 수 있는 이유에 대해 한 번 살펴보자.
let은 블록 범위로 선언되는데 하나의 블록은 중괄호 속에서 존재하며, 중괄호 안에 있는 것은 모두 블록 범위이다. 따라서 let으로 선언된 변수는 해당 블록 내에서만 사용이 가능하다.
let cnt = 5;
if(cnt > 4) {
let x = "Full Developer";
console.log(x);// "Full Developer"
}
console.log(x); // x is not defined
중괄호로 감싸진 x변수가 정의된 블록 외부에서 x를 사용했더니 에러가 반환되는 것을 확인할 수 있다. let 변수는 블록 범위이기 때문이다.
또한 let은 업데이트될 수 있지만 재선언은 불가능하다. var와 마찬가지로 let으로 선언된 변수는 해당 범위 내에서 업데이트될 수 있다. 하지만 var와 달리 let 변수는 범위 내에서 다시 선언할 수 없다.
let x = "Hungry Developer";
let x = "Full Developer"; // error: Identifier 'x' has already been declared
그러나 동일한 변수가 다른 범위 내에서 정의된다면 에러는 더 이상 발생하지 않는다.
let x = "Hungry Developer";
if(true){
let x = "Full Developer";
console.log(x); // "Full Developer"
}
console.log(x); // "Hungry Developer"
오류가 없는 이유는 무엇일까? 두 예제가 서로 다른 범위를 가지므로 서로 다른 변수로 취급되기 때문이다. 따라서 var보다 let이 더 나은 선택이 될 수 있는 것이다. let을 사용하는 경우라면 변수가 범위 내에서만 존재하지 않기 때문에 이전에 이미 사용한 적이 있는 변수 명에 대해서 더 이상 신경 쓰지 않아도 좋다. 또한, 범위 내에서 동일한 변수를 두 번 이상 선언할 수 없기 때문에 앞서 설명한 var의 문제가 발생하지 않는다.
let도 var와 마찬가지로 let선얻은 맨 위로 끌어올려진다. undefined(정의되지 않음)으로 초기화되는 var와 다르게 let의 키워드는 초기화되지 않는다. 선언 이전에 let변수를 사용하려고 시도한다면 Reference Error(참조 오류)가 발생할 것이다.
• const
ES6에서 도입된 변수 선언 키워드로 블록 스코프를 가지며 한 번 할당하면 재할당할 수 없다. 상수를 선언할 때 사용한다. const로 선언된 변수는 일정한 상수 값을 유지한다. 또한 const 선언은 let 선언과 몇 가지 유사점을 공유한다.
const의 블록 범위는 let 선언처럼 const 선언도 선언된 블록 범위 내에서만 접근 가능하다. 그리고 const로 선언된 변수의 값이 해당 범위 내에서 동일하게 유지됨을 의미한다. 업데이트하거나 다시 선언할 수 없는 것이다. const로 변수를 선언한 경우에는 다음과 같은 두 작업을 수행할 수 없다.
const x = "Hungry Developer";
x = "Full Developer";// error: Assignment to constant variable.
const x = "Hungry Developer";
const x = "Full Developer";// error: Identifier 'greeting' has already been declared
따라서 모든 const 선언은 선언하는 당시에 초기화되어야 한다. 하지만 객체의 경우는 다소 다른 점이 있다. const 객체는 업데이트할 수 없지만 객체의 속성은 업데이트할 수 있다.
const x = {
message: "Hungry Developer",
cnt: 5
};
위와 같은 코드가 있을 경우 아래와 같은 방식은 불가능하다.
x = {
words: "Full Developer",
number: "Five"
}; // error: Assignment to constant variable.
하지만 아래의 코드처럼 속성은 변경이 가능하다.
x.message = "Full Developer";
오류를 반환하지 않고 x.message의 값이 업데이트될 수 있다. const는 let과 마찬가지로 const 선언도 맨 위로 끌어올려지지만 초기화되지는 않는다.
2. 마무리 및 요약
• var 선언은 전역 범위 또는 함수 범위이며 let과 const는 블록 범위이다.
• var 변수는 범위 내에서 업데이트 및 재선언을 할 수 있다.
• let 변수는 업데이트할 수 있지만, 재선 언은 할 수 없다.
• const 변수는 업데이트와 재선언 둘 다 불가능하다.
• 세 가지 모두 최상위로 호이스팅 된다. 하지만 var 변수만 undefined(정의되지 않음)으로 초기화되고 let과 const 변수는 초기화되지 않는다.
• var와 let은 초기화하지 않은 상태에서 선언할 수 있지만, const는 선언 중에 초기화해야 한다.