[JS] 당신의 변수는 안전한가요? - var & let & const

🚨 본 글은 javascript 변수 선언 키워드 var, let, const를 정리한 글입니다.

 
프로그래밍에서 변수 선언은 중요한 개념 중 하나다. 변수를 잘못 사용할 경우 예기치 않은 버그 혹은 보안 위협이 발생할 수 있다. 그렇기 때문에 우리는 적절한 키워드를 잘 사용해서 변수를 써야한다. 

그래서 오늘은 var, let, const이 뭔지, 각각의 차이점과 어떤 키워드를 사용해야하는지에 대해 이야기해 볼것이다.

 

1. 개념

var 

var은 ES6 이전에 사용되던 변수 선언 방식으로 JavaScript에서 가장 오래된 변수 선언 방법이다. var은 블록 스코프(block scope)를 지원하지 않고 함수 스코프(function scope)만을 지원한다. 이는 변수가 선언한 함수 내에서만 유효하며, 함수 외부에서는 전역 변수로 사용된다. 또한, 변수 재선언이 가능하다. 즉, 같은 이름으로 변수를 여러 번 선언할 수 있다. 

function example() {
  var x = 1;
  if (true) {
    var x = 2; // 재선언이 가능
    console.log(x); // 2
  }
  console.log(x); // 2
}
example();

let

let은 ES6에서 도입된 블록 스코프(block scope)를 지원하는 변수 선언 방법이다. let은 변수를 선언한 블록 내에서만 유효하다. 변수 재선언이 불가능하다. 즉, 같은 이름으로 변수를 여러 번 선언할 수 없다. let으로 선언된 변수는 호이스팅이 발생하지 않는다. 이러한 특징으로 인해 var과 달리 예기치 않은 버그와 보안 위협을 줄일 수 있다.

 

function example() {
  let x = 1;
  if (true) {
    let x = 2; // 재선언이 불가능
    console.log(x); // 2
  }
  console.log(x); // 1
}
example();

const

const는 ES6에서 추가된 변수 선언 방식이다. let과 유사하지만, 상수를 선언하는 데 사용된다. const로 선언된 변수는 값을 변경할 수 없으며, 선언과 동시에 값을 할당해야 한다. 선언된 변수는 호이스팅이 발생하지 않는다. 이러한 특징으로 인해 값의 변경을 막아 예기치 않은 버그와 보안 위협을 줄일 수 있다. const로 선언된 변수는 블록 스코프를 가지며, 변수 재선언이 불가능하다. 또한, const로 선언된 변수는 상수(constant)이므로 값을 변경할 수 없다. 

function example() {
  const x = 1;
  if (true) {
    const x = 2; // 재선언이 불가능
    console.log(x); // 2
  }
  console.log(x); // 1
}
example();

 

2. var을 피해야 하는 이유

개념을 설명하면서 보았겠지만, var는 중복선언이 가능하다. 그래서 버그와 보안을 위협한다. 이 뿐만 아니라 여러 문제가 있다.

그렇다면, 우리가 var 사용을 피해야 하는 이유에 대해 얘기해보고자 한다.

 

1. 함수 스코프

var로 선언한 변수는 함수 스코프를 가진다. 이는 변수가 선언된 함수 내부에서만 유효하다는 의미다. 따라서 함수 내부에서 선언한 변수는 함수 외부에서 접근할 수 없다. 이는 코드의 가독성과 유지보수를 어렵게 만들어 변수의 범위를 파악하기 어렵게 만들 수 있다.

2. 호이스팅

var로 선언한 변수는 호이스팅이 발생한다. 호이스팅이란 변수의 선언이 해당 스코프의 맨 위로 끌어올려지는 것을 말한다. 이는 변수를 선언하기 전에 변수를 사용할 수 있게 되어 예상치 못한 동작을 유발할 수 있습니다.

3. 중복 선언 허용

아까도 언급했지만, var로 선언한 변수는 중복 선언이 가능하다. 이는 의도치 않은 변수 값 변경을 발생시킬 수 있다.

4. 블록 스코프

미지원 var로 선언한 변수는 블록 스코프를 지원하지 않는다. 따라서 블록 내부에서 선언한 변수는 블록 외부에서도 접근할 수 있다. 이는 예상치 못한 변수 값 변경을 발생시킬 수 있다.

 

그에 반해 let과 const는 블록 스코프를 지원하고 중복 선언을 허용하지 않으며 호이스팅이 발생하지 않는다. 따라서 코드의 가독성과 유지보수를 향상시키기 위해서는 var 대신에 let과 const를 사용하는 것이 좋다.