[JavaScript] let vs. var vs. const

개요

이전 포스팅에서 var로 변수를 선언하는 것은 오래된 방식이라 했다.

이번 포스팅에서는 let과 const가 나오게 된 배경(?)에 대해 알아보도록 하겠다.

var 의 문제점

var에는 크게 3가지의 문제점이 있다.

1. 중복 선언 가능
2. 함수 레벨 스코프
3. 변수 선언문 이전에 변수 참조시 언제나 undefined 반환

하나씩 자세히 알아보자.

중복 선언 가능

---

같은 이름의 변수를 중복으로 선언이 가능하여 예기치 못한 값을 반환할 수 있게된다.

var apple = 2;
var apple = 3;
var apple;
// apple 변수의 중복 선언

함수 레벨 스코프

---

먼저 스코프가 무엇인지 알아보도록 하자.

스코프란 식별자의 유효 범위를 말한다.

보통 선언 위치에 따라 정해진다.

만약 함수 내부에 선언했다면 해당 함수 내부에서만 사용 가능하게끔 정해지는 것이다.

다시 함수 레벨 스코프로 돌아와서…

자바스크립트에서는 모든 코드 블록이 지역 스코프를 만든다. 이를 블록 레벨 스코프라 한다.

var 키워드 사용시 함수의 코드 블록만을 지역 스코프로 인정한다. 이를 함수 레벨 스코프라 한다.

스크립트를 작성할 때에는 전역 변수보다는 최대한 좁은 유효 범위를 설정하는 것을 권장한다고 한다.

따라서 함수의 코드 블록이 아닌 경우 전부 전역 변수가 되어버리는 var 사용을 지양하는 것이다.

undefined

---

변수 선언문 이전에 해당 변수를 참조하려고 하면 undefined를 반환한다.

console.log(a); // undefined
var a;

이게 왜 문제가 되는 것일까?

변수를 초기화 하지 않아도 똑같이 undefined를 반환하기 때문이다.

var a;
console.log(a); // undefined

이렇게 두 경우가 똑같다면 변수를 이전에 선언을 했었는지, 아니면 값 할당을 안한건지 구분이 안되기 때문에 문제가 된다.

그렇다면 왜 var는 두 경우 모두 undefined를 반환하는 것일까.

이를 이해하려면 호이스팅을 알아야 한다.

호이스팅

---

호이스팅이란 자바스크립트 내부적으로 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 말한다.

MDN에서는 변수의 선언과 초기화를 분리한 후, 선언만 코드의 최상단으로 옮기는 것으로 설명하고 있다.

변수의 경우 var로 선언된 변수에서만 일어나게 되는데 이때, 변수가 undefined로 초기화 되는 것이다.

let 과 const

let과 const는 위의 3가지 문제점을 해결한 아이들이다.

let

• 중복 선언 불가
• 값 재할당 가능

const

• 선언과 동시에 초기화 필요
• 중복 선언, 값 재할당 불가

하지만 const로 선언된 객체는 값의 재할당이 가능하다.

Notice: 이 게시물은 모던 JavaScript 튜토리얼과 딥다이브 스터디를 참고하였습니다.