01 타입스크립트 소개
02 ECMAScript
03 타입스크립트 기초 문법
04 인터페이스와 클래스
05 타입의 호환성
06 타입 시스템 심화
07 고급 타입
08 모듈과 네임스페이스
09 실제 프로젝트에서 사용하기
10 유용한 라이브러리 소개
부록 II : 자바스크립트 언어 생태계

2.1 블록 수준 스코프

ES5까지의 자바스크립트에는 변수 선언을 위하여 사용할 수 있는 수단이 var 키워드 뿐이였다. 자바스크립트의 변수 선언은 다른 프로그래밍 언어에 익숙한 이들에게 많은 혼란을 선사하곤 하는데, 가장 큰 두 이유는 바로 함수 수준 스코프호이스팅이다.

함수 수준 스코프

함수 수준 스코프란, 단어 자체에서 짐작할 수 있듯 모든 변수 선언이 함수 수준에서 이루어짐을 의미한다. 즉, 자바스크립트에서 코드 블록({...})은 새로운 스코프를 생성하지 않는다.

function foo() {
var abc = 123;
if (true) {
var abc = 456;
}
console.log(abc);
}
foo(); // 456

블록 수준의 스코핑을 지원하는 언어에서는 if 블록 바깥에서 콘솔에 찍어본 abc의 값은 123으로 남아 있을 것이다. 하지만 자바스크립트는 해당 코드를 감싸고 있는 가장 가까운 함수 (또는 전역) 가 달라질 때에만 새로운 스코프가 생성된다. 따라서 2번 라인과 4번 라인의 abc는 동일한 변수를 가리킨다.

if 블록을 새로운 함수로 대체 했을 때에는 예상 대로의 결과가 나오는 것을 확인할 수 있다.

function foo() {
var abc = 123;
function bar() {
var abc = 456;
}
console.log(abc);
}
foo(); // 123

호이스팅

호이스팅이란 변수의 선언과 초기화가 동시에 이루어졌을 때, 자바스크립트 인터프리터가 변수의 선언을 함수의 맨 위로 이동시키는 동작을 뜻한다.

function foo() {
console.log(bar); // undefined
var bar = 123;
}

bar 라는 변수를 선언 전에 참조하는 이러한 코드는 많은 언어에서 에러를 일으킬 것이다. 하지만 자바스크립트에서는 이 함수는 정상적으로 실행되며 콘솔엔 undefined가 찍힌다. 자바스크립트 엔진이 해당 함수를 아래와 같이 함수 시작점에 선언이 있고 이후 초기화되는 식으로 해석하기 때문이다.

function foo() {
var bar;
console.log(bar); // undefined
bar = 123;
}

블록 수준 스코프

자바스크립트의 이 두 독특한 동작 방식은 많은 프로그래머에게 혼란을 미쳐 왔다. ES6는 이러한 혼란을 피할 수 있도록 letconst이라는 새로운 변수 선언 키워드를 도입했다. 두 키워드를 사용해 새로운 함수가 만들어질 때와 더불어 대괄호({ ... }) 로 감싼 블록마다 생성되는 블록 수준 스코프의 지배를 받는 블록 수준 변수를 정의할 수 있다.