03. ECMAScript 6

Assembled by GimunLee

개요

Angular는 TypeScript를 도입하여 다양한 도구의 지원을 제공받을 수 있게 되었다. TypeScriptsms ES5의 상우집합(Superset)이므로 ES5의 문법을 그대로 사용할 수 있으며, Babel과 같은 별도의 트랜스파일러를 사용하지 않아도 기존의 자바스크립트 엔진(브라우저 또는 Node.js)에서 ES6의 새로운 기능을 실행할 수 있다.

1) let, const와 블록 레벨 스코프

개요

ES5에서 변수를 선언할 수 있는 유일한 방법은 var 키워드를 사용하는 것이었다. var 키워드로 선언된 변수는 아래와 같은 특징이 있다.

• 함수 레벨 스코프: 전역 변수의 남발. for 루프의 초기화 식에서 사용한 변수를 for 루프 외부 또는 전역에서 참조 가능

• var 키워드 생략 허용: 의도하지 않은 변수의 전역화

• 중복 선언 허용: 의도하지 않은 변숫값 변경

• **변수 호이스팅: ** 변수를 선언하기 전에 참조 가능

대부분 문제는 전역 변수로 인해 발생한다. 변수의 유효 범위는 좁을수록 좋다.

let

블록 레벨 스코프

대부분의 C-family 언어는 블록 레벨 스코프를 지원하지만, 자바스크립트는 함수 레벨 스코프를 갖는다.

• 함수 레벨 스코프(Function-level scope): 함수 내에서 선언된 변수는 함수 내에서만 유효하며 함수 외부에서는 참조할 수 없다. 즉 함수 내부에서 선언한 변수는 지역 변수이며 함수 외부에서 선언한 변수는 모두 전역 변수이다.
• **블록 레벨 스코프(Block-level scope): ** 코드 블록 내에서 선언된 변수는 코드 블록 내에서만 유효하며 코드 블록 외부에서는 참조할 수 없다.

var 키워드 사용

console.log(foo); // undefined
var foo = 123; // 전역 변수
console.log(foo); // 123
{
	var foo = 456; // 중복 선언 허용
}
console.log(foo); // 456

let 키워드(블록 레벨 스코프) 사용

let foo = 123;
{
  let foo = 456; 
  let bar = 456;
}
console.log(foo); // 123
console.log(bar); // ReferenceError: bar is not defined

중복 선언 금지

var 키워드로는 이름이 같은 변수를 중복해서 선언할 수 있었지만, let 키워드로는 이름이 같은 변수를 중복해서 선언하면 문법 에러(SyntaxError)가 발생한다.

var foo = 123;
var foo = 456; // 중복 선언 허용

let bar = 123;
let bar = 456; // Uncaught SyntaxError: Identifier 'bar' has already been declared

호이스팅(Hoisting)

자바스크립트는 ES6에서 도입된 let, const를 포함하여 모든 선언(var, let, const, function, function *, class)을 호이스팅한다. 호이스팅이란, var 선언문이나 function 선언문 등을 해당 스코프의 선두로 옮긴 것처럼 동작하는 특성을 말한다.

하지만 let 키워드로 선언된 변수는 선언문 이전에 참조하면 참조 에러가 발생한다. 이는 let 키워드로 선언된 변수는 스코프의 시작에서 변수의 선언까지 일시적 사각지대(TDZ, Temporal Dead Zone) 에 빠지기 때문이다.

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

console.log(bar); // Error: Uncaught ReferenceError: bar is not defined
let bar;

변수는 3단계에 걸쳐 생성된다.

• 선언 단계(Declaration phase): 변수를 실행 컨텍스트의 변수 객체(Variable Object)에 등록한다. 이 변수 객체는 스코프가 참조하는 대상이 된다.
• 초기화 단계(Initialization phase): 변수 객체에 등록된 변수를 위한 공간을 메모리에 확보한다. 이 단계에서 변수는 undefined로 초기화 된다.
• 할당 단계(Assignment phase): undefined로 초기화된 변수에 실제 값을 할당한다.

var 키워드로 선언된 변수는 선언 단계와 초기화 단계가 한번에 이루어진다. 하지만 let 키워드로 선언된 변수는 선언 단계와 초기화 단계가 분리되어 진행된다. 즉, 스코프에 변수를 등록(선언 단계)하지만 초기화 단계는 변수 선언문에 도달했을 때 이루어진다. 스코프의 시작 지점부터 초기화 시작 지점까지의 구간을 '일시적 사각지대(Temporal Dead Zone)' 라고 부른다.

결국 ES6에서는 호이스틍이 발생하지 않는 것과 차이가 없어 보인다. 하지만 그렇지 않다.

let foo = 1; // 전역 변수
{
  // let foo; // 호이스팅
	console.log(foo); // ReferenceError: foo is not defined
	let foo = 2;
}

위의 예제는 호이스팅이 발생하기 때문에 참조 에러가 발생한다.

전역 객체와 let

전역 객체(Global Object)는 모든 객체의 유일한 최상위 객체를 의미하며 일반적으로 브라우저 사이드에서는 window 객체, 서버 사이드(Node.js)에서는 global 객체를 의미한다. var 키워드로 선언된 변수를 전역 변수로 사용하면 전역 객체의 프로퍼티가 된다.

var foo = 123; // 전역 변수
console.log(window.foo); // 123

let 키워드로 선언된 변수를 전역 변수로 사용하는 경우, let 전역 변수는 전역 객체의 프로퍼티가 아니다. 즉, window.foo와 같이 접근할 수 없다. let 전역 변수는 보이지 않는 개념적인 블록 내에 존재하게 된다.

let foo = 123; // 전역 변수
console.log(window.foo); // undefined

#