#JSCON2016 ECMA2015의 언어적 의미를 파헤쳐보기.

1. ECMA2015 INSIDE
우아한형제들
이준호

2. ECMA 2015
• 2015년 6월 17일
• Be a Better Language
• ECMA 스펙의 가장 큰 변화
• ES5의 완벽한 상위 집합

3. New features
• Classes
• Modules
• New methods for strings and Arrays
• Promises
• Maps, Sets
• Generators
• Proxies
• WeakMaps
• Lexical block scoping
• Iterators
• Destructuring patterns

4. Contents
• Promise
• Generator
• Generator + Promise

5. 비동기 제어 ( Promise + Generator )
function *main() {
const r1 = yield request('sample1.txt');
const r2 = yield request('sample2.txt');
console.log(r1);
console.log(r2);
}
run(main);

6. Promise
new Promise, Promise.resolve, Promise.reject,
Promise.all, Promise.race, 비동기 제어, Job Queue

7. new Promise
const p = new Promise(function(resolve, reject) {
// ...
if (success) {
resolve('success');
} else {
reject('error');
}
});
p.then(resoved, rejected);

8. Promise.resolve
const resolved = {
then(resolve) { resolve(42); }
};
const rejected = {
then(resolve, reject) { reject('error'); }
};
const p1 = Promise.resolve(resolved);
const p2 = Promise.resolve(rejected);
p1.then(function(value) { console.log(value); }); // 42
p2.catch(function(value) { console.log(value); }); // error

9. Promise.reject
const p1 = new Promise(function(resolve, reject) {
reject('error');
});
const p2 = Promise.reject('error');

10. Promise
Promise
.then(reject)
.catch(reject)
.then(resolve)
Promise

11. Promise.all
const p1 = Promise.resolve(42);
const p2 = Promise.resolve('JSCON');
const p3 = Promise.reject('error');
Promise.all([p1, p2, p3]).catch(function(error) {
console.log(error); // error
});
Promise.all([p1, p2]).then(function(value) {
console.log(value); // [42, 'JSCON']
});

12. Promise.race
const p1 = Promise.resolve(42);
const p2 = Promise.resolve('JSCON');
const p3 = Promise.reject('error');
Promise.race([p1, p2, p3]).then(function(value) {
console.log(value); // 42
});

13. 비동기 제어
const p = Promise.resolve(21);
p.then(function(v) {
return new Promise(function(resolve) {
setTimeout(function() {
resolve(v * 2);
}, 100 );
});
}).then(function(v) { console.log( v ); /* 42 */ } );

14. 비동기 제어
request('sample1.txt').then(function(value) {
console.log(value);
return request('sample2.txt');
}).then(function(value) {
console.log(value);
return request('sample3.txt');
}).catch(function(value) {
console.log(value);
});

15. Job Queue
setTimeout(function() {
console.log('A');
}, 0);
Promise.resolve().then(function() {
console.log('B');
}).then(function() {
console.log('C');
});

16. Event Queue & Job Queue
setTimeout(func1, 0)
Promise.resolve()
.then(func2)
func2
func1

17. Job Queue
Promise.resolve('A').then(function(val) {
console.log(val); // 1
Promise.resolve('a').then(function(v) {
console.log(v); // 2
return Promise.resolve('b');
}).then(function(v) {
console.log(v); // 4
return Promise.resolve('c');
}).then(function(v) {
console.log(v); // 6
});
return Promise.resolve('B');
})
.then(function(val) {
console.log(val); // 3
return Promise.resolve('C');
})
.then(function(val) {
console.log(val); // 5
});
// A, a, B, b, C, c

18. Promise의 한계
예외처리, 단일귀결, 취소 불가

19. 예외처리
const p = foo().then(function() {
// ...
}).then(function() {
// ...
});
p.catch(function() { /* ... */ });

20. 단일귀결
const p = new Promise(function(resolve, reject) {
addEventListener('click', resolve);
});
p.then(function(event) {
const id = event.target.id;
return request(`http://json.io/?id=${id}`);
}).then(function(value) { /* ... */ });

21. 단일귀결
addEventListener('click', function(event) {
const id = event.target.id;
request(`http://jscon.io/?id=${id}`)
.then(function(value) {
// ...
});
});

22. 취소 불가
const p = foo(42);
p.then(function() {
// ...
}).catch(function() {
// ...
});
p.then(function() {
// ...
});

23. Generator
Iterable / Iterator, yield, yield*, yeild + next, return, throw

24. Iterable / Iterator
const iterable = {
count: 0,
[Symbol.iterator]() { return this; },
next() {
if (this.count < 10) {
return { value: this.count++ };
} else {
return { done: true };
}}};
for (const count of iterable[Symbol.iterator]()) {
console.log(count);
}

25. Iterable / Iterator
const arr = [1,3,5,7,9];
const it = arr[Symbol.iterator]();
it.next().value; // 1
it.next().value; // 3
it.next().value; // 5

26. Generator
function *Gen(){
yield 1;
}
const it = Gen();
console.log(it.next()); // {value: 1, done: false }
console.log(it.next()); // {value: undefined, done: true }

27. yield
function *gen(val) {
while (true) {
yield val++;
}}
const it = gen(10);
console.log(it.next().value); // 10
console.log(it.next().value); // 11
console.log(it.next().value); // 12

28. yield*
function *foo() {
yield 2;
yield 3;
}
function *bar() {
yield 1;
yield *foo();
}
const it = bar();
console.log(it.next().value); // 1
console.log(it.next().value); // 2
console.log(it.next().value); // 3

29. Generator
Generator
// …
yield
const it = Gen();
it.next();
it.next();
// …
yield
// …
2
4

30. yield + next
function *foo(x) {
const y = x * (yield);
return y;
}
const it = foo(6);
it.next();
const res = it.next(7);
console.log(res.value); // 42

31. return 예외처리
function *gen(val) {
try {
while (true) { yield val++; }
} finally { console.log('end'); }
}
const it = gen(10);
console.log(it.next()); // 10
console.log(it.return()); // end, ..

32. throw 예외처리
function foo() {
request('http://jscon.io', function(err, data) {
if (err) it.throw(err);
else it.next(data);
}); }
function *main() {
try {
const text = yield foo();
} catch (err) { console.error(err); } }
const it = main();
it.next();

33. throw 예외처리
function *gen() {
var x = yield "Hello JSCON";
}
const it = gen();
it.next();
try {
it.throw('error');
} catch (error) { console.error(error); /* error */ }

34. Generator + Promise
request, 비동기 제어, Generator 실행기, main, *sub, Promise.all

35. request Promise
function request(url) {
return new Promise(function(res, rej) {
const request = new XMLHttpRequest();
request.onload = function() {
if (this.status == 200) {
res(this.response);
} else {
rej(new Error(this.statusText));
}
};
request.onerror = function() {
reject(new Error(this.statusText));
};
request.open('GET', url);
request.send();
})
}

36. Example
• Preview
http://goo.gl/us2cKJ
• Code
http://goo.gl/94rtQR
• JSFiddle
• http://goo.gl/qa9icN

37. 비동기 제어 Generator + Promise
function foo() {
return request('http://jscon.io');
}
function *main() {
try {
const text = yield foo();
console.log(text);
} catch (err) {
console.error(err);
}
}
const it = main();
const p = it.next().value;
p.then(function(text) {
it.next(text);
},
function(err) {
it.throw(err);
}
);

38. Generator 실행기
function run(gen, ...args) {
var it = gen.apply(this, args);
return Promise.resolve()
.then(function handleNext(value) {
var next = it.next(value);
return (function handleResult(next) {
if (next.done) {
return next.value;
} else {
return Promise.resolve(next.value)
.then(handleNext, function
handleError(error) {
return Promise.resolve(
it.throw(error))
.then(handleResult);
});
}
})(next);
});
}

39. main
function *main() {
const r1 = yield request('sample1.txt');
const r2 = yield request('sample2.txt');
console.log(r1);
console.log(r2);
}
run(main);

40. Example
• Preview
http://goo.gl/Lmxklf
• Code
http://goo.gl/6Wq1WY
• JSFiddle
http://goo.gl/t4zqrP

41. *sub
function *sub() {
const r2 = yield request('sample2.txt');
const r3 = yield request('sample3.txt');
return [r2, r3];
}
function *main() {
const url = yield request('sample1.txt');
const [data1, data2] = yield *sub();
alert(`${url}/?data1=${data1}&data2=${data2}`);
}
run(main);

42. Example
• Preview
http://goo.gl/Pi3nKc
• Code
http://goo.gl/Ft84I1
• JSFiddle
http://goo.gl/jA3FRx

43. Promise.all
function bar(url1, url2) {
return Promise.all([request(url1), request(url2)]);
}
function *foo() {
var [r1, r2] = yield bar('sample1.txt', 'sample2.txt' );
var r3 = yield request(`sample3.txt/?r1=${r1}&r2=${r2}`);
console.log(r3);
}
run(foo);

44. Example
• Preview
http://goo.gl/3FKeUA
• Code
http://goo.gl/K66dDd
• JSFiddle
http://goo.gl/w0iE9o

45. Further reading
Github
compatibility table,
ECMAScript 6 — New Features: Overview & Comparison
HACKS-웹기술블로그

46. Further reading
• Github
https://github.com/shallaa/async
• compatibility table
http://kangax.github.io/compat-table/es5/
• ECMAScript 6 — New Features: Overview & Comparison
http://es6-features.org/
• HACKS-웹기술블로그
http://hacks.mozilla.or.kr/category/es6-in-depth/

47. 끗
수고하셨습니다.