Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
ES6ES8, ES 2017, ECMAScript
What is
ECMAScript?
ECMAScript is a standard.
JavaScript is the
implementation of ES standard.
1997 1998 1999 2009 2015 2016 2017
ES1 ES2 ES3 ES8 ESNextES5 ES6 ES7
ES2015 ES2016 ES2017
ES6
Variable Declaration
Object Literals
Arrow Functions
Assignment 

Destructuring
Rest and

Spread Operator
Template

Li...
VARIABLE
DECLARATION
let — var with different scope rules.
{{{{{ var deep = 'This is available from outer scope.';}}}}}
console.log(deep);
!// This is available from outer scope.
ES5
{{{{{ let deep = 'This is available from outer scope.';}}}}}
console.log(deep);
!// ReferenceError: deep is not defined.
E...
for (let i = 0; i < 2; i!++) {
console.log(i);
}
console.log(i);
!// 0, 1
!// ReferenceError: i is not defined
ES6
for (var i = 0; i < 2; i!++) {
console.log(i);
}
console.log(i);
!// 0, 1
!// 2
ES5
const — assignment only at declaration time.
const pi = 3.1415;
pi = 6;!// TypeError: Assignment to constant variable
ES6
OBJECT
LITERALS
Object Literal — key-value, powerful
data structure.
const book = {
title: 'Start With Why',
author: 'Simon Sinek',
publisher: 'Amazon'
};
let listeners = [];
function listen() {}
const podcast = {
listeners: listeners,
listen: listen
};
ES5
let listeners = [];
function listen() {}
const podcast = {
listeners,
listen
};
ES6
let emitter = {
events: {},
on: function(type, fn) {
if (this.events[type] !!=== undefined) {
this.events[type] = [];
}
th...
let emitter = {
events: {},
on(type, fn) {
if (this.events[type] !!=== undefined) {
this.events[type] = [];
}
this.events[...
ARROW
FUNCTIONS
Arrow functions — another way of writing anonymous
functions.
function name(params) {
!// function body
}
ES5
const name = function (params) {
!// function body
}
ES5
const name = (params) => {
!// function body
}
ES6
Arrow functions — bound to their lexical scope, which is
the reason why they don’t alter the meaning of this.
const box = document.querySelector('.box');
box.addEventListener('click', () => {
console.log(this); !// window
});
ES6
const box = document.querySelector('.box');
box.addEventListener('click', function() {
console.log(this); !// <div class="...
const box = document.querySelector('.box');
box.addEventListener('click', function() {
setTimeout(function() {
console.log...
const box = document.querySelector('.box');
box.addEventListener('click', function() {
window.setTimeout(function() {
cons...
const box = document.querySelector('.box');
box.addEventListener('click', function() {
const that = this;
window.setTimeou...
const box = document.querySelector('.box');
box.addEventListener('click', function() {
window.setTimeout(() => {
console.l...
ASSIGNMENT
DESTRUCTURING
Destructuring — Binds properties to as many variables as
you need. It works with objects, arrays, and even in
function par...
const character = {
name: 'Bruce',
pseudonym: 'Batman',
metadata: {
age: 34,
gender: 'male',
},
superpower: ['rich', 'suga...
const character = {
name: 'Bruce',
pseudonym: 'Batman',
metadata: {
age: 34,
gender: 'male'
},
superpower: ['rich', 'sugar...
const character = {
name: 'Bruce',
pseudonym: 'Batman',
metadata: {
age: 34,
gender: 'male'
},
superpower: ['rich', 'sugar...
const character = {
name: 'Bruce',
pseudonym: 'Batman',
metadata: {
age: 34,
gender: 'male',
},
superpower: ['rich', 'suga...
const coordinate = [7.7956, 110.3695];
const [lat, lng] = coordinates;
ES6
const data = 'Lego City,toys,90290,2';
const [itemName, category, sku, qty] = data.split(',');
console.log(itemName, categ...
…
Rest parameter — Better interaction with an arbitrary
amount of function parameters.
ES5
function convertCurrency() {
console.log(arguments); !// [1.1, 1, 10, 20]
const rate = arguments[0];
let amounts = [];...
function convertCurrency() {
console.log(arguments); !// [1.1, 1, 10, 20]
const rate = arguments[0];
let amounts = [];
for...
function convertCurrency(rate, !!...amounts) {
return amounts.map((amount) !=> amount * rate);
}
console.log(convertCurren...
const runner = ['Mario', 'id123', 4.3, 4.1, 3.6, 1.9, 6.0];
const [name, id, !!...runs] = runner;
console.log(name, id, ru...
Spread operator — cast any iterable object into an array.
const foods = ['Gudeg', 'Krecek'];
const souvenirs = ['Wayang', 'Batik'];
let shopping = [];
shopping = shopping.concat(fo...
const foods = ['Gudeg', 'Krecek'];
const souvenirs = ['Wayang', 'Batik'];
let shopping = [!!...foods, 'Bakpia', !!...souve...
TEMPLATE
LITERALS
Template literals — Vast improvement upon regular
JavaScript strings.
const name = 'Lucy';
const age = 6;
const sentence = 'My guitar ' + name + ' is ' +
age * 2 + ' years old.';
console.log(s...
const name = 'Lucy';
const age = 6;
const sentence = `My guitar ${name} is ${age *
2} years old.`;
console.log(sentence);
...
const escaped = 'The first line
A second line
Then a third line.';
ES5
const escaped = `The first line
A second line
Then a third line.`;
ES6
const name = 'Lucy';
const age = 6;
let markup = '<div><h2>Guitar: ' + name + '!</h2>';
markup += '<span class="age">' + a...
const name = 'Lucy';
const age = 6;
let markup = `
<div>
<h2>Guitar: ${name}!</h2>
<span class="age">${age} years old.!</s...
const Button = styled.a`
display: inline-block;
border-radius: 3px;
padding: 0.5rem 0;
margin: 0.5rem 1rem;
width: 11rem;
...
export const pageQuery = graphql`
query {
allMarkdownRemark(sort: { order: DESC, fields: [frontmatter___date] }) {
edges {...
CLASS
Classes — Provide syntax to represent prototypal inheritance
under the traditional class-based programming paradigm.
function Fruit(name, calories) {
this.name = name;
this.calories = calories;
this.pieces = 1;
}
Fruit.prototype.chop = fun...
const person = { satiety: 0 };
const apple = new Fruit('apple', 140);
apple.chop();
apple.chop();
apple.chop();
apple.bite...
class Fruit {
constructor(name, calories) {
this.name = name;
this.calories = calories;
this.pieces = 1;
}
chop() {
this.p...
function Banana() {
Fruit.call(this, 'banana', 105);
}
Banana.prototype = Object.create(Fruit.prototype);
Banana.prototype...
ES6
class Banana extends Fruit {
constructor() {
super('banana', 105);
}
slice() {
this.pieces = 12;
}
}
ASYNC/AWAIT
async/await — Syntactic sugar for promise-based
implementation and take advantage of the synchronous
style of code.
getProfile("rizafahmi")
.then(profile !=> getRepos(profile.login))
.then(repos !=> countTotalStars(repos))
.catch(err !=> ...
const countStars = async () !=> {
const profile = await getProfile("rizafahmi");
const repos = await getRepos(riza_profile...
(async () !=> {
const profile = await getProfile("rizafahmi");
const repos = await getRepos(riza_profile.login);
const sta...
“Talk is cheap show me the code” — Linus Torvalds
github.com/rizafahmi/github-profiler-cli
slideshare.net/rizafahmi
twitter.com/rizafahmi22
facebook.com/rizafahmi
riza@hack...
Prochain SlideShare
Chargement dans…5
×

Essentials and Impactful Features of ES6

493 vues

Publié le

Some of essentials and impactful features of ES6 that we can use today as modern JavaScript development.

Publié dans : Technologie
  • DOWNLOAD FULL. BOOKS INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici

Essentials and Impactful Features of ES6

  1. 1. ES6ES8, ES 2017, ECMAScript
  2. 2. What is ECMAScript?
  3. 3. ECMAScript is a standard.
  4. 4. JavaScript is the implementation of ES standard.
  5. 5. 1997 1998 1999 2009 2015 2016 2017 ES1 ES2 ES3 ES8 ESNextES5 ES6 ES7 ES2015 ES2016 ES2017
  6. 6. ES6 Variable Declaration Object Literals Arrow Functions Assignment 
 Destructuring Rest and
 Spread Operator Template
 Literals async/await Class
  7. 7. VARIABLE DECLARATION
  8. 8. let — var with different scope rules.
  9. 9. {{{{{ var deep = 'This is available from outer scope.';}}}}} console.log(deep); !// This is available from outer scope. ES5
  10. 10. {{{{{ let deep = 'This is available from outer scope.';}}}}} console.log(deep); !// ReferenceError: deep is not defined. ES6
  11. 11. for (let i = 0; i < 2; i!++) { console.log(i); } console.log(i); !// 0, 1 !// ReferenceError: i is not defined ES6
  12. 12. for (var i = 0; i < 2; i!++) { console.log(i); } console.log(i); !// 0, 1 !// 2 ES5
  13. 13. const — assignment only at declaration time.
  14. 14. const pi = 3.1415; pi = 6;!// TypeError: Assignment to constant variable ES6
  15. 15. OBJECT LITERALS
  16. 16. Object Literal — key-value, powerful data structure.
  17. 17. const book = { title: 'Start With Why', author: 'Simon Sinek', publisher: 'Amazon' };
  18. 18. let listeners = []; function listen() {} const podcast = { listeners: listeners, listen: listen }; ES5
  19. 19. let listeners = []; function listen() {} const podcast = { listeners, listen }; ES6
  20. 20. let emitter = { events: {}, on: function(type, fn) { if (this.events[type] !!=== undefined) { this.events[type] = []; } this.events[type].push(fn); }, emit: function(type, event) { if (this.events[type] !!=== undefined) { return; } this.events[type].forEach(function(fn) { fn(event); }); } }; ES5
  21. 21. let emitter = { events: {}, on(type, fn) { if (this.events[type] !!=== undefined) { this.events[type] = []; } this.events[type].push(fn); }, emit(type, event) { if (this.events[type] !!=== undefined) { return; } this.events[type].forEach(function(fn) { fn(event); }); } }; ES6
  22. 22. ARROW FUNCTIONS
  23. 23. Arrow functions — another way of writing anonymous functions.
  24. 24. function name(params) { !// function body } ES5
  25. 25. const name = function (params) { !// function body } ES5
  26. 26. const name = (params) => { !// function body } ES6
  27. 27. Arrow functions — bound to their lexical scope, which is the reason why they don’t alter the meaning of this.
  28. 28. const box = document.querySelector('.box'); box.addEventListener('click', () => { console.log(this); !// window }); ES6
  29. 29. const box = document.querySelector('.box'); box.addEventListener('click', function() { console.log(this); !// <div class="box" …> }); ES5
  30. 30. const box = document.querySelector('.box'); box.addEventListener('click', function() { setTimeout(function() { console.log(this); !// window }, 1000); }); ES5
  31. 31. const box = document.querySelector('.box'); box.addEventListener('click', function() { window.setTimeout(function() { console.log(this); !// window }, 1000); }); ES5
  32. 32. const box = document.querySelector('.box'); box.addEventListener('click', function() { const that = this; window.setTimeout(function() { console.log(that); !// <div class="box" …> }, 1000); }); ES5
  33. 33. const box = document.querySelector('.box'); box.addEventListener('click', function() { window.setTimeout(() => { console.log(this); !// <div class="box" …> }, 1000); }); ES6ES5
  34. 34. ASSIGNMENT DESTRUCTURING
  35. 35. Destructuring — Binds properties to as many variables as you need. It works with objects, arrays, and even in function parameter lists.
  36. 36. const character = { name: 'Bruce', pseudonym: 'Batman', metadata: { age: 34, gender: 'male', }, superpower: ['rich', 'sugardaddy'], }; const pseudonym = character.pseudonym; const name = character.name; const superpower = character.superpower; ES5
  37. 37. const character = { name: 'Bruce', pseudonym: 'Batman', metadata: { age: 34, gender: 'male' }, superpower: ['rich', 'sugardaddy'] }; const { pseudonym, name, superpower } = character; ES6
  38. 38. const character = { name: 'Bruce', pseudonym: 'Batman', metadata: { age: 34, gender: 'male' }, superpower: ['rich', 'sugardaddy'] }; const { pseudonym: alias } = character; ES6
  39. 39. const character = { name: 'Bruce', pseudonym: 'Batman', metadata: { age: 34, gender: 'male', }, superpower: ['rich', 'sugardaddy'], }; const { pseudonym: alias } = character.pseudonym; console.log(alias); !// Batman const { metadata: { gender: charGender } } = character; console.log(charGender); !// male ES6
  40. 40. const coordinate = [7.7956, 110.3695]; const [lat, lng] = coordinates; ES6
  41. 41. const data = 'Lego City,toys,90290,2'; const [itemName, category, sku, qty] = data.split(','); console.log(itemName, category, sku, qty); ES6
  42. 42.
  43. 43. Rest parameter — Better interaction with an arbitrary amount of function parameters.
  44. 44. ES5 function convertCurrency() { console.log(arguments); !// [1.1, 1, 10, 20] const rate = arguments[0]; let amounts = []; for (let i = 1; i < arguments.length; i!++) { amounts.push(arguments[i]); } return amounts.map((amount) !=> amount * rate); } console.log(convertCurrency(1.1, 1, 10, 20)); !// [ 1.1, 11, 22 ]
  45. 45. function convertCurrency() { console.log(arguments); !// [1.1, 1, 10, 20] const rate = arguments[0]; let amounts = []; for (let i = 1; i < arguments.length; i!++) { amounts.push(arguments[i]); } return amounts.map((amount) !=> amount * rate); } console.log(convertCurrency(1.1, 1, 10, 20)); !// [ 1.1, 11, 22 ] ES5
  46. 46. function convertCurrency(rate, !!...amounts) { return amounts.map((amount) !=> amount * rate); } console.log(convertCurrency(1.1, 1, 10, 20)); !// [ 1.1, 11, 22 ] ES6
  47. 47. const runner = ['Mario', 'id123', 4.3, 4.1, 3.6, 1.9, 6.0]; const [name, id, !!...runs] = runner; console.log(name, id, runs); !// Mario id123 [ 4.3, 4.1, 3.6, 1.9, 6 ] ES6
  48. 48. Spread operator — cast any iterable object into an array.
  49. 49. const foods = ['Gudeg', 'Krecek']; const souvenirs = ['Wayang', 'Batik']; let shopping = []; shopping = shopping.concat(foods); shopping.push('Bakpia'); shopping = shopping.concat(souvenirs); console.log(shopping); !// [ 'Gudeg', 'Krecek', 'Bakpia', 'Wayang', 'Batik' ] ES5
  50. 50. const foods = ['Gudeg', 'Krecek']; const souvenirs = ['Wayang', 'Batik']; let shopping = [!!...foods, 'Bakpia', !!...souvenirs]; shopping = ['Bakpia', !!...foods, !!...souvenirs]; shopping = [!!...foods, !!...souvenirs, 'Bakpia']; ES6
  51. 51. TEMPLATE LITERALS
  52. 52. Template literals — Vast improvement upon regular JavaScript strings.
  53. 53. const name = 'Lucy'; const age = 6; const sentence = 'My guitar ' + name + ' is ' + age * 2 + ' years old.'; console.log(sentence); ES5
  54. 54. const name = 'Lucy'; const age = 6; const sentence = `My guitar ${name} is ${age * 2} years old.`; console.log(sentence); ES6
  55. 55. const escaped = 'The first line A second line Then a third line.'; ES5
  56. 56. const escaped = `The first line A second line Then a third line.`; ES6
  57. 57. const name = 'Lucy'; const age = 6; let markup = '<div><h2>Guitar: ' + name + '!</h2>'; markup += '<span class="age">' + age + ' years old.!</span>!</div>'; ES5
  58. 58. const name = 'Lucy'; const age = 6; let markup = ` <div> <h2>Guitar: ${name}!</h2> <span class="age">${age} years old.!</span> !</div>`; ES6
  59. 59. const Button = styled.a` display: inline-block; border-radius: 3px; padding: 0.5rem 0; margin: 0.5rem 1rem; width: 11rem; background: transparent; color: white; border: 2px solid white; ${(props) !=> props.primary !&& css` background: white; color: palevioletred; `}; `; ES6
  60. 60. export const pageQuery = graphql` query { allMarkdownRemark(sort: { order: DESC, fields: [frontmatter___date] }) { edges { node { id excerpt(pruneLength: 250) frontmatter { date(formatString: "MMMM DD, YYYY") path title } } } } } `; ES6
  61. 61. CLASS
  62. 62. Classes — Provide syntax to represent prototypal inheritance under the traditional class-based programming paradigm.
  63. 63. function Fruit(name, calories) { this.name = name; this.calories = calories; this.pieces = 1; } Fruit.prototype.chop = function() { this.pieces!++; } Fruit.prototype.bite = function(person) { if (this.pieces < 1) { return; } const calories = this.calories / this.pieces; person.satiety += calories; this.calories -= calories; this.pieces!--; } ES5
  64. 64. const person = { satiety: 0 }; const apple = new Fruit('apple', 140); apple.chop(); apple.chop(); apple.chop(); apple.bite(person); apple.bite(person); apple.bite(person); console.log(person.satiety); !// 105 console.log(apple.pieces); !// 1 console.log(apple.calories); !// 35 ES5
  65. 65. class Fruit { constructor(name, calories) { this.name = name; this.calories = calories; this.pieces = 1; } chop() { this.pieces!++; } bite(person) { if (this.pieces < 1) { return; } const calories = this.calories / this.pieces; person.satiety += calories; this.calories -= calories; this.pieces!--; } } ES6
  66. 66. function Banana() { Fruit.call(this, 'banana', 105); } Banana.prototype = Object.create(Fruit.prototype); Banana.prototype.slice = function() { this.pieces = 12; }; ES5
  67. 67. ES6 class Banana extends Fruit { constructor() { super('banana', 105); } slice() { this.pieces = 12; } }
  68. 68. ASYNC/AWAIT
  69. 69. async/await — Syntactic sugar for promise-based implementation and take advantage of the synchronous style of code.
  70. 70. getProfile("rizafahmi") .then(profile !=> getRepos(profile.login)) .then(repos !=> countTotalStars(repos)) .catch(err !=> { console.error(err); });
  71. 71. const countStars = async () !=> { const profile = await getProfile("rizafahmi"); const repos = await getRepos(riza_profile.login); const stars = countTotalStars(riza_repos); }; countStars();
  72. 72. (async () !=> { const profile = await getProfile("rizafahmi"); const repos = await getRepos(riza_profile.login); const stars = countTotalStars(riza_repos); })();
  73. 73. “Talk is cheap show me the code” — Linus Torvalds
  74. 74. github.com/rizafahmi/github-profiler-cli slideshare.net/rizafahmi twitter.com/rizafahmi22 facebook.com/rizafahmi riza@hacktiv8.com ceritanyadeveloper.com

×