변수 선언

0. 개요

var, let, const은 모두 변수 선언 및 할당에 쓰이는데, 어째서 비슷한 기능을 하는 명령어가 세가지나 있는지, 어떤 차이점이 있는지를 알고 구분해보려고 한다.

변수란 무엇인가

값을 저장하기 위한 메모리공간 또는 그 공간을 식별하기 위해서 붙인 이름

변수의 선언은 var const let 으로 할 수 있으며, const 와 let 은 ES6에서 추가되었다.

java script에서 변수 선언은 선언 → 초기화 단계를 거쳐 수행된다.

변수 선언은 암묵적으로 undefined를 할당해 초기화하게 되는데, 여기서 약간 신기한(?) 부분이 있다.

console.log(b); // 오류 발생(선언되지 않음)
console.log(a); // output : undefined
var a = 10;
console.log(a); // output : 10

위의 경우, b는 당연히 선언되지 않았으므로 오류가 발생하고, a의 경우, console.log를 한 이후에 a가 선언되는데, 오류가 발생하지 않고 undeefined가 출력되고, a선언 이후에는 할당된 값으로 출력되는 것을 볼 수 있다.
이는 자바스크립트의 특징 중 하나인 호이스팅과 var의 값을 초기화하는 특징 때문인데, 이는 추후에 좀 더 자세히 다루겠지만, 변수 뿐 아니라 선언된 모든 식별자는 호이스팅된다.

1. var

1. 선언과 초기화가 동시에 이루어짐

위에 예를 들었던 것 처럼, 선언하기 이전에 참조할 수 있는것은 var이 호이스팅되며 변수를 undefined로 값을 초기화하는 특징을 가지기 때문인데, 변수의 선언 위치가 좀 더 자유로워지는 장점이 있지만, 이 변수를 내가 Undefined로 할당한 것인지, 아직 할당이 이루어지지 않은것인지의 확인이 힘들다는 단점이 있다.

2. 재할당 / 재선언

var의 경우, 변수 이름이 중복되어서 다시 선언되어도 아무런 에러가 발생하지 않는다.

var a = 10
var a = 'Script'

이러한 특성 때문에, 실수를 알아차리지 못하는 경우가 발생할 수 있다.

3. 함수 레벨 스코프

var의 경우, 함수 레벨 스코프를 갖게 되는데,

console.log(ex) // output : undefined

var ex = 1;
console.log(ex) // output : 1

if(true){
  var ex = 20;
}

console.log(ex) // output : 20

go()

function go() {
  console.log(ex)  // output : undefined
  var ex = 'a';
  var ex2 = 'b';
  console.log(ex) // output : 'a'
}

console.log(ex2) // ReferenceError: ex2 is not defined (오류 발생)
console.log(ex) // output : 20

다음과 같이, 함수 내에서 할당된 변수는 해당 함수의 지역 변수로 인정된다.