변수를 정의하는 방법

ES5까지의 자바스크립트에서는 var를 이용해서 변수를 정의했고 그게 유일한 방방법이었다. ES6에서는 const와 let을 이용하는 새로운 변수 정의 방법이 생겼고 var가 안고 있는 문제들을 해결하였다.

var가 가진 문제

1. 함수 스코프

var의 경우 정의된 변수가 함수 스코프를 가진다. 스코프(scopre)란 변수가 사용될 수 있는 영역을 말하고 변수가 정의된 위치에 의해 결정된다.

function example() {
  var i = 1;
}

console.log(i); // error

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

함수 밖에서 선언한 var 변수는 전역 변수가 되는데, 프로그램 전체를 감싸는 함수가 하나 있다고 생각하면 이해가 쉽다.

function example1() {
  i = 1;
}
console.log(i); // 1

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

for (var i =0; i < 10; i++) {
  console.log(i);
}
console.log(i); // 10

for 문, while 문, switch 문, if 문 등 함수 내부에서 작동되는 코드들이 끝나도 변수가 사라지지 않는다.

2. 호이스팅

var로 정의된 변수는 호이스팅이 된다. 호이스팅이란 간단히 설명하자면 그 변수가 속한 스코프의 최상단으로 끌어올려지는 것을 말한다.

//원래 코드
console.log(myVar) // undefined;
var myVar = 1;

//호이스팅의 결과
var myVar = undefined;
console.log(myVar) // undefined;
myVar = 1;

변수를 정의하기 전에 사용했음에도 에러가 발생하지 않는다. 그리고 1이 아닌
undefined가 출력된다. 이유는 해당 변수의 정의가 호이스팅 되었기 때문이다.

3. 재정의

var를 이용하면 한 번 정의된 변수를 재정의할 수 있다.

var myVar = 1;
var myVar = 2;

var 같은 경우 재정의가 가능해 위와 같은 코드가 에러 없이 사용될 수 있어 직관적이지 않고 버그로도 이어질 수 있다.

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

1. const, let은 블록 스코프다

var은 함수 스코프였지만 const, let은 블록(block) 스코프이다.

if (true) {
  const i = 0;
}
console.log(i); // error

블록 스코프에서 if 문의 블록 안에서 정의된 변수는 if 문을 벗어나면 참조할 수 없다. 그렇기 때문에 if 문에서 생성된 변수를 블록 바깥에서 사용하려고 하면 에러가 발생한다.

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

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

console.log(foo); // error
const foo = 1;

다만 const, let은 var과 다르게 변수가 정의된 위치와 호이스팅된 위치 사이에서 변수를 사용하려고 하면 에러가 발생하고 이 구간을 임시적 사각지대(temporal dead zone)라고 한다. 그럼 호이스팅의 역할을 무엇일까?

const foo = 1; 2️⃣
{
  console.log(foo); // error 3️⃣
  const foo = 2; 1️⃣
}

1️⃣번 변수가 호이스팅이되지 않았다면 에러가 발생하지 않고 2️⃣번 변수의 값이 출력될 것이다. 1️⃣번 변수의 호이스팅 때문에 3️⃣번 변수는 1️⃣번 변수를 참조하게 되지만 임시적 사각지대이기 때문에 에러가 발생한다.

var foo = 1; 
{
  console.log(foo); // undefined
  var foo = 2
}

var로 정의된 변수는 임시적 사각지대가 없기 때문에 에러가 발생하지 않는다.

3. const는 변수를 재할당 불가능하게 만든다.

const bar = 'a';
bar = 'b'; // error
var foo = 'a';
foo = 'b' 
let value = 'a';
value ='b';

const로 정의된 변수는 재할당이 불가능하고 반대로 let, var로 정의된 변수는 재할당이 가능하다.

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

다만 const로 정의해도 객체의 내부 속성값은 수정하거나 추가하는 것이 가능하다는 점을 주의해야 한다.