EcmaScript 2015 Study

EcmaScript2015+, 2기 by GOMUGOM
– 일정 : 2018년 4월 14일 ~ 6월 16일까지 (총 9주)
– 시간 : 매주 토요일 오전 10시 – 오후 1시 (주 1회 / 3시간씩)

WEEK 1 – 14 Apr
1. block scope
2. variables
3. template literal & tagged template

WEEK 2 – 21 Apr
4. default parameter
5. rest parameter
6. spread operator
7. enhanced object functionalities

WEEK 3 – 28 Apr
8. arrow function
9. function – etc.
10. destructuring assignment

WEEK 4 – 12 May
11. Symbol
12. Set, WeakSet
13. Map, WeakMap

WEEK 5 – 19 May
14. iterable, iterator, generator

WEEK 6 – 26 May
15. Class

WEEK 7 – 2 Jun
16. Promise

WEEK 8 – 9 Jun
17. Proxy & Reflection
18. Module

WEEK 9 – 16 Jun
19. other stuff
20. ES 2016+

ECMAScript 6 참고자료

Exploring ES6 번역 프로젝트입니다.
https://github.com/ES678/Exploring-ES6/blob/master/README.md

ReactJS를 작성할 때에 알아두면 좋은 ES6 문법들
https://github.com/react-study/reactStudy/tree/master/02_ES6

Mozilla JavaScript 참고자료
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference

ECMAScript 6 Features
http://es6-features.org

EcmaScript 2015 Study

EcmaScript2015+, 1기 by GOMUGOM
– 일정 : 2018년 1월 13일 ~ 3월 24일까지 (총 9주)
– 시간 : 매주 토요일 오전 10시 – 오후 1시 (주 1회 / 3시간씩)

WEEK 1 – 13 Jan
1. block scope
2. variables
3. template literal & tagged template
4. default parameter

WEEK 2 – 20 Jan
5. rest parameter
6. spread operator
7. arrow function
8. function – etc.
9. destructuring assignment

WEEK 3 – 27 Jan
10. enhanced object functionalities
11. Symbol
12. Set, WeakSet
13. Map, WeakMap

WEEK 4 – 3 Feb
14. iterable, iterator, generator (1)

WEEK 5 – 10 Feb
14. iterable, iterator, generator (2)
15. class (1)

WEEK 6 – 24 Feb
15. class (2)
16. Promise (1)

WEEK 7 – 10 Mar
16. Promise (2)
17. Proxy

WEEK 8 – 17 Mar
17. Proxy & Reflection
1. other stuff (1) module (실습 포함)

WEEK 9 – 24 Mar
1. other stuff (2)
2. es2018

ECMAScript 6

1. var, let, const
let은 변수, const는 상수 선언
참조형의 경우 const 권장
var는 function-scope
let과 const는 block-scope
TDZ (temporal dead zone, 임시사각지대)

2. arrow function

// (param1, param2, paramN) => expression

// ES5
var multiply = function(x, y) { return x * y; };

// ES6
var multiply = (x, y) => { return x * y };

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

3. rest parameter

// ES5
function f(a, b){
var args = Array.prototype.slice.call(arguments, f.length); }

// ES6 
function f(a, b, ...args) { }

4. spread operator

// ES5
function myFunction(x, y, z) { }
var args = [0, 1, 2];
myFunction.apply(null, args);

// ES6
function myFunction(x, y, z) { }
var args = [0, 1, 2];
myFunction(...args);

// ES6
var parts = ['shoulders', 'knees'];
var lyrics = ['head', ...parts, 'and', 'toes'];
// ["head", "shoulders", "knees", "and", "toes"]

5. default function parameter

// ES5
function multiply(a, b) {
 var b = typeof b !== 'undefined' ? b : 1;
 return a*b;
}
multiply(5); // 5

// ES6
function multiply(a, b = 1) {
 return a*b;
}
multiply(5); // 5

6. enhanced object literals

// ES6 : Computed property keys
var i = 0;
var a = {
 ["foo" + ++i]: i,
 ["foo" + ++i]: i,
 ["foo" + ++i]: i
};
console.log(a.foo1); // 1
console.log(a.foo2); // 2
console.log(a.foo3); // 3
// ES6 : Property value shorthand
var a = "foo",
b = 42,
c = {};
var o = { a, b, c };
// ES5
var o = {
property: function ([parameters]) {}
};

// ES6 : Method definition shorthand
var o = {
property([parameters]) {}
};

7. destructuring assignment

// ES6 : Array
var a, b;
[a, b] = [1, 2];
console.log(a); // 1
console.log(b); // 2
// ES6 : Object
var o = {p: 42, q: true};
var {p, q} = o;
console.log(p); // 42
console.log(q); // true

var a, b;
({a, b} = {a:1, b:2});

배열 또는 객체에서 데이터를 별개(distinct) 변수로 추출할 수 있게 하는 JavaScript 식(expression)

8. template literals

// ES5
var a = 5;
var b = 10;
console.log("Fifteen is " + (a + b) + " and\nnot " + (2 * a + b) + ".");
// "Fifteen is 15 and
// not 20."

// ES6
var a = 5; var b = 10; console.log(`Fifteen is ${a + b} and\nnot ${2 * a + b}.`);
// "Fifteen is 15 and
// not 20."

9. class

// ES5
function Cat(name) {
  this.name = name;
}

Cat.prototype.speak = function () {
  console.log(this.name + ' makes a noise.');
};

function Lion(name) {
  // `super()` 호출
  Cat.call(this, name);
}

// `Cat` 클래스 상속
Lion.prototype = Object.create(Cat.prototype);
Lion.prototype.constructor = Lion;

// `speak()` 메서드 오버라이드
Lion.prototype.speak = function () {
  Cat.prototype.speak.call(this);
  console.log(this.name + ' roars.');
};
// ES6
class Cat {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(this.name + ' makes a noise.');
  }
}

class Lion extends Cat {
  speak() {
    super.speak();
    console.log(this.name + ' roars.');
  }
}