Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
2017. 4. 15
한장현
, 잘 쓰고 계시죠?
• 전 삼성SDS 선임
• TV플랫폼 JavaScript 어플리케이션 구현
• 리테일 솔루션 서버 & 프론트엔드 구현
• 퇴사 1년째 자유의 몸
• JavaScript Full-stack Engineer
• 블로그 : ...
History
’97. 6
ES1
’98. 6
ES2
’99. 12
ES3
’07. 10
ES4
’09. 12
ES5
’11. 6
ES5.1
’16. 6
ES7
’15. 6
ES6
’17. 4
Transpiler
ES6 ⇒ ES5
Variables & Constants
var
let
const
값이 바뀌면
값이 바뀌지 않으면
* 호이스팅 주의
console.log(x);
var x = 'hello';
> undefined > Uncaught Re...
Enhanced Object Literals
var firstName = 'Janghyun';
var lastName = 'Han';
console.log({
firstName : firstName,
lastName :...
Arrow Function Expression
const sum = (num1, num2) => {
return num1 + num2;
}
const sum = (num1, num2) => num1 + num2;
fun...
Arrow Function Expression
인자가 1개면 괄호 생략 가능 인자가 없으면 괄호 생략 불가
const log = text => {
console.log(text);
}
log('hello');
const...
Arrow Function Expression
lexical this
> name is :
function runner (name) {
this.name = name;
setTimeout(function () {
con...
Template Literals
const name = 'Janghyun';
console.log('my name is ' + name);
console.log(`my name is ${name}`);
> my name...
Template Literals
> Janghyun Han
Tagged Template Literals
function fullName (string, firstName, lastName) {
console.log(st...
forEach(), for-in, for-of
var arr = ['a', 'b', 'c'];
for (var i = 0; i < arr.length; i++) {
console.log(arr[i]);
}
arr.for...
Parameter Default Value
function log (str) {
str = str || '(empty)';
console.log(str);
}
log();
function log (str = '(empt...
Rest Operator, Spread Operator
나머지 연산자
function log (){
var people = [].slice.call(arguments);
people.forEach(person => {
...
Rest Operator, Spread Operator
전개 연산자
const arr = [1, 2, 3];
console.log(arr); // [1, 2, 3]
console.log(...arr); // 1 2 3
...
Destructuring
객체 비구조화
function getStock(){
return {
symbol: "IBM",
price: 100.00
};
}
const { symbol, price } = getStock()...
Destructuring
배열 비구조화
> Kim
Han
> Kim
Han
["Lee", "Park"]
let [name1, name2] = ['Kim', 'Han'];
console.log(name1);
console...
Class & Inheritance
> Child {familyName: "Han", firstName: "Janghyun"}
true
true
class Parent {
constructor (familyName) {...
Class getter & setter
> Person {}
> Person {_name: "Janghyun"}
class Person {
get name (){
return this._name;
}
set name (...
Class getter & setter
함수 선언
const person = new Person();
person.walk();
person.sleep();
function Person () {
return {
walk...
Class Static Function
class Dog {
static bite () {
console.log('BITE!!');
}
}
Dog.bite();
> BITE!!
Module – import & export
export & import { }
export default & import
export const number = 100;
import { number } from './...
Promise
static delete (param) {
const self = this;
return util.objValidate(param, {
userID : Constants.TYPE.EMAIL
}, Const...
Promise
thenable
pending
fulfilled : Promise.resolve() – then()
rejected : Promise.reject() – catch()
Promise
Promise.resolve()
.then(() => {
console.log('then 1');
})
.then(() => {
console.log('then 2');
});
기본 형태
Promise.r...
Promise
에러 처리
Promise.resolve()
.then(() => {
console.log('then 1');
return Promise.reject();
})
.then(() => {
console.log...
Promise
new Promise()
Promise.resolve(), Promise.reject()와 다름
함수 실행 스택을 새로 시작
Promise를 지원하지 않는 비동기 함수 처리
Promise.resolve()...
Promise
병렬 처리
Promise.all([
Promise.resolve(1),
Promise.resolve(2),
Promise.resolve(3)
])
.then(result => {
console.log(re...
Promise const promise1 = new Promise(resolve => {
const delay = 100;
setTimeout(() => {
console.log('delay', delay);
resol...
Promise
빠른것 하나만 처리
DB 인스턴스가 여러 개일 때
백엔드가 여러 지역에 있을 때
const promise1 = new Promise(resolve => {
const delay = 100;
setTimeo...
Generator
비동기 처리
yield는 return과 비슷, yield 뒤 구문은 실행되고 반환
function* generatorFnc () {
yield 1;
}
var iterator = generatorFnc...
Generator
그만 알아보자
next() 표준 아님
send() 표준 아님
close() 표준 아님
throw() 표준 아님
function* fibonacci() {
var a = yield 1;
yield a *...
Async & Await – ES7 Draft
async : AsyncFunction 객체, 반환하는 것은 Promise, 결국 Promise wrapper
> some logic
then() : hello
> some...
Async & Await – ES7 Draft
async 에러 처리
async function asyncFnc (msg) {
console.log('some logic');
throw msg;
}
asyncFnc('he...
Async & Await – ES7 Draft
await : 현재 구문을 멈추고 다른 Promise를 실행, 그 Promise 완료되면 다시 진행
function delayFnc (delay, number) {
cons...
Async & Await – ES7 Draft
Async 는 Promise Wrapper!! 기존 Promise 로직도 호환
비동기 함수 랩핑에는 new Promise() 필요
.resolve()
.reject()
.t...
Async & Await – ES7 Draft
Promise Async
const delayFnc = (delay, result) => {
return new Promise(resolve => {
setTimeout((...
Async & Await – ES7 Draft
에러 처리 (from MDN)
Promise Async
function getProcessedData (url) {
return downloadData(url)
.catch...
More things…
Array
from()
of()
fill()
find()
findIndex()
entries()
keys()
values()
copyWithin()
Map, Set
forEach()
entries...
Coverage
ES5
ES6
TypeScript
Q & A
감사합니다.
Upcoming SlideShare
Loading in …5
×

ES6, 잘 쓰고 계시죠?

2,215 views

Published on

20170415 GDG Incheon 발표자료

Published in: Software
  • Hello! Get Your Professional Job-Winning Resume Here - Check our website! https://vk.cc/818RFv
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • @Hyeonseok Yang Mozilla에 있던 설명을 참고했는데 착오가 있었습니다!! ES6 Generator 표준에는 next(), return(), throw()가 있고, 표준이 아닌 것은 close()와 send() 입니다. 정확한 지적 고맙습니다^^
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Generator 설명에서 next와 throw는 표준인 것 같은데, 표준이 아니라고 표현하신게 맞나요? http://www.ecma-international.org/ecma-262/6.0/#sec-properties-of-generator-prototype
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

ES6, 잘 쓰고 계시죠?

  1. 1. 2017. 4. 15 한장현 , 잘 쓰고 계시죠?
  2. 2. • 전 삼성SDS 선임 • TV플랫폼 JavaScript 어플리케이션 구현 • 리테일 솔루션 서버 & 프론트엔드 구현 • 퇴사 1년째 자유의 몸 • JavaScript Full-stack Engineer • 블로그 : han41858.tistory.com • GitHub : github.com/han41858 • Angular 번역서 집필중 • GDG Korea Web Tech 운영진 한장현 (Janghyun Han) 2
  3. 3. History ’97. 6 ES1 ’98. 6 ES2 ’99. 12 ES3 ’07. 10 ES4 ’09. 12 ES5 ’11. 6 ES5.1 ’16. 6 ES7 ’15. 6 ES6 ’17. 4
  4. 4. Transpiler ES6 ⇒ ES5
  5. 5. Variables & Constants var let const 값이 바뀌면 값이 바뀌지 않으면 * 호이스팅 주의 console.log(x); var x = 'hello'; > undefined > Uncaught ReferenceError: x is not defined console.log(x); const x = 'hello'; console.log(x); let x = 'hello';
  6. 6. Enhanced Object Literals var firstName = 'Janghyun'; var lastName = 'Han'; console.log({ firstName : firstName, lastName : lastName }); const firstName = 'Janghyun'; const lastName = 'Han'; console.log({ firstName, lastName }); =
  7. 7. Arrow Function Expression const sum = (num1, num2) => { return num1 + num2; } const sum = (num1, num2) => num1 + num2; function sum (num1, num2) { return num1 + num2; } const sum = function (num1, num2) { return num1 + num2; } or * 호이스팅 됨 * function을 완전히 대체하지는 않음. new 불가 함수의 몸체가 한 줄이면 중괄호 & return 생략
  8. 8. Arrow Function Expression 인자가 1개면 괄호 생략 가능 인자가 없으면 괄호 생략 불가 const log = text => { console.log(text); } log('hello'); const log = () => { console.log('hello'); } log();
  9. 9. Arrow Function Expression lexical this > name is : function runner (name) { this.name = name; setTimeout(function () { console.log('name is : ', this.name); }, 1000); } const newRunner = new runner('hello'); function runner (name) { this.name = name; setTimeout(() => { console.log('name is : ' + this.name); }, 1000); } const newRunner = new runner('hello'); > name is : hello
  10. 10. Template Literals const name = 'Janghyun'; console.log('my name is ' + name); console.log(`my name is ${name}`); > my name is Janghyun const address = 'korean' + 'seoul'; console.log(address); const address = `korea seoul`; console.log(address); > korea seoul =
  11. 11. Template Literals > Janghyun Han Tagged Template Literals function fullName (string, firstName, lastName) { console.log(string); // ['', 'is ', ''] return firstName + ' ' + lastName; } const firstName = 'Janghyun'; const lastName = 'Han' console.log(fullName`${firstName} is ${lastName}`);
  12. 12. forEach(), for-in, for-of var arr = ['a', 'b', 'c']; for (var i = 0; i < arr.length; i++) { console.log(arr[i]); } arr.forEach(one => { console.log(one); }); for(let i in arr){ console.log(arr[i]); } for(let i of arr){ console.log(i); } > a b c ← break 불가
  13. 13. Parameter Default Value function log (str) { str = str || '(empty)'; console.log(str); } log(); function log (str = '(empty)') { console.log(str); } log(); =
  14. 14. Rest Operator, Spread Operator 나머지 연산자 function log (){ var people = [].slice.call(arguments); people.forEach(person => { console.log(person); }); } log('Han', 'Kim', 'Lee'); // 개수 가변 function log (...people) { people.forEach(person => { console.log(person); }); } log('Han', 'Kim', 'Lee'); // 개수 가변 = > Han Kim Lee function log (one, two, ...rest) { console.log(one); console.log(two); console.log(rest); } log(1, 2, 3, 4, 5); > 1 2 [3, 4, 5]
  15. 15. Rest Operator, Spread Operator 전개 연산자 const arr = [1, 2, 3]; console.log(arr); // [1, 2, 3] console.log(...arr); // 1 2 3 console.log(1, 2, 3); // 1 2 3 const arr1 = [1, 2, 3]; const arr2 = [4, 5, 6]; const arr3 = arr1.concat(arr2); const arr4 = [...arr1, ...arr2]; console.log(arr3); // [1, 2, 3, 4, 5, 6] console.log(arr4); // [1, 2, 3, 4, 5, 6]
  16. 16. Destructuring 객체 비구조화 function getStock(){ return { symbol: "IBM", price: 100.00 }; } const { symbol, price } = getStock(); console.log(`${symbol} is $${price}`); > IBM is $100 function getStock () { return { symbol : "IBM", price : 100.00 }; } const result = getStock(); const symbol = result.symbol; const price = result.price; console.log(`${symbol} is $${price}`); =
  17. 17. Destructuring 배열 비구조화 > Kim Han > Kim Han ["Lee", "Park"] let [name1, name2] = ['Kim', 'Han']; console.log(name1); console.log(name2); let [name1, name2, ...rest] = ['Kim', 'Han', 'Lee', 'Park']; console.log(name1); console.log(name2); console.log(rest);
  18. 18. Class & Inheritance > Child {familyName: "Han", firstName: "Janghyun"} true true class Parent { constructor (familyName) { this.familyName = 'Han'; } } class Child extends Parent { constructor (firstName, familyName) { super(familyName); this.firstName = firstName; } } const me = new Child('Janghyun', 'Han'); console.log(me); console.log(me instanceof Child); console.log(me instanceof Parent); 사실은 prototype
  19. 19. Class getter & setter > Person {} > Person {_name: "Janghyun"} class Person { get name (){ return this._name; } set name (name){ this._name = name; } } const person = new Person(); console.log(person); person.name = 'Janghyun'; console.log(person); 무한루프 조심
  20. 20. Class getter & setter 함수 선언 const person = new Person(); person.walk(); person.sleep(); function Person () { return { walk : function () { console.log('walking...'); }, sleep : function () { console.log('sleeping...'); } } } class Person { walk () { console.log('walking...'); } sleep () { console.log('sleeping...'); } } = 객체 리터럴에도 해당
  21. 21. Class Static Function class Dog { static bite () { console.log('BITE!!'); } } Dog.bite(); > BITE!!
  22. 22. Module – import & export export & import { } export default & import export const number = 100; import { number } from './test' console.log(number); export default const number = 100; import number from './test' console.log(number); import { number as num } from './test' console.log(num); or or import num from './test' console.log(num); 권장
  23. 23. Promise static delete (param) { const self = this; return util.objValidate(param, { userID : Constants.TYPE.EMAIL }, Constants.ERROR.USER_CTRL.NO_PARAMETER, log, 'delete()') .then(param => self.isExists(param)) .then(param => { // delete records return recordCtrl.deleteAll({ userID : param.userID }) .then(() => { log('remove records ok'); // param 자체를 다시 돌려주기 위해 Promise 필요 return Promise.resolve(param); }); }) .then(param => { // delete cards return cardCtrl.deleteAll({ userID : param.userID }) .then(() => { log('remove cards ok'); return Promise.resolve(param); }); }) .then(param => { // delete assets return assetCtrl.deleteAll({ userID : param.userID }) .then(() => { log('remove assets ok'); return Promise.resolve(param); }); }) .then(param => { // delete user return User.remove({ userID : param.userID }) .then(() => { return Promise.resolve(param); }, error => { log(error); return Promise.reject(new ERROR(Constants.ERROR.MONGOOSE.REMOVE_FAILED, log, 'delete()')); }); }) .then(param => { log(`delete ok : ${param.userID}`); return Promise.resolve(true); }); } 비동기 작업을 동기처럼 실행 쓰는 목적은 가독성 향상 콜백지옥 해결 X
  24. 24. Promise thenable pending fulfilled : Promise.resolve() – then() rejected : Promise.reject() – catch()
  25. 25. Promise Promise.resolve() .then(() => { console.log('then 1'); }) .then(() => { console.log('then 2'); }); 기본 형태 Promise.resolve('a') .then(param => { console.log('then 1', param); return Promise.resolve('b'); }) .then(param => { console.log('then 2', param); }); 인자 전달 > then 1, a then 2, b > then 1 then 2
  26. 26. Promise 에러 처리 Promise.resolve() .then(() => { console.log('then 1'); return Promise.reject(); }) .then(() => { console.log('then 2'); }) .catch(() => { console.log('catch'); }); > then 1 catch Promise.resolve() .then(() => { console.log('then 1'); return Promise.reject(); }) .then(() => { console.log('then 2'); }, () => { console.log('catch'); }); =
  27. 27. Promise new Promise() Promise.resolve(), Promise.reject()와 다름 함수 실행 스택을 새로 시작 Promise를 지원하지 않는 비동기 함수 처리 Promise.resolve() .then(() => { setTimeout(() => { console.log('in setTimeout()'); }, 1000); }) .then(() => { console.log('final then'); }); > final then in setTimeout() 잘못된 방법 Promise.resolve().then(() => { return new Promise(resolve => { setTimeout(() => { console.log('in setTimeout()'); resolve(); }, 1000); }) }).then(() => { console.log('final then'); }); > in setTimeout() final then
  28. 28. Promise 병렬 처리 Promise.all([ Promise.resolve(1), Promise.resolve(2), Promise.resolve(3) ]) .then(result => { console.log(result); }); > [1, 2, 3] Promise.all([ Promise.resolve(1), Promise.resolve(2), Promise.reject(3) ]) .then(result => { console.log(result); }) .catch(error => { console.log(error); }); 병렬 오류 처리 > 3
  29. 29. Promise const promise1 = new Promise(resolve => { const delay = 100; setTimeout(() => { console.log('delay', delay); resolve(delay); }, delay); }); const promise2 = new Promise(resolve => { const delay = 200; setTimeout(() => { console.log('delay', delay); resolve(delay); }, delay); }); const promise3 = new Promise(resolve => { const delay = 300; setTimeout(() => { console.log('delay', delay); resolve(delay); }, delay); }); Promise.all([ promise1, promise2, promise3 ]) .then(result => { console.log('then', result); });
  30. 30. Promise 빠른것 하나만 처리 DB 인스턴스가 여러 개일 때 백엔드가 여러 지역에 있을 때 const promise1 = new Promise(resolve => { const delay = 100; setTimeout(() => { console.log('delay', delay); resolve(delay); }, delay); }); const promise2 = new Promise(resolve => { const delay = 200; setTimeout(() => { console.log('delay', delay); resolve(delay); }, delay); }); const promise3 = new Promise(resolve => { const delay = 300; setTimeout(() => { console.log('delay', delay); resolve(delay); }, delay); }); Promise.race([ promise1, promise2, promise3 ]) .then(result => { console.log('then', result); });
  31. 31. Generator 비동기 처리 yield는 return과 비슷, yield 뒤 구문은 실행되고 반환 function* generatorFnc () { yield 1; } var iterator = generatorFnc(); console.log(iterator); // Generator {} console.log(iterator.next()); // { value : 1, done : false } console.log(iterator.next()); // { value : undefined, done : true } function* generatorFnc () { yield 1; yield 2; yield 3; } var iterator = generatorFnc(); console.log(iterator); // Generator {} console.log(iterator.next()); // { value : 1, done : false } console.log(iterator.next()); // { value : 2, done : false } console.log(iterator.next()); // { value : 3, done : false } console.log(iterator.next()); // { value : undefined, done : true }
  32. 32. Generator 그만 알아보자 next() 표준 아님 send() 표준 아님 close() 표준 아님 throw() 표준 아님 function* fibonacci() { var a = yield 1; yield a * 2; } var it = fibonacci(); console.log(it); // "Generator { }" console.log(it.next()); // 1 console.log(it.send(10)); // 20 console.log(it.close()); // undefined console.log(it.next()); // throws StopIteration (as the generator is now closed) 표준인 것 generator* yield yield*
  33. 33. Async & Await – ES7 Draft async : AsyncFunction 객체, 반환하는 것은 Promise, 결국 Promise wrapper > some logic then() : hello > some logic then() : hello = async function asyncFnc (msg) { console.log('some logic'); return msg; } asyncFnc('hello') .then(msg => { console.log('then() :', msg); }); const asyncFnc = function (msg) { return Promise.resolve() .then(() => { console.log('some logic'); return Promise.resolve(msg); }); } asyncFnc('hello') .then(msg => { console.log('then() :', msg); }); const asyncFnc = async msg => { console.log('some logic'); return msg; } 화살표 함수 표현식도 가능!!
  34. 34. Async & Await – ES7 Draft async 에러 처리 async function asyncFnc (msg) { console.log('some logic'); throw msg; } asyncFnc('hello') .then(msg => { console.log('then() :', msg); }) .catch(error => { console.error('catch() :', error); }); const asyncFnc = function (msg) { return Promise.resolve() .then(() => { console.log('some logic'); return Promise.reject(msg); }); } asyncFnc('hello') .then(msg => { console.log('then() :', msg); }) .catch(error => { console.error('catch() :', error); }); = > some logic catch() : hello > some logic catch() : hello
  35. 35. Async & Await – ES7 Draft await : 현재 구문을 멈추고 다른 Promise를 실행, 그 Promise 완료되면 다시 진행 function delayFnc (delay, number) { console.log('delayFnc()', delay, number); return new Promise(resolve => { setTimeout(() => { resolve(number); }, delay); }); } async function add1 () { var a = delayFnc(500, 10); var b = delayFnc(1000, 5); return await a + await b; } add1().then(sum => { console.log(sum); }); async function add2 () { var a = await delayFnc(500, 10); var b = await delayFnc(1000, 5); return a + b; } add2().then(sum => { console.log(sum); }); 병렬 처리 === Promise.all() 확인용 딜레이 함수 순차 처리
  36. 36. Async & Await – ES7 Draft Async 는 Promise Wrapper!! 기존 Promise 로직도 호환 비동기 함수 랩핑에는 new Promise() 필요 .resolve() .reject() .then() .catch() .all() async & return async & throw async & .then() async & .catch() async & await =
  37. 37. Async & Await – ES7 Draft Promise Async const delayFnc = (delay, result) => { return new Promise(resolve => { setTimeout(() => { resolve(result); }, delay); }); } const request1 = async () => { console.log('request1() start'); return delayFnc(1000, { msg : 'Hello' }); } const request2 = async () => { console.log('request2() start'); return delayFnc(1000, { msg : 'Async' }); } const parse = async (dataArr) => { return dataArr .map(data => data.msg) .join(' '); } (async () => { const dataArr = [await request1(), await request2()]; const result = await parse(dataArr); console.log(result); })(); function delayFnc (delay, result) { return new Promise(resolve => { setTimeout(() => { resolve(result); }, delay); }); } function request1 () { console.log('request1() start'); return delayFnc(1000, { msg : 'Hello' }); } function request2 () { console.log('request2() start'); return delayFnc(2000, { msg : 'Async' }); } function parse (dataArr) { return Promise.resolve( dataArr .map(data => data.msg) .join(' ') ); } Promise.all([request1(), request2()]) .then(dataArr => parse(dataArr)) .then(result => { console.log(result); });
  38. 38. Async & Await – ES7 Draft 에러 처리 (from MDN) Promise Async function getProcessedData (url) { return downloadData(url) .catch(e => { return downloadFallbackData(url) }) .then(v => { return processDataInWorker(v); }); } async function getProcessedData (url) { let v; try { v = await downloadData(url); } catch (e) { v = await downloadFallbackData(url); } return processDataInWorker(v); }
  39. 39. More things… Array from() of() fill() find() findIndex() entries() keys() values() copyWithin() Map, Set forEach() entries() keys() values() WeakMap, WeakSet clear() Math imul() clz32() fround() log10() log2() log1p() expm1() cosh() sinh() tanh() acosh() asinh() atanh() hypot() trunc() sign() cbrt() Number isNan() isFinite() isInteger() parseInt() parseFloat() EPSILON MAX_SAFE_INTEGER MIN_SAFE_INTEGER isSafeInteger() Object is() setPrototypeOf() assign() getOwnPropertySymbols() String fromCodePoint() codePointAt() startsWith() endsWith() includes() repeat() normalize() raw() Symbol iterator for() match
  40. 40. Coverage ES5 ES6 TypeScript
  41. 41. Q & A
  42. 42. 감사합니다.

×