JavaScript에서 변수 선언할 때마다 var, let, const 세 가지 중 뭘 써야 할지 헷갈린다면...?

JavaScript에서 변수 선언할 때마다 var, let, const 세 가지 중 뭘 써야 할지 헷갈린다면...?

사실 나는 var를 한번도 써본적이 없긴하다. js를 배운지 한달밖에 안되었고 처음부터 let과 const만을 사용해서 배웠다.

그런데 이번에 그 차이를 공부해보니 흥미로운 부분이 있었다!
var, let, const의 차이를 알아보자.

var: 옛날 방식의 대표주자

var는 ES6(2015) 이전부터 쓰였던 변수 선언 방식이고 범위 개념에서 조금 다른점이 있다. 왜냐하면 블록 내부에서 선언해도 함수 전체에서 접근 가능한 점이 특징이다.

function example() {
  if (true) {
    var message = '안녕!';
    console.log(message); // '안녕!' 출력
  }
  console.log(message); // 안녕! 출력 (블록 밖에서도 접근 가능)
}

example();

호이스팅도 중요한 특징이라서 var로 선언한 변수는 선언 위치에 상관없이 맨 위로 끌어올려지는 효과가 있다.

let: 블록 범위를 존중하는 친구

ES6 이후에 등장한 let은 훨씬 더 직관적이다. 블록 범위를 따라가기 때문이다. 중괄호로 감싸진 블록 내에서만 변수가 살아있기 때문에, 예상치 못한 값의 변경을 막을 수 있다.

function example() {
  if (true) {
    let message = '안녕!';
    console.log(message); // '안녕!' 출력
  }
  console.log(message); // 에러! 블록 밖에서는 접근 불가
}

example();

let도 호이스팅이 일어나긴 하는데, var랑 다르게 선언하기 전에 접근하려고 하면 무조건 에러가 난다.

console.log(message); // ReferenceError!
let message = '안녕!';

const: 한 번 정하면 끝!

const는 상수를 선언할 때 사용하는 키워드이다.
const도 let과 마찬가지로 블록 스코프를 따른다. 즉, 선언된 블록 내에서만 접근할 수 있다.

function example() {
  if (true) {
    const message = '안녕!';
    console.log(message); // '안녕!' 출력
  }
  console.log(message); // 에러! 블록 밖에서는 접근 불가
}

example();

이 코드에서도 동일하게 message는 블록 스코프 내에서만 유효하기 때문에 if 블록 밖에서는 접근할 수 없어 에러가 발생한다

그리고 const는 기본적으로 한 번 값을 할당하면 다시는 변경할 수 없고 그래서 보통 변경되지 않아야 하는 값이나 객체를 선언할 때 많이 사용한다.

const hi = 하이;
hi = 헬로우; // 오류! 값 변경 불가

하지만 객체나 배열은 내부 값의 변경은 가능하다. const로 선언된 객체나 배열 자체는 재할당이 불가능하지만, 그 안의 속성이나 요소는 바꿀 수 있음.

const user = { name: '유재석' };
user.name = '김연아'; // 객체 속성은 변경 가능

그래서 언제 뭘 써야 할까?
var는 이제 거의 안 쓰는 게 좋다! 왜냐면 구식이기 때문ㅎㅎ
더 자세히 얘기하자면 let과 const를 사용하는 것이 더 좋기 때문이다.

let과 const를 사용하면 변수의 유효 범위가 명확하고,
변수 중복 선언이나 호이스팅 문제 등을 방지할 수 있어서
코드를 더 읽기 쉽게 만들고 유지보수를 쉽게 할 수 있는 장점이 있다.