변수 선언할 때 원래는 var
만 있었으나 ES6 부터 let
과 const
가 추가되었다. 쓰려고 보니 용어마다 미묘한 차이점이 있어 정리하고자 한다.
var 변수는 중복해서 선언이 가능하다. 똑같은 변수명일 경우 마지막에 할당된 값이 저장된다.
var a = 1;
console.log(a);
// 결과
// 1
var a = 2;
console.log(a);
// 결과
// 2
var 변수는 선언 및 초기화 이후에 다른 값을 재할당 시킬 수 있다.
var a = 1;
a = 5;
console.log(a);
// 결과
// 5
var 변수는 함수 내부에 선언된 변수만 지역변수로 한정하고, if문, for문, while문, try/catch문 등을 포함한 나머지는 모두 전역변수로 간주한다.
function test(){
var a = 1;
console.log(a);
}
test();
// 결과
// 1
console.log(a);
// 결과
// ERROR : a is not defined
if(true) {
var a = 1;
console.log(a);
}
// 결과
// 1
console.log(a);
// 결과
// 1
변수를 생성할 때는 호이스팅
이라는 현상이 일어난다. 호이스팅(Hoisting)
이란 변수의 선언을 변수 범위 맨 위로 끌고 오는 현상 혹은 var 선언문이나 function 선언문 등을 해당 스코프의 선두로 옮긴 것처럼 동작하는 특성을 말한다. 따라서 전역 변수로 var 나이 = 30;
이라고 선언했다 치면, JavaScript는 선언 부분과 할당 부분을 해체해서 해석한다. 순서대로 해석하다가 변수를 만나면 var 나이;
의 선언 부분을 페이지 맨 위로 끌고 올라오고, 나이 = 30;
의 할당 부분은 변수를 직접 선언한 위치에서 할당하는 것이다.
console.log(나이);
// 결과 : 아직 변수를 선언하기 전인데도 에러를 뱉어내는 것이 아니라 undefined가 뜬다. 바로 호이스팅 현상 때문이다.
// undefined
var 나이 = 30;
console.log(나이);
// 결과
// 30
let으로 선언한 변수는 중복 선언이 불가능하다. 이미 선언한 변수를 다시 선언할 경우 이미 선언됐다고 에러메세지를 뱉는다.
let a = 1;
let a = 2;
// 결과
// ERROR : Identifier 'a' has already been declared
변수 선언 및 초기화 이후에 반복해서 다른 값을 재할당 할 수 있다.
let a = 1;
a = 2;
console.log(a);
// 결과
// 2
var 변수와 다르게 함수 뿐만 아니라, if문, for문, while문, try/catch문 등의 코드 블록 {...} 에서 선언된 변수도 지역변수로 인식한다.
if(true) {
let a = 1;
console.log(a);
}
// 결과
// 1
console.log(a);
// 결과
// ERROR : a is not defined
JavaScript는 ES6에서 도입된 let
, const
를 포함하여 모든 선언(var, let, const, function, class)을 호이스팅한다. var
키워드로 선언된 변수와는 달리 let
키워드로 선언된 변수를 선언문 이전에 참조하면 참조 에러(ReferenceError)가 발생한다. 이는 let
키워드로 선언된 변수는 스코프의 시작에서 변수의 선언까지 일시적 사각지대(Temporal Dead Zone; TDZ)에 빠지기 때문이다. 즉, 쉽게 말하면 let
은 var
처럼 undefined
를 자동으로 할당해주지 않는다.
// 스코프의 선두에서 선언 단계가 실행된다.
// 아직 변수가 초기화(메모리 공간 확보와 undefined로 초기화)되지 않았다.
// 따라서 변수 선언문 이전에 변수를 참조할 수 없다.
console.log(나이); // ReferenceError: 나이 is not defined
let 나이; // 변수 선언문에서 초기화 단계가 실행된다.
console.log(나이); // undefined
나이 = 1; // 할당문에서 할당 단계가 실행된다.
console.log(나이); // 1
const로 선언한 변수는 중복 선언이 불가능하다. 이미 선언한 변수를 다시 선언할 경우 이미 선언됐다고 에러메세지를 뱉는다.
const a = 1;
const a = 2;
// 결과
// ERROR : Identifier 'a' has already been declared
변수 선언 및 초기화 이후에 반복해서 다른 값을 재할당 할 수 없다. const는 상수다. 또한, 처음 선언할 때 반드시 값 할당을 해주어야 한다.
const a = 1;
a = 2;
console.log(a);
// 결과
// ERROR : Assignment to constant variable.
var 변수와 다르게 함수 뿐만 아니라, if문, for문, while문, try/catch문 등의 코드 블록 {...} 에서 선언된 변수도 지역변수로 인식한다.
if(true) {
const a = 1;
console.log(a);
}
// 결과
// 1
console.log(a);
// 결과
// ERROR : a is not defined
JavaScript는 ES6에서 도입된 let
, const
를 포함하여 모든 선언(var, let, const, function, class)을 호이스팅한다. var
키워드로 선언된 변수와는 달리 const
키워드로 선언된 변수를 선언문 이전에 참조하면 참조 에러(ReferenceError)가 발생한다. 이는 const
키워드로 선언된 변수는 스코프의 시작에서 변수의 선언까지 일시적 사각지대(Temporal Dead Zone; TDZ)에 빠지기 때문이다. 즉, 쉽게 말하면 const
는 var
처럼 undefined
를 자동으로 할당해주지 않는다.
// 스코프의 선두에서 선언 단계가 실행된다.
// 아직 변수가 초기화(메모리 공간 확보와 undefined로 초기화)되지 않았다.
// 따라서 변수 선언문 이전에 변수를 참조할 수 없다.
console.log(나이); // ReferenceError: 나이 is not defined
const 나이; // 변수 선언문에서 초기화 단계가 실행된다.
console.log(나이); // undefined
나이 = 1; // 할당문에서 할당 단계가 실행된다.
console.log(나이); // 1
ES6를 사용한다고 가정했을 때, 재할당 해야하는 경우가 아니면 기본적으로 const
를 사용하고, 웬만해선 const
와 let
을 사용하자. var
변수는 역사의 뒤안길로 사라질 때이다.