변수와 호이스팅 정리

무슈랭·2024년 2월 6일

변수란 데이터를 저장할 때 쓰이는 '이름 붙은 저장소'이다.

데이터: 문자, 숫자, 소리, 그림, 영상, 단어 등의 형태로 된 의미 단위이다. 보통 연구나 조사 등의 바탕이 되는 재료를 말하며, 자료를 의미있게 정리하면 정보가 된다.

자바스크립트에서는 세 가지 키워드를 사용해 변수를 선언할 수 있다.

const

const는 상수(constant)의 줄임말이다. 다른 선언 키워드와 달리 const로 선언된 변수는 재할당할 수 없게 된다. 변숫값이 절대 변경되면 안 되는 것이 확실할 때 선언하도록 한다.

자바스크립트가 처음 만들어졌을 때는 var가 유일했다. 하지만 아래와 같은 문제점이 있었다.

첫째로, 자바스크립트의 특징인 호이스팅으로 생기는 문제다.

호이스팅: 자바스크립트의 특징으로, 선언된 모든 변수와 함수를 최상단으로 끌어올리는 것

console.log(bread); // undefined 출력
var bread = "Baguette";
console.log(bread); // "Baguette" 출력

코드는 위에서 아래로 순차적으로 실행된다. 하지만 호이스팅으로 인해 최상단으로 올라간 bread는 아직 선언부가 나오지 않았음에도 bread를 출력하게 된다. 이때 값은 undefined로 나오는데, 할당은 호이스팅 되지 않기 때문이다.

둘째로, 중복 선언을 허용한다. 프로그래밍에서 변수는 한 번 선언되면 다시 선언할 필요가 사실상 없다. 하지만 var를 사용해 재선언과 재할당을 할 수 있다. 재할당을 위한 재선언을 하는 셈이다.

var bread = "Baguette";
var bread = "Croissant";
console.log(bread); // "Croissant" 출력

셋째는 블록을 무시하는 문제다.

bread = "Baguette";
console.log(bread); // "Baguette" 출력
if (false) {
var bread;
}

bread는 지역 변수로 선언했지만, 첫 번째 줄에서 이미 선언된 변수로 간주하고 재할당 되어 두 번째 줄에서 출력된다.
var는 함수만 지역변수로 호이스팅 되고 나머지는 다 전역변수로 올려버린다.

앞선 문제점들을 보완하며 만들어진 게 let이다.
let도 호이스팅이 된다. 하지만 Temporal Death Zone (TDZ)을 적용해서, 코드 실행 시 아직 선언부가 나오지 않은 변수는 일시적으로 접근이 제한된다.