New features of Javascript ES6. Block scoped Arrow function Rest, spread operator Proxy Template string Generator Modules Class

1. 6
ECMAScript 2015(ES2015)

2. About me
@huydoan8x (Twitter)
@dvhuy (github)
Huy Doan
❏ Work as developer position over 10 years
❏ Live in Ho Chi Minh City
❏ Work at PycoGroup

3. ● Introduction
● ES6 Features
● Q & A
The agenda

4. Introduction

5. History & Versions

6. Browsers support

7. Transpilers

8. ES6 Features

9. ES6 Features
● Modules
● Class
● Block-level scoping
● Arrow Function
● Default Value, Rest, Spread Operator
● Destructuring
● Template Strings
● Object Literal
● Promise
● Symbol
● Generators as Iterators
● String new features
● Array new features
● Object new features
● Proxy
● ...

10. Modules

11. Modules
● Allow to load code & to provide a level of abstraction.
● Not support fully yet, have to use transpiler like Babel to transpile into
ES5.

12. Export
Two ways to export from a module.
● Multiple named exports
● Single default export
● Export with a more convenient alias

14. Import
Flexible way to import from exported module:
● Import a single export
● Import multiple exports
● Import an export with a more convenient alias
● Dynamic imports

16. Class

17. Class
A class definition can include the following:
● Constructors − Responsible for allocating memory for the objects of the
class.
● Functions − Functions represent actions an object can take. They are also
at times referred to as methods.
● Getter, setter: Run code for reading, writing of a property.

18. Class

19. Inheritance & overriding

20. Inheritance & overriding

21. Getter/Setter
Allow us run code when writing or reading a property.

22. Block Scopes
Lexical scopes

23. Block Scopes
- Block-level scoping or Lexical Scopes
- Created a function
- Inside a block - between {and }characters.

24. let
- Is block scopes - exist on block scopes only.
- Can reassign value

25. const
- Must be initialize immediately with a value
- Can not change the value of variable but Object

26. Arrow Function

27. Arrow Function
More concise than traditional way

28. Arrow Function
The value of this was picked up from it surrounding.

29. Default Value, ...Rest, ...Spread Operator

30. Default Value
Simple to set default value to function

31. ...Rest Operator
Easy way to add remaining arguments to the function.

32. ...Spread Operator

33. ...Spread Operator

34. ...Spread Operator

35. Destructuring

36. Destructuring
Destructuring object into individual variable assignments

37. Destructuring

38. Destructuring

39. Template Strings

40. String Interpolation

41. Object Literal

42. Enhanced Object Literal assignment

43. Generators as Iterators

44. Generators as Iterators
Is special type of function that when invoked automatically generates a special
iterator, called a generator object.
Generator functions are indicated by function* and make use of the yield
operator to indicate the value to return for each successive call to .next() on
the generator.

45. Generators as Iterators
function* awesomeGeneratorFunc() {
console.log('first yield');
yield 'Generators';
console.log('second yield');
yield 'are';
console.log('third yield');
yield 'awesome!';
console.log('all done!');
return 1000;
};
// Create generator object
const generatorObj = awesomeGeneratorFunc();

46. Generators as Iterators
// call .next() to return an object
generatorObj.next();
{ value: "Generators", done: false }
// til the last of iterators
generatorObj.next();
{ value: undefined, done: true }
// jump to the last of iterators
generatorObj.return();
{ value: undefined, done: true }

47. yield*
Basically yield* is iterating over the values of an iterable for us and then
yielding those values individually

48. yield*
function* awesomeYield() {
yield 'Awesome Yield!!!';
yield* ['Im', 'Iron', 'Man'];
yield 'The end';
};
…………………
const yeildAwe = awesomeYield();
// Awesome Yield!!! Im Iron Man The end

49. with spread operator, destructuring
function* awesomeYield() {
yield 'Awesome Yield!!!';
yield* ['Im', 'Iron', 'Man'];
yield 'The end';
};
// Awesome Yield!!! Im Iron Man The end
const yeildAwe = awesomeYield();
// with destructuring
const [first, second, ...rest] = yeildAwe;
// with spread operator
const all = [...yeildAwe];

50. Promise

51. Promise
A way to implement asynchronous programming in Javascript.
const promise = new Promise(function(resolve, reject) {
// do a thing, possibly async, then…
if (/* everything turned out fine */) {
resolve("Stuff worked!");
}
else {
reject(Error("It broke"));
}
});

52. Promise states

54. Static functions
Promise.all():
Promise.race():
Promise.resolve():
Promise.reject():

55. Proxy

56. Without Proxy
let target = {
name: "My name is Proxy",
count: 1
};
target.count = "I can change anything here.";
target.description = "Easy to add more!";
delete target.count; // I can delete also
;

57. Proxy
Proxies are wrappers that can intercept and alter low-level JavaScript engine
operations to allow developers to create built-in objects
let proxy = new Proxy(target, traps);

58. With Proxy
const target = {
name: "My Proxy",
count: 1
};
const set = (trapTarget, key, value, receiver) => {
if (isNaN(value)) {
throw new TypeError("Property must be a
number.");
}
// add the property
return Reflect.set(trapTarget, key, value,
receiver);
};
const get = (trapTarget, key, receiver) => {
/* do something */
};
const traps = {
get,
set
};
let proxy = new Proxy(target, traps);

59. Proxy traps

60. References
➔ Understanding ECMAScript 6 by Nicholas
➔ ES6.IO
➔ Mozilla Developer
➔ Google Developer