Learning a introduction of EcmaScript 6 or EcmaScript 2015 which is a standard of Javascript Development. ==== This slide was published for CodeMania 100 at Chulalongkorn University in Thailand.

1. ECMAScript 6 (ES6)
@gatukgl
#CodeMania100
#ProteusTechnologies #GirlsWhoDev

2. SUDARAT
CHATTANON
GATUK
Developer
Proteus Technologies
Organiser
Girls Who Dev

3. ECMAScript 6
ES6
ES2015
ECMAScript 2015

4. ES6 Compatibility Table
source: http://kangax.github.io/compat-table/es6/

5. Who will be our hero?
source: http://www.continue-play.com/2015/08/17/baymax-from-big-hero-6-will-be-in-kingdom-hearts-3/

6. ES6 Transpiler
ES6 ES5

7. ES6 Features
• const and let • Destructuring Assignment
• Template Literals • Multi-line Strings
• Arrow Function • Rest Parameters
• Module support • Promise
• Iterators • Class
• etc...
7

8. ES6 Features
• const and let • Destructuring Assignment
• Template Literals • Multi-line Strings
• Arrow Function • Rest Parameters
• Module support • Promise
• Iterators • Class
• etc...

9. Block Scoping

10. Source: https://www.youtube.com/watch?v=sjyJBL5fkp8

11. function doSomething () {
console.log(‘do something’);
for (var i = 0; i < 10; i++) {
console.log(‘internal i’, i);
}
console.log(‘external i’, i);
}
Function Scoping (ES5)

12. function doSomething () {
console.log(‘do something’)
for (let i = 0; i < 10; i++) {
console.log(‘internal i’, i)
}
console.log(‘external i’, i)
}
Block Scoping (ES6)

13. const & let

14. let heart = ‘<3 you’ console.log(‘I', heart) // “I <3 You” heart = ‘<3 Justin Bieber’
console.log(‘I’, heart) // “I <3 Justin Bieber”
let

15. const
const heart = ‘<3 You’ console.log(‘I’, heart) // “I <3 You” heart = ‘<3 Justin Bieber’ //
SyntaxError: “heart” is read-only

16. Source: http://www.cs.uni.edu/~wallingf/blog/archives/monthly/2012-10.html

17. Arrow Function
////////// () => { } //////////

18. Arrow Function
////////// as an expression body //////////

19. var myName = ['g', 'a', 't', 'u', ‘k']; var capitalName = myName .map(function (letter) {
return letter.toUpperCase(); }) console.log(capitalName); // [‘G’, ‘A’, ‘T’, ‘U’, ‘K’]
ES5

20. ES6
const myName = ['g', 'a', 't', 'u', 'k']
const capitalName = myName.map(letter => letter.toUpperCase())
console.log(capitalName) // [‘G’, ‘A’, ‘T’, ‘U’, ‘K’]
var myName = ['g', 'a', 't', 'u', ‘k'];
var capitalName = myName
.map(function (letter) {
return letter.toUpperCase();
})
console.log(capitalName); // [‘G’, ‘A’, ‘T’, ‘U’, ‘K’]
ES5

21. Arrow Function
////////// as a statement body //////////

22. function getEvenNumbers (numbers) {
var evenNumbers = []
numbers.forEach ( function (number) {
if (number % 2 == 0) {
evenNumbers.push(number)
}
})
console.log('even numbers', evenNumbers)
}
getEvenNumbers([1, 3, 4, 8, 17, 24])
ES5

23. ES6
const getEvenNumbers = numbers => { let evenNumbers = []
numbers.forEach(number => { if (number % 2 == 0) {
evenNumbers.push(number) } }) console.log('Even Numbers', evenNumbers) //
[4, 8, 24] } getEvenNumbers([1, 3, 4, 8, 17, 24])

24. Arrow Function
////////// Lexical this //////////

25. function main () { console.log(‘fruit:’, this.fruit) // ‘fruit: whatever’ function
getAFruit () { console.log(‘You’ve got’, this.fruit) } getAFruit() // Cannot read
property 'fruit' of undefined } main.call({ fruit: ‘whatever’ })
ES5

26. function main () { console.log(‘fruit:’, this.fruit) // ‘fruit: whatever’ function
getAFruit () { console.log(‘You’ve got’, this.fruit) } getAFruit.call({ fruit: ‘apple’ })
// You’ve got apple } main.call({ fruit: ‘whatever’ })
ES5

27. ES6
function main () { console.log(‘fruit:’, this.fruit) // ‘fruit: whatever’ const getAFruit
= () => { console.log(‘You’ve got’, this.fruit) } getAFruit() // You’ve got
whatever } main.call({ fruit: ‘whatever’ })

28. ES6
function main () { console.log(‘fruit:’, this.fruit) // fruit: apple const getAFruit = ()
=> { console.log(‘You’ve got’, this.fruit) } getAFruit() // You’ve got apple }
main.call({ fruit: ‘apple’ })

29. Template Literals
////////// Interpolation //////////

30. var pen = ‘a pen’;
var apple = ‘an apple’;
console.log (‘I have ’ + pen + ‘. I have ’ + apple + ‘.’);
// I have a pen. I have an apple.
ES5

31. ES6
let pen = ‘a pen’
let pineapple = ‘pineapple’
console.log(`I have ${pen}. I have ${pineapple}.`)
// I have a pen. I have pineapple.

32. ES6
let pen = ‘a pen’
let pineapple = ‘pineapple’
console.log(`I have ${pen}. I have ${pineapple}.`)
// I have a pen. I have pineapple.
let pen = ‘ pen ’
let apple = ‘ apple ’
let pineapple = ‘ pineapple ’
console.log(
`${pen + pineapple + apple + pen}`
)

33. Template Literals
////////// Multi-line String //////////

34. console.log(
`
The quick down fox jump
over the lazy dog.
`
)
ES6

35. Destructuring
Assignment
////////// Basic variable assignment //////////

36. const minions = [ , , ] const [stuart, kevin, dave] = minions
console.log(stuart) // console.log(kevin) // console.log(dave) //

37. const minions = [ , , ] const [stuart, …others] = minions
console.log(stuart) // console.log(others) // [ , ]

38. const stuart, kevin, dave const [stuart, kevin, dave] = [ , , ]
console.log(stuart) // console.log(kevin) // ,

39. let stuart, kevin, dave [stuart, kevin, dave] = [ , , ] [kevin, stuart,
dave] = [stuart, dave, kevin] console.log(kevin) // console.log(stuart)
// console.log(dave) //

40. const stuart, kevin, dave const getMinions = () => [ , , ] [start,
kevin, dave] = getMinions() console.log(kevin) // console.log(stuart)
// console.log(dave) //

41. Module Support

42. ES6
// libs/pokemon.js
export const items = {
lureModule: ,
pokeball:
}
const pokemonsList = []
export const catchedPokemon = (pokeball, pokemon) => {
if (pokeball) { pokemonsList.push(pokemon) }
}

43. ES6
// libs/pokemon.js
export const items = {
lureModule: ,
pokeball:
}
const pokemonsList = []
export const catchedPokemon = (pokeball, pokemon) => {
if (pokeball) { pokemonsList.push(pokemon) }
}
// pokemonGo.js
import {items, cachedPokemon} from ‘libs/pokemon’
catchedPokemon(items.pokeball, )

44. References
http://es6-features.org/
https://developer.mozilla.org/en-US/docs/Web/JavaScript
https://github.com/lukehoban/es6features
https://webapplog.com/es6/