ES5까지의 JS에서 var는 문제점이 많았다. 이를 해결하기 위한 방법이 ES6에 추가되었다.
이번 포스트에서는 그 문제점들과 해결방안을 알아본다.

var의 문제점

ES5, 변수를 선언할 수 있는 유일한 방법 var

함수 스코프

var는 함수 스코프이다.

• 스코프(scope): 변수가 사용될 수 있는 영역, 변수가 정의된 위치에 의해서 결정된다.

• var 키워드로 정의된 변수는 함수 스코프이기때문에, 함수를 벗어난 영역에서 사용하면 에러가 발생한다.

• 함수 안에서 var 키워드를 사용하지 않고 변수에 값을 할당하면 그 변수는 전역변수가 된다.

  • 전역 변수가 되는 것을 피하기 위해서 파일의 최상단에 ‘use strict’를 사용한다. → 명시적으로 Reference Error가 발생한다.

• var는 함수 스코프이기 때문에 for문, if문, while문 등에서 정의된 변수가 코드 실행이 완료된 후에도 계속 남아있게 되어 접근할 수 있다.

  • 즉시 실행 함수를 사용하여 변수의 스코프를 제한할 수 있다. 하지만, 좋지 못한 코드가 됨.

호이스팅

JavaScript의 호이스팅은 직관적이지 않으며, 보통의 프로그래밍 언어에서는 찾아보기 힘든 기능이다.

• 호이스팅(hoisting): var 키워드로 정의된 변수는 그 변수가 속한 스코프의 최상단으로 끌어올려진다.

• 호이스팅된 var 변수는 undefined가 할당됨. 실제 값은 원래 정의했던 위치에서 할당된다.

• 변수가 정의된 곳 위에서 값을 할당할 수도 있다. (단점)

  1 2 3 4

  console.log(a); a = 2; console.log(a); var a = 1;

재정의

var를 이용하면 한 번 정의된 변수를 재정의할 수 있다. → 직관적이지 않으며 버그로 이어지기 쉬움.

재할당

재할당 가능한 변수만 만들 수 있다. → 상수처럼 쓰여야하는 값도 재할당이 가능한 값으로 정의된다. ex) PI

const와 let

var의 문제점을 해결하기 위해 ES6에서 도입되었다.

블록스코프

함수 스코프인 var에 반해, const와 let은 블록 스코프이다. 많은 언어에서 블록 스코프를 사용한다.

• 블록 스코프: 블록 바깥에서 사용하려고 하면 에러가 발생한다.

• const와 let을 사용해서 동일한 이름의 변수를 정의하여 사용하는 경우, 우선순위에 따라 가장 가까운 변수를 사용하게 된다.

호이스팅

const 또는 let으로 정의된 변수도 호이스팅이 된다.

• 하지만 변수를 정의하기 전에 그 변수를 사용하려고 하면 참조 에러가 발생한다.
• 호이스팅 이후에 아무것도 할당하지 않기 때문 (undefined를 할당하는 var와의 차이점)

재할당

let으로 정의된 변수는 재할당이 가능하지만, const로 정의된 변수는 재할당이 불가능하다.

• const로 정의된 객체의 내부 속성값은 수정이 가능하다.
  • 객체의 내부 속성값도 수정 불가능하게 만들고 싶다면 immer와 같은 외부 패키지를 사용하면 된다.
    → 객체를 수정하려고 할 때 기존 객체는 변경하지 않고 새로운 객체를 생성한다.
  • 새로운 객체를 생성하지 않고 수정만 불가능하게 제한하고 싶다면 자바스크립트 내장함수를 이용하면 된다.