[JS] 변수와 타입

김재훈·2022년 10월 25일

코드스테이츠 블로깅

목록 보기

2/9

강의에서는 JS에서 변수를 선언하는 방법으로 let만 배웠지만 JavaScript에서는 변수를 선언하는 방법에는 그 외에도 2가지가 더 있습니다. 그 내용들을 정리하며 변수를 선언하는 방법 세 가지의 차이점을 살펴보려고 합니다.

변수(Variable)

변수는 값을 컴퓨터의 메모리 공간에 저장하기 위한 식별자입니다.
식별자는 프로그래밍 언어에서 의미를 가지는 호출 가능한 문자 및 기호를 말합니다. 변수, 함수 이름 등이 식별자가 될 수 있습니다.

JS에서 변수를 선언하는 방법은 세 가지입니다.

var

ES6에서 let, const 키워드가 도입되기 전에는 유일한 변수 선언 방법이었습니다. 문제를 유발할 수 있는 단점들 때문에 현재는 잘 쓰이지 않지만 JS의 업그레이드 방식(기존 기능을 수정/삭제하지 않고, 새로운 기능을 추가) 때문에 삭제되지 않고 있습니다.

가장 대표적인 단점으로 함수 레벨 스코프로 동작하는 var의 특성상 아래와 같이 다른 블록에 들어가는 경우에도 전역 변수로 동작합니다.

var globalVar = 123;
if (true) {
  globalVar = 456;
}
console.log(globalVar);
// -> 456

오직 함수에서 선언하는 경우에만 지역 변수로써 선언됩니다.
아래 코드에서도 함수가 호출되어 함수 내부에서 foo의 값을 변경했지만, 외부에서 호출할 때는 변경되지 않습니다.

var foo = 123;

function foobar() {
  foo = 456;
  bar = 456;
  return bar;
}

console.log(foo); // -> 123
console.log(foobar()); // -> 456

let, const

let, const 키워드는 ES6에 도입된 키워드로 var의 단점을 블록 레벨 스코프를 도입해 var의 단점을 해결했습니다. 또한 중복 선언을 방지함으로써 개발자가 의도치 않은 에러를 미연에 방지합니다.

const는 let과 거의 동일하지만 차이점은 한 번 선언하면 값을 다시 할당할 수 없는 상수를 선언할 때 사용합니다.

호이스팅

변수를 선언하거나 함수를 선언하면, 선언 지점보다 앞에서 호출하더라도 정상적으로 호출됩니다. 이는 JS가 선언된 내용들을 읽어 미리 처리하기 때문인데, 이를 호이스팅이라고 부릅니다.

대신 let 키워드로 변수를 선언하는 경우에는 선언은 됐지만 초기화되지 않아 선언문 이전 단계에서 참조 시 참조 오류(ReferenceError)가 발생합니다.

왜냐하면 var 키워드는 선언 단계에 초기화(변수에 임시로 undefined를 할당)가 되지만, let 키워드는 초기화가 코드 흐름이 선언 단계 이후 실제 선언문까지 도달했을 때 실행되기 때문입니다. 이를 TDZ; Temporal Dead Zone(일시적 사각지대)라고 부릅니다.