The document discusses ECMAScript 6 (ES6), highlighting its key features such as block scoping with 'let' and 'const', arrow functions, and destructuring assignment. It provides examples comparing ES5 and ES6 syntax for various functions and constructs, demonstrating improvements in code readability and functionality. Additionally, the document includes references for further exploration of ES6 features and capabilities.

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/