[JavaScript] var, let, const 키워드

Javascript 에서는 변수와 함수를 var, let, const 라는 키워드를 통해 선언 및 할당할 수 있습니다. 각각의 키워드들이 무슨 차이점이 있는지 알아보겠습니다.

var

특징

1. 함수 레벨 스코프

var는 함수 스코프적인 특징을 가집니다.

자바스크립트에서 함수가 선언되면 각 함수마다 고유의 스코프를 가지게 되는데, 해당 스코프 안에서 선언된 var 변수는 그 함수 외부에서 접근할 수 없습니다.

그러면, 동일한 이름을 가진 var 변수를 함수 내부에도 선언하고 이를 접근하려고 하면 어떻게 될까요?

var a = 1;

function print() {
  var a = 111;
  console.log(a); // 111
}

print();
console.log(a); // 1

print 함수 내부에서의 a 출력은 해당 함수 스코프 내부에 있는 a 라는 변수의 값(111)을 출력하게 되고,

print 함수 외부에서의 a 출력은 해당 함수 스코프(=전역)에 있는 a라는 변수의 값(1)을 출력하게 됩니다.

이번에는 print 함수 내부에서 a라는 변수가 선언되지 않았을 때의 경우입니다.

var a = 1;

function print() {
  console.log(a);
}

print();

print 함수 내부에서 a라는 변수를 접근하지만, 해당 함수 스코프 내에 a라는 변수가 존재하지 않으므로, 외부인 전역 스코프에서의 a 변수의 값(1)을 출력하게 됩니다.

자바스크립트 인터프리터는 먼저 함수 함수 내부에 해당 변수가 있는지를 확인합니다. 해당 변수가 없으면 그 외부의 스코프에서 찾게 됩니다.

또 다른 예제인 다음의 코드를 보겠습니다.

for (var i = 0; i < 10; i++) {}
console.log(i); // 10

for문에서 선언된 i라는 변수는 var 키워드를 사용해 생성되었습니다.

이는 if나 for와 같은 블럭 스코프가 아닌 함수 스코프의 범위가 적용되기 때문입니다. 즉, for문이라는 블럭 안에서 선언한 var 변수는 호이스팅 되어 해당 for문이 작성된 함수 스코프 내 최상단에 선언된 것과 같은 효과를 받습니다.

var 변수의 스코프를 제한하기 위해 즉시 실행 함수를 사용하기도 합니다. 즉시 실행 함수는 함수를 정의하는 시점에 바로 실행되고 사라집니다. var 변수를 즉시 실행 함수로 묶으면 변수의 스코프를 제한할 수 있습니다. 그러나, 즉시 실행 함수는 작성하기 번거롭고 가독성도 떨어지므로 상황에 맞게 잘 사용해야 합니다.

2. var 키워드 생략 허용

a = 1;
console.log(a);

위와 같이 var 키워드 없이 a라는 이름의 변수를 선언 및 초기화해서 사용할 수 있습니다.

하지만, var라는 키워드 없이 선언하면, 자바스크립트의 window 내장 객체가 값을 전역으로 관리하게 되고(=전역 변수), 해당 값이 덮어 씌워져 예상과 다르게 동작할 수 있으니 조심해서 사용해야 할 것으로 보입니다.

a = 3;

function add() {
  a = 5;
  console.log(a);
}

add(); // 5
console.log(a); // 5

3. 변수의 중복 선언이 가능

var name = "Kim";
var name = "Kim2";
console.log(name); // Kim2

var 키워드를 사용한 변수는 동일 이름으로 재선언 하는 것이 가능합니다.

4. 호이스팅이 가능

호이스팅에 관한 내용은 [링크]에서 볼 수 있습니다.

let, const

위에서 본 var 의 자유로운 포맷으로 인해 ES6에서 추가된 키워드입니다.

let 키워드는 var 와 마찬가지로 변수를 선언할 때 사용되는 키워드이며, const 키워드는 상수를 선언할 때 사용되는 키워드입니다.

이 외 특징으로는 위에서 본 var 의 네 가지 특징들 중 두 가지의 특징은 반되대는 성격을 띄고 있습니다.

• 블럭 레벨 스코프 ↔ var 의 함수 레벨 스코프
• 변수의 중복 선언 불가 ↔ var 키워드로 변수 중복 선언 가능

let 과 const 키워드로 선언한 변수들이 호이스팅 되지 않는 것은 아닙니다. 해당 스코프의 최상단으로 끌어올려 선언은 하지만, 초기화 작업은 해당 변수가 선언된 문장에서 발생하기 때문에 참조 에러가 발생하는 것입니다.