Skip to content
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
84 changes: 44 additions & 40 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -216,8 +216,8 @@ function f() {

More MDN info: [let statement](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let), [const statement](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const)

### Iterators + For..Of
Iterator objects enable custom iteration like CLR IEnumerable or Java Iterable. Generalize `for..in` to custom iterator-based iteration with `for..of`. Don’t require realizing an array, enabling lazy design patterns like LINQ.
### 이터레이터 + For..Of
이터레이터 객체는 공통 언어 런타임(Common Language Runtime, CLR)에서의 IEnumerable, 자바에서의 Iterable과 같은 사용자 지정 반복을 가능하게 해준다. 기존 `for..in`으로 작성했던 코드를 `for..of`를 통해 커스텀 이터레이터 기반의 이터레이션으로 일반화 할 수 있다. 반복자를 위한 배열을 구현할 필요가 없고, LINQ와 같은 게으른 디자인 패턴을 사용할 수 있다.

```JavaScript
let fibonacci = {
Expand All @@ -233,14 +233,15 @@ let fibonacci = {
}

for (var n of fibonacci) {
// truncate the sequence at 1000
// 1000 초과 시 중단
if (n > 1000)
break;
console.log(n);
}
```

Iteration is based on these duck-typed interfaces (using [TypeScript](http://typescriptlang.org) type syntax for exposition only):
([타입스크립트](http://typescriptlang.org)에서만 사용되는 표현식 타입 구문) 이터레이션은 덕 타입 인터페이스 기반이다.

```TypeScript
interface IteratorResult {
done: boolean;
Expand All @@ -254,12 +255,13 @@ interface Iterable {
}
```

More info: [MDN for...of](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of)
더보기: [MDN for...of](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of)

### Generators
Generators simplify iterator-authoring using `function*` and `yield`. A function declared as function* returns a Generator instance. Generators are subtypes of iterators which include additional `next` and `throw`. These enable values to flow back into the generator, so `yield` is an expression form which returns a value (or throws).
### 제너레이터
제너레이터는 `function*` 와 `yield`를 사용하여 이터레이터 작성을 단순화 한다. function*로 정의된 함수는 제너레이터 인스턴스를 반환한다. 제너레이터는 `next` 와 `throw`를 포함하고 있는 이터레이터의 하위 유형이다.
이것들은 값을 제너레이터로 다시 되돌릴 수 있게 해준다. 그래서 `yield`는 값을 반환하는 표현식이다.

Note: Can also be used to enable ‘await’-like async programming, see also ES7 `await` proposal.
참고: ‘await’와 같은 비동기 프로그래밍을 활성화하는 데 사용할 수 있다. ES7의 `await` 제안을 참조하자.

```JavaScript
var fibonacci = {
Expand All @@ -275,14 +277,15 @@ var fibonacci = {
}

for (var n of fibonacci) {
// truncate the sequence at 1000
// 1000 초과 시 중단
if (n > 1000)
break;
console.log(n);
}
```

The generator interface is (using [TypeScript](http://typescriptlang.org) type syntax for exposition only):
([타입스크립트](http://typescriptlang.org)에서만 사용되는 표현식 타입 구문) 제너레이터 인터페이스는 다음과 같다.


```TypeScript
interface Generator extends Iterator {
Expand All @@ -291,7 +294,7 @@ interface Generator extends Iterator {
}
```

More info: [MDN Iteration protocols](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols)
더보기: [MDN Iteration protocols](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols)

### Unicode
Non-breaking additions to support full Unicode, including new Unicode literal form in strings and new RegExp `u` mode to handle code points, as well as new APIs to process strings at the 21bit code points level. These additions support building global apps in JavaScript.
Expand Down Expand Up @@ -384,7 +387,8 @@ System.set('jquery', Module({$: $})); // WARNING: not yet finalized
```

### Map + Set + WeakMap + WeakSet
Efficient data structures for common algorithms. WeakMaps provides leak-free object-key’d side tables.
공통 알고리즘을 위한 효율적인 데이터 구조. WeakMaps은 열은 키 객체 참조를 제공해준다. 그래서 가비지 컬랙션을 통해 메모리 누수를 막을 수 있다.


```JavaScript
// Sets
Expand All @@ -407,16 +411,16 @@ wm.size === undefined
// Weak Sets
var ws = new WeakSet();
ws.add({ data: 42 });
// Because the added object has no other references, it will not be held in the set
// 추가된 객체에는 다른 참조가 없기 때문에 set에 포함되지 않는다.
```

More MDN info: [Map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map), [Set](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set), [WeakMap](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakMap), [WeakSet](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakSet)
더보기: [Map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map), [Set](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set), [WeakMap](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakMap), [WeakSet](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakSet)

### Proxies
Proxies enable creation of objects with the full range of behaviors available to host objects. Can be used for interception, object virtualization, logging/profiling, etc.
### 프록시
프록시는 호스트 객체에 있는 모든 것을 사용할 수 있는 객체를 만들 수 있게 해준다. 프록시는 가로채기, 객체 가상화, 로깅/프로파일링 등에 사용된다.

```JavaScript
// Proxying a normal object
// 정상적인 객체 프록시
var target = {};
var handler = {
get: function (receiver, name) {
Expand All @@ -429,7 +433,7 @@ p.world === 'Hello, world!';
```

```JavaScript
// Proxying a function object
// 정상적인 함수 프록시
var target = function () { return 'I am the target'; };
var handler = {
apply: function (receiver, ...args) {
Expand All @@ -441,7 +445,7 @@ var p = new Proxy(target, handler);
p() === 'I am the proxy';
```

There are traps available for all of the runtime-level meta-operations:
모든 런타임 단계의 메타 설정에 사용할 수 있는 트랩들이 있다.

```JavaScript
var handler =
Expand All @@ -463,16 +467,16 @@ var handler =
}
```

More info: [MDN Proxy](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy)
더보기: [MDN Proxy](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy)

### Symbols
Symbols enable access control for object state. Symbols allow properties to be keyed by either `string` (as in ES5) or `symbol`. Symbols are a new primitive type. Optional `description` parameter used in debugging - but is not part of identity. Symbols are unique (like gensym), but not private since they are exposed via reflection features like `Object.getOwnPropertySymbols`.
### 심볼
심볼은 객체 상태의 접근 제어를 가능하게 해준다. 심볼을 사용하면 객체의 속성으로 ES5에서의 `string` 혹은 `symbol`로 입력할 수 있다 심볼은 새로운 원시 타입이다. 추가 `description` 매개변수는 심볼의 디버깅에 사용될 뿐, 심볼에 대한 접근이나 기능이 아니다. 심볼은 gensym와 같이 유일한 값 하지만, `Object.getOwnPropertySymbols`와 같은 리플렉션 기능을 통해 외부에 노출되어 있기 때문에 private 하지는 않다.


```JavaScript
var MyClass = (function() {

// module scoped symbol
// 모듈 안에서만 접근 가능한 심볼
var key = Symbol("key");

function MyClass(privateData) {
Expand All @@ -492,35 +496,35 @@ var c = new MyClass("hello")
c["key"] === undefined
```

More info: [MDN Symbol](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol)
더보기: [MDN Symbol](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol)

### Subclassable Built-ins
In ES6, built-ins like `Array`, `Date` and DOM `Element`s can be subclassed.
### 내장 객체의 서브클래스화
ES6에서는 `Array`, `Date`, 돔 `Element`와 같은 내장 객체를 서브클래스화 할 수 있다.

Object construction for a function named `Ctor` now uses two-phases (both virtually dispatched):
- Call `Ctor[@@create]` to allocate the object, installing any special behavior
- Invoke constructor on new instance to initialize
`Ctor`라는 이름의 함수 객체 생성은 이제 2단계를 사용한다. (모두 가상으로 실행)
- 객체 할당을 위해 `Ctor[@@create]`를 호출하고, 해당 객체에 특별 속성을 설치한다.
- 새 인스턴스에서 생성자를 실행해서 초기화한다.

The known `@@create` symbol is available via `Symbol.create`. Built-ins now expose their `@@create` explicitly.
`@@create` 심볼은 `Symbol.create`을 통해 사용할 수 있다. 이제 내장 객체는 `@@create`를 명시적으로 노출하게 된다.

```JavaScript
// Pseudo-code of Array
// Array 클래스의 슈도 코드
class Array {
constructor(...args) { /* ... */ }
static [Symbol.create]() {
// Install special [[DefineOwnProperty]]
// to magically update 'length'
// 'length' 값을 업데이트하기 위해
// 특별한 [[DefineOwnProperty]]를 설치
}
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@jeonghwan-kim @pouu69

515라인과 516에 있는 부분의 내용을 이해 못해서 도움 요청합니다.
static으로 정의된 메소드의 역할을 이야기하는 것 같은데, 실제로 저 메소드를 호출하려면 어떻게 써야하나요?

ex) Array.xxx();

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

제생각에 저렇게 심볼로 생성한이유는 저 Array클래스를 상속받은 하위클래스에서 Array 그러니깐 배열의 속성을 그대로 사용하기위해 하는걸로 알고있습니다.
그뢔서 하위클래스에서 배열이랑 똑같이 사용이 가능하게된다고 합니다. length 같은거요.
확실한건 아닙니다. 그래서 사용법은 저걸 상속받은 하위클래스에서 x.length 요라고 쓰는거같습니다.라고 생각이듭니다.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

하위 클래스에서 상위 클래스의 속성을 그대로 사용하는 건
하위 클래스 constructor에서 super();만 해주면 되는 거 아닌가요?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

음 단순히 array 클래스를 상속받았다고 히위클래스가 진짜 배열객체가되는게 아니라서
하위클래스가 진짜우리가 알고있는 배열객체로 뿅 하고 변신시키려는 횅위라고 알고있습니다.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

그리고 제가방금 살짝 찾아봤는데 Symbol.species ? 라는 형식으로 빌트인내장클래스를 결합한다고 하는데 참고해서 검색좀... 제가몸이불편해서..

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

네넵, 알겠습니다.
일단 정환님 의견까지 확인하고 추가 커밋 푸쉬할게요!

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

뾰로롱~ 소환되었습니다.

해당 섹션은 논의 중이다가 es6에서 제외(?)된 내용같습니다.

MDN에도 없구요.

@@create를 호출하지 않고 부모클래스 생성자 함수가 초기화 작업을 한다로 이해했습니다.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

저도 @@create 는 찾아봐도 없엇는데, 제외되어서 그런거엿군요.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

아 원본 저장소의 issue를 찾아 볼 생각을 못 했네요ㅎㅎ
감사합니다.

}

// User code of Array subclass
// Array 서브클래스의 사용자 코드
class MyArray extends Array {
constructor(...args) { super(...args); }
}

// Two-phase 'new':
// 1) Call @@create to allocate object
// 2) Invoke constructor on new instance
// 'new'의 2단계:
// 1) 객체 할당을 위한 @@create 호출
// 2) 새로운 인스턴스에서의 생성자 실행
var arr = new MyArray();
arr[1] = 12;
arr.length == 2
Expand Down Expand Up @@ -564,8 +568,8 @@ Two new numeric literal forms are added for binary (`b`) and octal (`o`).
0o767 === 503 // true
```

### Promises
Promises are a library for asynchronous programming. Promises are a first class representation of a value that may be made available in the future. Promises are used in many existing JavaScript libraries.
### 프로미스
프로미스는 비동기 프로그래밍을 위한 라이브러리다. 프로미스는 미래에 사용할 수 있는 값의 일급 표현이다. 프로미스는 현존하는 많은 자바스크립트 라이브러리에 사용되고 있다.

```JavaScript
function timeout(duration = 0) {
Expand All @@ -583,7 +587,7 @@ var p = timeout(1000).then(() => {
})
```

More info: [MDN Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)
더보기: [MDN Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)

### Reflect API
Full reflection API exposing the runtime-level meta-operations on objects. This is effectively the inverse of the Proxy API, and allows making calls corresponding to the same meta-operations as the proxy traps. Especially useful for implementing proxies.
Expand Down