변수를 정의하는 방법: cosnt, let

실전 리액트 프로그래밍을 읽고 개인적으로 정리한 내용입니다.

---

ES5까지 JS에서는 var를 이용하여 변수를 정의하는 것이 유일한 방법이었다. ES6에서는 let과 const를 이용하는 새로운 변수 선언 방식이 생겼는데, 이 이유에 대해서 알아본다.

1. var가 가진 문제

1-1. 함수 스코프

scope: 변수가 사용될 수 있는 영역. 변수가 정의된 위치에 의해 결정됨

var로 정의된 변수는 함수 스코프이기 때문에 여러 문제가 발생한다.

• 함수 내에서 정의한 var를 함수 밖에서 사용하면 참조 에러가 발생한다.
• 함수가 아닌 프로그램 가장 바깥에 정의하면 전역변수가 된다.
• 함수 스코프이기 때문에 for 반복문에서 정의된 변수가 for문 밖에서도 쓰인다.
• for뿐만 아니라 while, switch, if 등에서도 같은 문제를 갖고 있다.

1-2. 호이스팅

var로 정의된 변수는 그 변수가 속한 스코프의 최상단으로 끌어올려진다. = 호이스팅

console.log(myVar);
var myVar = 1;

• 에러가 발생하지 않지만, 1이 아니라 undefined가 출력된다.
• 호이스팅때문인데, 아래와 같이 코드가 변경되었다고 생각하면 쉽다.

  var myVar = undefined;
  console.log(myVar);
  var myVar = 1;

  • 변수의 저의만 끌어올려지고 할당은 원래 정의했던 위치에서 이루어진다.

1-3. 기타 문제들

변수 재정의가 가능하다. 상수처럼 쓸 값도 무조건 재할당 가능한 변수로 만들어야 한다.

var myVar = 1;
var myVar = 2;

2. var의 문제를 해결하는 const, let

var는 함수스코프였지만, const와 let은 블록스코프이다. 대부분의 언어에서 블록스코프를 사용하므로 익숙한 개념이다.

let foo = "bar1";
console.log(foo); //bar1

if (true) {
  let foo = "bar2";
  console.log(foo); //bar2
}

console.log(foo); //bar1

2-1. const, let에서의 호이스팅

변수가 정의된 시점보다 먼저 변수를 사용할 수 없다.

console.log(foo); // 참조 에러 발생
const foo = 1;

• const와 let 변수는 호이스팅이 되지 않는다고 생각하기 쉽지만, const와 let도 호이스팅 된다.
• 다만 변수가 정의된 위치와 호이스팅된 위치 사이에서 변수를 사용하려고하면 에러가 발생하는데, 이 구간을 임시적 사각 지대(temporal dead zone, TDZ)라고 한다.
• TDZ에 대한 자세한 정보는 JS 책에서 추후 공부 필요!

2-2. 재할당 불가능한 const변수

const로 정의된 변수에 값을 재할당하면 에러가 발생한다. 다만 const로 정의된 객체의 내부 속성값은 수정 가능하다는 점을 주의해야 한다.

const bar = { prop1: "a" };
bar.prop1 = "b";
bar.prop2 = 123;
console.log(bar); // {prop1: 'b', prop2: 123}

const arr = [10, 20];
arr[0] = 100;
arr.push(300);
console.log(arr); //[100, 200, 300]

• 이미 존재하는 속성값을 수정하거나 새로운 속성값을 추가하는 것도 가능하다.
• 내부 속성값도 수정 불가능하게 만들고 싶다면 외부패키지를 이용하는 것이 좋다.