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.

Essentials and Impactful Features of ES6

460 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

×