변수의 선언에 대해서

in Study / about CS

JavaScript에서 사용되는 변수 선언 방식인 var, let, const의 차이점과, var의 사용에서 주의할 점에 대해 알아봅니다.

자바스크립트를 배우기 시작하면 가장 처음에는 변수의 선언과 할당에 대해 배우게 됩니다.

그 중에서도 var, let, const에 대해서는 필수적으로 알아야 하는데, 그 이유는 각각의 변수 선언 방식이 서로 다른 특성을 가지고 있기 때문입니다.

var, let, const의 차이점

let과 const에 대해서

let과 const는 ES6(2015)에서 등장한 변수 선언 키워드입니다. 그 이전에는 var만 사용되었죠. 이제 이 둘의 차이점에 대해 알아보겠습니다.

const

const는 상수(constant)를 선언할 때 사용됩니다. 변수를 선언할 때 반드시 값을 함께 할당해야 하며, 이후에는 값을 변경할 수 없습니다.

const num = 10; // 변수 선언 및 할당
num = 12; // 값 재할당 -> 오류 발생 (Uncaught TypeError: Assignment to constant variable.)
console.log(num);

let

let은 var와 비슷하지만, 더 안전한 방식으로 변수를 선언할 수 있습니다. let으로 선언된 변수는 재할당이 가능하며, 스코프(scope)에 따라 유효 범위가 결정됩니다.

let name; // 변수 선언
name = "HORI"; // 변수값 할당
name = "KIRA"; // 변수값 재할당
console.log(name); // 콘솔에는 name에 재할당된 'KIRA'가 출력됩니다.

let은 위와 같이 변수를 선언한 후에 나중에 값을 할당하거나, 값이 이미 할당된 변수를 재할당할 수 있습니다.

그러나 동일한 스코프에서 동일한 이름의 변수를 두 번 선언하려고 하면 오류가 발생합니다.

let name = "HORI"; // 변수 선언
let name = "KIRA"; // 변수 재선언 -> 오류 발생 (error: Identifier 'name' has already been declared)
console.log(name);

정리하자면,

  • const

    • 변수를 선언할 때 반드시 값을 할당해야 한다.
    • 한 번 할당된 값은 변경할 수 없다.

  • let

    • 변수 선언과 할당을 분리해서 사용할 수 있다.
    • 변수값 재할당이 가능하다.
    • 동일한 스코프 범위에서는 같은 변수를 한 번만 선언할 수 있다.

var에 대해서

앞서 살펴본 let과 비슷하게 var도 변수를 선언하고 재할당할 수 있습니다. 하지만 중요한 차이점이 있습니다.

var name = "HORI"; // 변수 선언 및 할당
var name = "공부 열심히!"; // 변수값 재선언 및 재할당
console.log(name); // 콘솔에는 name에 재할당된 '공부 열심히!'가 출력됩니다.

var로 변수를 선언하면 같은 스코프 내에서도 동일한 변수명을 여러 번 사용할 수 있습니다. 이로 인해 예기치 못한 버그가 발생할 수 있습니다.


var는 왜 쓰면 안될까?

var는 그 자체로 여러 가지 문제를 일으킬 수 있습니다.

예를 들어, 팀 작업 중에 A와 B가 협업한다고 가정해봅시다.

A가 var username = 'KIRA'라는 변수를 선언했는데, B도 동일한 이름으로 var username = 'HORI'라는 변수를 선언했다고 합시다.

이렇게 되면, 변수명이 충돌하여 의도하지 않은 결과가 나타날 수 있습니다.

코드 블록에서의 let과 var

코드 블록은 중괄호({})로 감싸진 부분을 말하며, 주로 if문, for문, 함수 등에서 사용됩니다.

let과 const는 블록 스코프를 따르지만, var는 그렇지 않습니다.

{
  var num = 4; // 변수 선언 및 할당
}

console.log(num); // 코드 블록 외부에서 선언된 var 변수 'num'의 값 4가 출력됩니다.

위 코드에서 var로 선언된 변수 num은 블록 외부에서도 접근이 가능합니다.


반면 let으로 선언된 변수는 블록 스코프에 갇혀 외부에서 접근할 수 없습니다.

{
  let num = 4; // 변수 선언 및 할당
}

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

이처럼 var는 코드 블록과 관계없이 변수를 재할당하고 사용할 수 있으며, 이로 인해 전역 스코프에서 변수 오염이 발생할 수 있습니다.

결론: var는 쓰지 말자

var는 코드 블록이나 전역 스코프에 관계없이 재선언 및 재할당이 가능하다는 점에서 치명적인 오류를 발생시킬 수 있습니다.

따라서 가능하면 var를 사용하지 않고, let이나 const를 사용하는 것이 좋습니다.

다만, 함수 내에서 선언된 var는 함수 스코프를 가지며, 이 경우 전역 스코프에서 접근할 수 없습니다. 이 부분은 렉시컬 환경과 관련이 있으며, 다음 포스트에서 다루겠습니다.

정리

  • let과 const

    • 코드 블록에서 정의된 변수는 해당 블록 스코프에서만 유효합니다.
    • let과 const는 var보다 안전한 변수를 선언할 수 있는 키워드입니다.

  • var

    • 코드 블록 내에서 선언해도 외부에서 접근 가능하며, 재선언과 재할당이 가능합니다.
    • 여러 번 변수를 중복 선언할 수 있어, 변수 오염의 가능성이 높습니다.
    • 단, 함수 내에서 선언된 var는 함수 스코프를 가집니다.