var let const 차이점

자바스크립트에서 변수를 선언할 때 var let const 키워드를 사용합니다. 이번 포스팅에서는 var let const 차이점 및 사용 방법에 대해서 알아보도록 하겠습니다.

변수 선언

변수를 사용하기 위해서는 변수 선언이 필요합니다. 자바스크립트에서는 변수를 선언할 때 var let const 키워드를 사용합니다.

var 키워드는 ES6(ES2015) 이전부터 사용하던 키워드로 블록 레벨 스코프(Block-Level Scope)를 지원하지 못하고, 함수 레벨 스코프(Function-Level Scope)를 지원하여 개발자가 의도하지 않는 오류가 발생할 가능성이 높기 때문에, ES6에서는 보다 엄격한 언어적 특성을 추가하여 var를 대체하는 용도로 let과 const 키워드를 도입했습니다.

let, const 가 도입되었다고 해서 var가 완전히 폐기된 것은 아닙니다. ES6은 하위 호환성을 기본적으로 보장하고 있어서, ES6 이전에 작성한 스크립트는 여전히 유효하고 var도 여전히 유효합니다. 다만, var를 대체하는 용도로 let, const가 도입되었기 때문에 var 보다는 let과 const 키워드 사용을 권장하고 있습니다.

var let const 차이점

var let const 차이점은 다음과 같습니다.

변수 선언 방식 및 재할당 가능 여부

const는 상수를 선언하는 키워드로 선언과 동시에 초기화를 해야 합니다. 그리고 해당 변수에 다른 값을 재할당할 수 없습니다.

let, var는 선언 및 초기화를 자유롭게 할 수 있고, 선언 및 초기화 이후 재할당이 가능합니다.

const x = 1;   // 선언과 동시에 초기화
x = 2;         // 재할당 할 경우 다음과 같이 오류 발생         
// Uncaught TypeError: Assignment to constant variable.

const y;       // 선언만 한 경우 다음과 같이 오류 발생
// Uncaught SyntaxError: Missing initializer in const declaration

var a = 1;     // 선언과 동시에 초기화
a = 2;         // 재할당 가능

let b = 1;     // 선언과 동시에 초기화
b = 2;         // 재할당 가능

var c;         // 선언만 가능
let d;         // 선언만 가능

중복 선언 가능 여부

var는 중복 선언이 가능하여 기존에 선언한 변수를 코드 뒤쪽에서 다시 중복 선언하고 사용하여 예상치 못한 곳에서 오류가 발생할 수 있습니다.

var name = "StudioYS";
console.log(name);    // StudioYS

var name = "Narine";
console.log(name);    // Narine

let age = 27;
console.log(age);     // 27

let age = 31;         // 중복 선언 오류 발생
// Uncaught SyntaxError: Identifier 'age' has already been declared

변수 유효 범위(scope)

변수 유효 범위(scope)는 변수를 참조(사용)할 수 있는 범위를 말합니다. 대부분의 프로그래밍 언어는 코드 블럭 { … } 내부에서만 유요한 블록 레벨 스코프를 많이 사용하고 있으나, var의 경우는 코드 블럭과 상관없이 함수 내부에서 모두 사용 가능한 함수 레벨 스코프를 사용합니다. 이로 인하여 예상치 못한 곳에서 오류가 발생할 수 있습니다.

function Scope1() {
  var x = 0;
  if ( x === 0 ) {
    var y = 1;
  }
  
  console.log(x);
  console.log(y);  // if 코드 블럭을 벗어났는데 사용 가능
}

function Scope2() {
  let x = 0;
  if ( x === 0 ) {
    let y = 1;     // if 안에서면 유효
  }
  
  console.log(x);
  console.log(y);  // if 코드 블럭을 벗어났는데 사용 가능
  // Uncaught ReferenceError: y is not defined
}

Scope1();
Scope2();

호이스팅(Hoisting)

호이스팅은 변수 선언문이나 함수 선언문 등을 해당 스코프의 맨 앞으로 옮긴 것 처럼 동작하는 특성을 말합니다.이러한 특성 때문에 변수나 함수를 코드 뒤 쪽에 선언해도 문제 없이 사용할 수 있습니다.

var는 호이스팅이 발생하면 자동으로 변수 초기 값을 undefined로 선언해 실제 값을 할당하기 전 까지 undefined로 참조합니다.

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

위 코드는 호이스팅이 발생하면 다음과 같이 표현할 수 있습니다.

var a = undefined; // var 변수 호이스팅
console.log(a);    // undefined 출력
a = 10;
console.log(a);    // 10 출력

하지만 let은 이와 다르게 동작합니다. 변수를 선언하기 전에 사용하면 정의되어있지 않다고 오류가 발생합니다.

console.log(a);    // 오류 발생 - ReferenceError: a is not defined 
let a = 10;
console.log(a);    // 10 출력

위 코드는 호이스팅이 발생하면 다음과 같이 표현할 수 있습니다.

let a;            // 선언만 하고 정의하지 않음 - 사용 시 오류 발생
console.log(a);   // 오류 발생 - ReferenceError: a is not defined
var a = 10;
console.log(a);   // 10 출력

결론

자바스크립트에서 var let const의 특징은 다음과 같이 요약할 수 있습니다.

그리고 자바스크립트에서 변수를 사용하는 데 있어 다음과 같이 사용하도록 권고합니다.

참고 자료