변수 선언의 세가지 방법

JavaScript에서 변수를 선언하려면 세가지 방법을 사용할 수 있다. 바로 var, let, const인데, 이 셋의 사용법은 처음 JavaScript를 배울 때 넘나 헷갈리는 것이라 이번 기회에 딱 정리해 두고자 한다!

var	let	const
함수 레벨 스코프	블록 레벨 스코프	블록 레벨 스코프
재선언 가능 재할당 가능	재선언 불가능 재할당 가능	재선언 불가능 재할당 불가능

1. 번복이 가능한 var

variable을 뜻하는 var는 번복을 여러번해도 불가능이란 없는 변수 선언 방법이다. 실제로 아래와 같이 여러번 변수 선언을 해도 에러없이 각기 다른 값이 출력되는 것을 볼 수 있다.

var a = '번복진트'; 
console.log(a); //번복진트

var a = '번복가능'; 
console.log(a); //번복가능

재선언도 재할당도 가능한 var라서 어찌보면 가장 편리한 방법이라 생각할 수도 있겠으나 사실은 같은 이름의 변수명을 남용하면 더 큰 문제가 발생할 수 있기에 이러한 단점을 보완하기 위해 ES6부터 let과 const가 추가 되었다!

2. let

let은 변수의 재할당은 가능하지만 재선언은 불가능하다.
아래와 같이 재선언을 하면 SyntaxError가 뜨는 것을 알 수 있다.

let b = '번복진트'; 
console.log(b); //번복진트

b = 'let은 재할당 가능'; 
console.log(b); //let은 재할당 가능

let b = '하지만 또 선언하는 건 불가능하지!'; 
console.log(b); //Uncaught SyntaxError: Unexpected identifier

3. const

const는 constant 즉 상수의 의미 그대로 한 번 선언한 값은 재할당도, 재선언도 불가능하다.

const c = '버벌진트'; 
console.log(c); //변수선언함 

c = 'const는 재할당 불가'; //Uncaught TypeError: Assignment to constant variable.
console.log(c); //'버벌진트'

const c = '재선언도 불가'; //Uncaught SyntaxError: Identifier 'c' has already been declared
console.log(c); //'버벌진트'

변수의 Scope(스코프)

Scope(스코프, 범위/시야라는 뜻)는 유효한 참조범위를 뜻한다! 즉, 변수가 어디에서 선언되었냐에 따라 해당 변수의 유효범위가 정해진다. 자바스크립트는 var로 선언한 변수의 스코프와 let, const로 선언한 변수의 스코프가 다르다.

1. var: 함수 레벨 스코프

var는 함수 내부에 선언된 변수만 지역변수로 한정하며, 나머지(if문, for문, while문 등...)에서는 모두 전역변수로 간주한다.

function hi(){ 
  var a = 1; 
  console.log(a); } 
hi(); // 1 
console.log(a); //ReferenceError: a is not defined

함수 hi에서 선언된 변수 a는 함수 내부에서만 참조가 가능하며, 함수외부에서 참조시 에러가 발생한다.
하지만 함수를 제외한 영역에서 var로 선언한 변수는 전역변수, 즉 어디서나 참조 가능한 변수로 취급된다.

if(){
   var a = 10;
   console.log(a); //10
}

console.log(a); //10

뭔가 이상하다...

2. let, const: 블록 레벨 스코프

반면, let과 const는 함수 내부를 비롯한 블록(중괄호{}로 둘러싸인 코드영역)에서 선언된 변수도 지역 변수로 취급한다.

if(){
   let a = 10;
   console.log(a); //10
}

console.log(a); //ReferenceError: a is not defined

위 처럼 if문 내부에서 선언된 변수는 외부에서 참조할 수 없음을 알 수 있다.

변수 hoisting(호이스팅)

호이스팅이란 함수안에 있는 선언들을 모두 끌어올려 해당 함수 유효 범위의 최상단에 선언하는 것을 말한다.(참조 블로그)
var, let, const는 이러한 호이스팅의 과정도 다르다!

1. var

console.log(a); // undefined 
var a = 10; 
console.log(a); // 10

var의 경우 변수 a를 2행에서 선언했음에도 1행에서 에러를 발생시키지 않는다. 이는 코드 실행전에 자바스크립트 엔진이 미리 변수를 선언하고, undefined로 초기화해 두었기 때문이다.

2. let, const

console.log(a); // ReferenceError: a is not defined 
let a = 10;

반면 let의 경우 뒤에서 선언한 변수를 앞서 참조하려고 하니 에러가 발생한다.
let, const로 변수를 선언하는 경우, 코드 실행 전에는 변수 선언만 해두며, 초기화는 코드실행 과정에서 변수 선언문을 만났을 때 수행한다.

결론

구글의 자바스크립트 스타일 가이드에 따라 결론을 내릴 수 있다.

1. const와 let을 이용하여 변수를 선언하라
2. 값을 재할당하는 경우가 아니라면 const를 디폴트로 사용하라
3. var는 사용하지 않는다(단호박)