ECMAScript 6 정리

Declarations

#let

 

let을 통한 변수 선언은, var를 통한 변수 선언과 다르게 hoisting 하지 않는다. 

즉, 변수가 선언된 이후부터 변수가 유효하고 그전에는 해당 변수를 사용할 수 없다.

 

var hoisting 된 변수를 실수로 선언 전에 사용할 경우 그 변수는 undefined가 된다. 

하지만 let을 사용하면, 변수를 hositing 하지 않을 뿐 아니라, 

변수를 선언한 블록 안에서 선언 전에 해당하는 이름을 사용하는 것을 에러로 처리한다.

function es5() { var i; for (i = 0; i < 10; i += 1) { doSomething(); } // i is 10 } function es6() { for (let i = 0; i < 10; i += 1) { doSomething(); } // i is not declared } 

또한, 이전에는 같은 스코프, 

같은 함수 안에서 변수의 선언문이 여러 개 있는 것이 정상적인 구문으로 처리되었다.

하지만 let을 사용한다면 같은 스코프에서 중복으로 선언하는 것이 에러로 처리된다.

function es5() { var i; for (i = 0; i < 10; i += 1) { (function () { doSomething(i); // i is undefined, because the variable(declared at line 8) is hoisted { doSomething(i); // it is also undefined, because the variable(declared at line 8) is hoisted var i = 10; } })(); } } function es6() { for (let i = 0; i < 10; i += 1) { (function () { doSomething(i); // 0 to 9 { doSomething(i); // syntax error let i = 10; } })(); } } 

#const

 

- const로 선언한 상수에 값을 재할당할 수 없다.

const PORT = 80; function setPort(port) { PORT = port; // const로 선언한 상수에 값을 재할당할 수 없다. } // 이 함수를 선언할 때 에러가 발생한다. 

- const를 이용해서 상수를 선언할 때는 언제나 값을 초기화해주어야 한다.

const COLOR_CODE; // 로 선언하는 상수는 반드시 초기화해야 한다. 

하지만 const도 상수 선언을 위한 완벽한 해결책은 아니다. 

const로 선언한 상수에는 값을 재할당할 수 없지만, 상수임에도 불구하고 값을 변경시킬 수 있기 때문이다. 

const로 선언한 상수는 어디까지나 값의 재할당을 막을 뿐, 그 값을 보호해주지 않는다.

 

Functions

 

this?

 

function 함수와 화살표 함수 사이에는 약간의 차이점이 있습니다. 

화살표 함수는 자기 고유의 this 값을 갖지 않습니다. 

화살표 함수 안의 this 값은 언제나 화살표 함수를 감싸는 외부 스코프(scope)에서 계승 받습니다.

 

JavaScript에서 this는 어떻게 결정되나요? this는 어디에서 유래하나요? 

결코 간단하게 답할 수 없는 문제입니다. 

만약 이 문제가 간단하다고 느껴진다면, 그건 당신이 이 문제를 오랫동안 다뤄왔기 때문입니다!

 

이 문제가 그토록 자주 제기되는 이유는 function 함수의 this 값이 자동으로 주어지기 때문입니다. 

우리가 원하든 원하지 않든 말이죠. 

다음과 같은 꼼수를 사용해본 적이 있나요?

{ ... addAll: function addAll(pieces) { var self = this; _.each(pieces, function (piece) { self.add(piece); }); }, ... }

여기서, 내부 함수에 우리가 정말 쓰고 싶은 코드는 this.add(piece) 뿐입니다. 

불행히 내부 함수는 외부 함수의 this 값을 계승하지 않습니다. 

내부 함수의 this 값은 window 또는 undefined가 될 것입니다. 

임시 변수 self는 외부 함수의 this 값을 내부 함수에서 참조하기 위해 사용한 것입니다. 

(이 꼼수를 대신하는 또다른 방법은 내부 함수의 .bind(this) 메소드를 사용하는 것입니다. 어떤 방법도 그다지 아름답지 못합니다.)

 

ES6의 경우, 다음과 같은 규칙을 따른다면 this와 관련된 대부분의 꼼수를 쓰지 않아도 됩니다.

 

- object.method() 문법을 통해 호출하는 메소드는 화살표 함수가 아닌 일반 함수를 쓰세요. 

  그런 함수들은 호출자(caller)로부터 의미 있는 this 값을 전달 받습니다.

 

- 그밖의 모든 경우에는 화살표 함수를 쓰세요.

// ES6 { ... addAll: function addAll(pieces) { _.each(pieces, piece => this.add(piece)); }, ... }

ES6에서, addAll 메소드는 호출자로부터 this를 전달받습니다. 

내부 함수는 화살표 함수이기 때문에, this 값을 자신을 감싸는 외부 스코프로부터 계승 받습니다.

 

보너스로 ES6는 객체 리터럴 안에 메소드를 간략하게 정의하는 표기법도 제공합니다! 

그래서 위의 코드를 좀 더 간결하게 만들 수 있습니다.

 

 

메소드와 화살표 중간에 더이상 functoin 이라고 써넣지 않아도 됩니다. 

 

사소하지만 화살표 함수와 일반 함수 사이에 차이점이 하나 더 있습니다. 

화살표 함수에는 arguments 객체가 전달되지 않습니다. 

물론 ES6를 쓰는 당신이라면 arguments 객체보다 레스트(rest) 파라메터나 디폴트 파라메터를 더 좋아할 것입니다.

// ES6 with method syntax { ... addAll(pieces) { _.each(pieces, piece => this.add(piece)); }, ... }

Objects, Strings, and Object.assign 

 

Arrays, Maps, and Sets

 

Classes and Modules 

 

Promises, Iterators, and Generators