The ECMAScript formerly known as 6

The ECMAScript formerly known as 6

2956e2cd2664630aa968b92bbb645f2f?s=128

Kerrick Long

July 31, 2015
Tweet

Transcript

  1. 4.

    JS

  2. 5.

    JS

  3. 7.

    DOM

  4. 11.

    ECMAScript for (var i; i < 10; i++) { break;

    } (function(x) { return x + 1; })(100) var bareObject = Object.create(null) [1, 2, 3, 4].map(double).reduce(add)
  5. 20.
  6. 23.

    // app/utils/func.js
 export var flatten = _.flatten.bind(_);
 export var union

    = _.union.bind(_);
 
 export default {
 flatten: flatten,
 union: union
 }; Modules
  7. 24.

    Modules import Ember from 'ember';
 import { flatten, union }

    from 'app/utils/func';
 
 export default Ember.Route.extend({
 model: function() {
 return flatten(union([1, 2, 3]));
 }
 });
  8. 26.

    Arrow Functions var _this = this;
 return this.store.find('pages').then(function(pages) {
 return

    pages.map(function(pages, i) {
 return _this.modelFor('posts').objectAt(i)
 });
 });
  9. 27.

    Arrow Functions var _this = this;
 return this.store.find('pages').then(pages => {


    return pages.map((pages, i) => {
 return _this.modelFor('posts').objectAt(i)
 });
 });
  10. 28.

    Arrow Functions 
 return this.store.find('pages').then(pages => {
 return pages.map((pages, i)

    => {
 return this.modelFor('posts').objectAt(i)
 });
 });
  11. 31.

    var foo = 'bar';
 var obj = {
 foo: foo,


    model: function(params) {
 return params;
 }
 };
 obj['id_' + Math.random()] = 'secret'; Enhanced Object Literals
  12. 32.

    var foo = 'bar';
 var obj = {
 foo,
 model:

    function(params) {
 return params;
 }
 };
 obj['id_' + Math.random()] = 'secret'; Enhanced Object Literals
  13. 33.

    var foo = 'bar';
 var obj = {
 foo,
 model(params)

    {
 return params;
 }
 };
 obj['id_' + Math.random()] = 'secret'; Enhanced Object Literals
  14. 34.

    var foo = 'bar';
 var obj = {
 foo,
 model(params)

    {
 return params;
 }, ['id_' + Math.random()]: 'secret'
 }; Enhanced Object Literals
  15. 36.

    import Ember from 'ember';
 
 var Route = Ember.Route;
 var

    filename = ‘photo.jpg’.split(‘.')[0]; var ext = ‘photo.jpg’.split('.')[1]; 
 export default Route.extend(); Destructuring
  16. 37.

    import Ember from 'ember';
 
 var { Route: Route }

    = Ember;
 var [filename, ext] = 'photo.jpg'.split('.'); 
 export default Route.extend(); Destructuring
  17. 38.

    import Ember from 'ember';
 
 var { Route } =

    Ember;
 var [filename, ext] = 'photo.jpg'.split('.'); 
 export default Route.extend(); Destructuring
  18. 42.

    const code = '<script src="' + src + '">\n' +


    '</script>\n' +
 '<noscript>\n' +
 '<a href="' + link + '">View</a>\n' +
 '</noscript>'; Template Strings
  19. 45.

    function example(isGood) {
 if (isGood) {
 var x = 4;


    console.log(x); // 4
 }
 console.log(x); // 4
 } const and let
  20. 46.

    function example(isGood) {
 if (isGood) {
 const x = 4;


    console.log(x); // 4
 }
 console.log(x); // undefined
 } const and let
  21. 47.

    function canTransition(isSaving) {
 const canTransition = true;
 if (isSaving) {


    canTransition = false; // Error: already set.
 }
 return canTransition;
 } const and let
  22. 48.

    function canTransition(isSaving) {
 let canTransition = true;
 if (isSaving) {


    canTransition = false;
 }
 return canTransition;
 } const and let
  23. 49.
  24. 55.

    JS