Upgrade to Pro — share decks privately, control downloads, hide ads and more …

ES6: Using the new Javascript Today

ES6: Using the new Javascript Today

Talking about the new version Javascript, called ECMAScript ES6 or just ES6.

Pedro Nauck

November 01, 2014
Tweet

More Decks by Pedro Nauck

Other Decks in Programming

Transcript

  1. 1994 1989 First proposal of World Wide Web by Tim

    Bernes Lee Born Netscape as the first real webbrowser
  2. 1994 1989 First proposal of World Wide Web by Tim

    Bernes Lee Born Netscape as the first real webbrowser
  3. 1995 INTERNACIONAL 1997 Works in the creation of the first

    version of what will be Javascript in the future Javascript is submitted to ECMA International Brendan Eich
  4. Influences SCHEME SELF JAVA Dialecto of Lisp Funcional Programming Dialect

    of Smalltalk Prototype Based Dinamically Type Just-in-time Compilation Syntax and name 1995
  5. 1995 ✓ Imperative and Structured (Have a lot of things

    about C. Except scope) ✓ Weakly typed and Dynamic typed ✓ Object and Event based (Asyncronous) ✓ Functional Language (Callback, closures, function scoping) ✓ Prototype Based with constructors. Non-classical OOP. Characteristics JS
  6. 1995 1997 INTERNACIONAL Javascript is submitted to ECMA International Works

    in the creation of the first version of what will be Javascript in the future Brendan Eich
  7. 1997 ✓ Attempts to standardize (IE Sucks) ✓ Netscape submitted

    JS to ECMA Internacional ✓ ECMAScript was created (ECMA-262 Edition 1) Script
  8. 1998 1999 ES2 ES3 Start to work with RegExp Better

    strings handling Exception suport with Try/Catch block Just some editorial changes to meet ISO requirements.
  9. 1998 1999 ES2 ES3 Start to work with RegExp Better

    strings handling Exception suport with Try/Catch block Just some editorial changes to meet ISO requirements.
  10. 2000 2002 JSON EX4, Classes, Iterators, Generators, Block Scope Suport

    with Flash/ActionsScript Was abandoned in 2004 Simple object-based structure To explore Ajax capabilities ES4
  11. 2000 2002 JSON EX4, Classes, Iterators, Generators, Block Scope Suport

    with Flash/ActionsScript Was abandoned in 2004 Simple object-based structure To explore Ajax capabilities ES4
  12. 2006 2009 A better way to manipulate DOM and Ajax

    methods Ryan Dahl introduces NodeJS at JSConf EU conference Javascript in the server side using V8
  13. 2006 2009 A better way to manipulate DOM and Ajax

    methods Ryan Dahl introduces NodeJS at JSConf EU conference Javascript in the server side using V8
  14. 2011 2013 ES5 Strict mode Native JSON support Function.prototype.bind A

    better Array and Object suport ES6 Fix all these things!
  15. 2011 2013 ES5 Strict mode Native JSON support Function.prototype.bind A

    better Array and Object suport ES6 Fix all these things!
  16. Arrow Functions Template Literals Let/Const and Block Scoping Destructuring Assigment

    Default Parameters Rest Parameters Spread Operator For-of Object Literals Improvement Modules Classes Generators Prototype
  17. Prototype Array // ES5 var arr = new Array(1, 2,

    3, 4); // [1,2,3,4] var arr = new Array(4); // [undefined, undefined, undefined, undefined] var arr = new Array(1, 2, 3, 4); // [1,2,3,4]
  18. Prototype Array // ES5 var arr = new Array(1, 2,

    3, 4); // [1,2,3,4] var arr = new Array(4); // [undefined, undefined, undefined, undefined] var arr = new Array(4); // [undefined, undefined, undefined, undefined]
  19. Prototype Array // ES5 var users = [ { name:

    'Peter' }, { name: 'Joe' }, { name: 'Michael' } ]; var joe; users.forEach(function(user) { if (user.name === 'Joe') joe = user; });
  20. Prototype Array // ES5 var users = [ { name:

    'Peter' }, { name: 'Joe' }, { name: 'Michael' } ]; var joe; users.forEach(function(user) { if (user.name === 'Joe') joe = user; });
  21. Prototype Array // ES5 var users = [ { name:

    'Peter' }, { name: 'Joe' }, { name: 'Michael' } ]; var joe; users.forEach(function(user) { if (user.name === 'Joe') joe = user; });
  22. Prototype Array // ES6 var findByName = function(name) { return

    function(item, index, arr) { if (item.name === name) return item; }; }; var joe = users.find(findByName('Joe'));
  23. Prototype Array // ES6 var findByName = function(name) { return

    function(item, index, arr) { if (item.name === name) return item; }; }; var joe = users.find(findByName('Joe'));
  24. Prototype Array // ES6 var findByName = function(name) { return

    function(item, index, arr) { if (item.name === name) return item; } }; var joe = users.find(findByName('Joe'));
  25. For Of var student = { name: 'John', age: 23,

    city: 'Miami' }; for (var prop in student) { console.log(prop) // name, age, city } for (var prop of student) { console.log(prop) // John, 23, Miami }
  26. For Of var student = { name: 'John', age: 23,

    city: 'Miami' }; for (var prop in student) { console.log(prop) // name, age, city } for (var prop of student) { console.log(prop) // John, 23, Miami }
  27. For Of var student = { name: 'John', age: 23,

    city: 'Miami' }; for (var prop in student) { console.log(prop) // name, age, city } for (var prop of student) { console.log(prop) // John, 23, Miami }
  28. For Of var student = { name: 'John', age: 23,

    city: 'Miami' }; for (var prop in student) { console.log(prop) // name, age, city } for (var prop of student) { console.log(prop) // John, 23, Miami }
  29. For Of // ES6 var names = ['John', 'Peter', 'Michael'];

    for (var name of names) { console.log(name) // John, Peter, Michael }
  30. For Of // ES5 var students = [ { name:

    'John', age: 16 }, { name: 'Peter' age: 23 }, { name: 'Michael', age: 25 } ]; var adults = students.filter(function(student) { return student.age > 18; }); Array Comprehensions
  31. For Of Array Comprehensions // ES6 var students = [

    { name: 'John', age: 16 }, { name: 'Peter' age: 23 }, { name: 'Michael', age: 25 } ]; var adults = [for (s of students) if (s.age > 18)];
  32. For Of Array Comprehensions // ES6 var students = [

    { name: 'John', age: 16 }, { name: 'Peter' age: 23 }, { name: 'Michael', age: 25 } ]; var adults = [for (s of students) if (s.age > 18)];
  33. Let (Block Scoping) // ES5 (function() { })(); var message

    = 'hello world'; console.log(message); // hello world
  34. Let (Block Scoping) // ES5 (function() { })(); var message

    = 'hello world'; console.log(message); // hello world
  35. Let (Block Scoping) // ES5 var handlers = []; for

    (var count = 0; count < 3; count++) { handlers[count] = function () { console.log(count); } } handlers[0](); // "2" handlers[1](); // "2" handlers[2](); // "2"
  36. Let (Block Scoping) // ES5 var handlers = []; for

    (var count = 0; count < 3; count++) { (function (i) { handlers[i] = function () { console.log(i) }; })(count); } handlers[0](); // "0" handlers[1](); // "1" handlers[2](); // "2"
  37. Let (Block Scoping) // ES5 var handlers = []; for

    (var count = 0; count < 3; count++) { (function (i) { handlers[i] = function () { console.log(i) }; })(count); } handlers[0](); // alerts "0" handlers[1](); // alerts "1" handlers[2](); // alerts "2"
  38. Let (Block Scoping) // ES6 let handlers = []; for

    (let count = 0; count < 3; count++) { handlers[count] = function () { console.log(count); } } handlers[0](); // "0" handlers[1](); // "1" handlers[2](); // "2"
  39. Let (Block Scoping) // ES6 let handlers = []; for

    (let count = 0; count < 3; count++) { handlers[count] = function () { console.log(count); } } handlers[0](); // "0" handlers[1](); // "1" handlers[2](); // "2"
  40. Const // ES6 const TIMEOUT = 600; TIMEOUT = 300;

    // Throw: TIMEOUT is read-only;
  41. New token => Bye bye bind() It isn't just a

    Syntatic Sugar Arrow Functions
  42. Arrow Functions // ES5 var blueProducts; categories.forEach(function(category) { blueProducts =

    category.products.filter(function(product) { return product.color === 'blue'; });) });
  43. Arrow Functions // ES5 var blueProducts; categories.forEach(function(category) { blueProducts =

    category.products.filter(function(product) { return product.color === 'blue'; });) }); 22 unnecessary chars
  44. Arrow Functions // ES5 ... getAverages: function(students) { return students.map(function(student)

    { return this.calcAverage(student.grades); } } ... .bind(this));
  45. Template Literal // ES5 var name = 'John'; var age

    = 23; console.log('My name is ' + name + '. I\'m ' + age + '.');
  46. Template Literal // ES6 var name = 'John'; var age

    = 23; console.log(`My name is ${name}. I\'m ${age}`);
  47. Template Literal // ES6 var name = 'John'; var age

    = 23; console.log(`My name is ${name}. I\'m ${age}`);
  48. Template Literal // ES5 var className = 'myClass'; var content

    = 'Hello world'; var div = '<div class="' + className + '">' + '<p>' + content + '</p>' + '</div>';
  49. Template Literal // ES6 let className = 'myClass'; let content

    = 'Hello world'; let div = ` <div class="${className}"> <p>${content}</p> </div>`;
  50. // ES5 var isApproved = function(grades, base) { base =

    base || 7; var average = grades.reduce(function(sum, num) { return sum + num; }) / grades.length; return average >= base; }; Default Parameters
  51. // ES5 var isApproved = function(grades, base) { base =

    base || 7; var average = grades.reduce(function(sum, num) { return sum + num; }) / grades.length; return average >= base; }; Default Parameters
  52. Default Parameters // ES6 let isApproved = (grades, base =

    7) => { let len = grades.length; let avg = grades.reduce((sum, num) => { return (sum + num) / len; }; return avg >= base; };
  53. Default Parameters // ES6 let isApproved = (grades, base =

    7) => { let len = grades.length; let avg = grades.reduce((sum, num) => { return (sum + num) / len; }; return avg >= base; };
  54. Rest Parameters // ES3, ES5 store.add = function(category) { var

    items = [].slice.call(arguments, 1); items.forEach(function (item) { store.aisle[category].push(item); }); };
  55. Rest Parameters // ES3, ES5 store.add = function(category) { var

    items = [].slice.call(arguments, 1); items.forEach(function (item) { store.aisle[category].push(item); }); };
  56. Rest Parameters // ES6 store.add = (category, ...items) => {

    items.forEach(item => { store.aisle[category].push(item) }); };
  57. Rest Parameters // ES6 store.add = (category, ...items) => {

    items.forEach(item => { store.aisle[category].push(item) }); };
  58. Spread Operator // ES5 var calcAverage = function(x, y, z)

    { return (x + y + z) / 3; }; var grades = [70, 80, 85]; calcAverage.apply(null, grades);
  59. Spread Operator // ES5 var calcAverage = function(x, y, z)

    { return (x + y + z) / 3; }; var grades = [70, 80, 85]; calcAverage.apply(null, grades);
  60. Spread Operator // ES5 var calcAverage = function(x, y, z)

    { return (x + y + z) / 3; }; var grades = [70, 80, 85]; calcAverage.apply(null, grades);
  61. Spread Operator // ES6 let calcAverage = (x, y, z)

    => (x + y + z) / 3; let grades = [70, 80, 85]; calcAverage(...grades);
  62. Spread Operator // ES6 let calcAverage = (x, y, z)

    => (x + y + z) / 3; let grades = [70, 80, 85]; calcAverage(...grades);
  63. Spread Operator // ES6 let names = ['Peter', 'John', ‘Michael'];

    let firstArr = []; let secondArr = []; firstArr.push(...names); secondArr.push(names); console.log(firstArr.length); // 3 console.log(secondArr.length); // 1
  64. Spread Operator // ES6 let names = ['Peter', 'John', ‘Michael'];

    let firstArr = []; let secondArr = []; firstArr.push(...names); secondArr.push(names); console.log(firstArr.length); // 3 console.log(secondArr.length); // 1
  65. Spread Operator // ES6 let names = ['Peter', 'John', ‘Michael'];

    let firstArr = []; let secondArr = []; firstArr.push(...names); secondArr.push(names); console.log(firstArr.length); // 3 console.log(secondArr.length); // 1
  66. Spread Operator // ES6 let names = ['Peter', 'John', ‘Michael'];

    let firstArr = []; let secondArr = []; firstArr.push(...names); secondArr.push(names); console.log(firstArr.length); // 3 console.log(secondArr.length); // 1
  67. Spread Operator // ES6 let names = ['Peter', 'John', ‘Michael'];

    let firstArr = []; let secondArr = []; firstArr.push(...names); secondArr.push(names); console.log(firstArr.length); // 3 console.log(secondArr.length); // 1
  68. Destructuring Array // ES5 var name = 'John'; var city

    = 'California'; var age = 23; // ES6 let [name, city, age] = ['John', 'California', 23];
  69. Destructuring Array // ES5 var name = 'John'; var city

    = 'California'; var age = 23; // ES6 let [name, city, age] = ['John', 'California', 23];
  70. Destructuring Array // ES5 var foo = function(a, b) {

    return [ a + 1, b + 2 ]; }; var a = foo()[0]; var b = foo()[1]; // ES6 let foo = (a, b) => [a + 1, b + 2]; let [a, b] = foo();
  71. Destructuring Array // ES3, ES5 var foo = function(a, b)

    { return [ a + 1, b + 2 ]; }; var a = foo()[0]; var b = foo()[1]; // ES6 let foo = (a, b) => [a + 1, b + 2]; let [a, b] = foo();
  72. Destructuring Object // ES5 var location = document.location; var protocol

    = location.protocol; var hostname = location.hostname; var port = location.port; // ES6 let { protocal, hostname, port } = document.location;
  73. Destructuring Object // ES5 var location = document.location; var protocol

    = location.protocol; var hostname = location.hostname; var port = location.port; // ES6 let { protocal, hostname, port } = document.location;
  74. Destructuring Object // ES5 var foo = function() { return

    'foo'; } var bar = function() { return 'bar'; } module.exports = { foo: foo, bar: barr }; // ES6 let foo = () => 'foo'; let foo = () => 'bar'; module.exports = { foo, bar };
  75. Destructuring Object // ES5 var foo = function() { return

    'foo'; } var bar = function() { return 'bar'; } module.exports = { foo: foo, bar: barr }; // ES6 let foo = () => 'foo'; let foo = () => 'bar'; module.exports = { foo, bar };
  76. Destructuring Object // ES5 var foo = function(opts) { var

    bar = opts.bar; var baz = opts.baz; return bar + baz; }; // ES6 let foo = ({bar, baz}) => bar + baz; // ES6 let foo = ({b1: bar, b2: baz}) => b1 + b2;
  77. Destructuring Object // ES5 var foo = function(opts) { var

    bar = opts.bar; var baz = opts.baz; return bar + baz; }; // ES6 let foo = ({bar, baz}) => bar + baz; // ES6 let foo = ({b1: bar, b2: baz}) => b1 + b2;
  78. Destructuring Object // ES5 var foo = function(opts) { var

    bar = opts.bar; var baz = opts.baz; return bar + baz; }; // ES6 let foo = ({bar, baz}) => bar + baz; // ES6 let foo = ({b1: bar, b2: baz}) => b1 + b2;
  79. Generators let idMaker = function* () { let index =

    0; while(true) { yield index++ } }; let gen = idMaker(); console.log(gen.next()) // { value: 1, done: false } console.log(gen.next()) // { value: 2, done: false } console.log(gen.next()) // { value: 3, done: false }
  80. Generators let idMaker = function* () { let index =

    0; while(true) { yield index++ } }; let gen = idMaker(); console.log(gen.next()) // { value: 1, done: false } console.log(gen.next()) // { value: 2, done: false } console.log(gen.next()) // { value: 3, done: false }
  81. Generators let idMaker = function* () { let index =

    0; while(true) { yield index++ } }; let gen = idMaker(); console.log(gen.next()) // { value: 1, done: false } console.log(gen.next()) // { value: 2, done: false } console.log(gen.next()) // { value: 3, done: false }
  82. Generators user.tasks = (function* () { let a = yield

    $.ajax('http://get/user'); let b = yield $.ajax('http://process/user', a); yield $.ajax('http://save/user', b); })();
  83. Generators user.tasks.next() // gets the user .then(user => { //

    we do something with the user and then... return user.tasks.next(user); }) .then(user => { // we do something else after the user // has been processed and then... return user.tasks.next(user); }) .then(user => { // final operations here });
  84. Generators user.tasks.next() // gets the user .then(user => { //

    we do something with the user and then... return user.tasks.next(user); }) .then(user => { // we do something else after the user // has been processed and then... return user.tasks.next(user); }) .then(user => { // final operations here });
  85. Generators user.tasks.next() // gets the user .then(user => { //

    we do something with the user and then... return user.tasks.next(user); }) .then(user => { // we do something else after the user // has been processed and then... return user.tasks.next(user); }) .then(user => { // final operations here });
  86. Generators user.tasks.next() // gets the user .then(user => { //

    we do something with the user and then... return user.tasks.next(user); }) .then(user => { // we do something else after the user // has been processed and then... return user.tasks.next(user); }) .then(user => { // final operations here });
  87. Generators user.tasks.next() // gets the user .then(user => { //

    we do something with the user and then... return user.tasks.next(user); }) .then(user => { // we do something else after the user // has been processed and then... return user.tasks.next(user); }) .then(user => { // final operations here });
  88. Classes class Vehicle { constructor(name, year) { this.name = name;

    this.year = year; } get name() { return `This is a ${this.name}`; } get year() { return `Year of manufacture: ${this.year}`; } set name(name) { this.name = name.toTitleize(); } }
  89. Classes class Vehicle { constructor(name, year) { this.name = name;

    this.year = year; } get name() { return `This is a ${this.name}`; } get year() { return `Year of manufacture: ${this.year}`; } set name(name) { this.name = name.toTitleize(); } }
  90. Classes class Vehicle { constructor(name, year) { this.name = name;

    this.year = year; } get name() { return `This is a ${this.name}`; } get year() { return `Year of manufacture: ${this.year}`; } set name(name) { this.name = name.toTitleize(); } }
  91. Classes var fusca = new Vehicle('Fusca', 1976); fusca.name = 'fuxxca';

    // Fuxxca console.log(fusca.name); // This is a Fuxxca console.log(fusca.year); // Year of manufacture: 1976
  92. Classes class Car extends Vehicle { constructor(name, brand, year) {

    super(name, year) this.brand = brand; } } let fusca = new Car('Fusca', 'volkswagen', 1976);
  93. Classes class Car extends Vehicle { constructor(name, brand, year) {

    super(name, year) this.brand = brand; } } let fusca = new Car('Fusca', 'volkswagen', 1976);
  94. Classes Car = function(Vehicle) { function Car(name, brand, year) {

    Vehicle.call(this, name, year) this.brand = brand; } Car.prototype = Object.create(Vehicle.prototype, { constructor: { value: Car, enumerable: false, writable: true, configurable: true } }); Car.__proto__ = Vehicle; return Car; }(Vehicle);
  95. Classes Car = function(Vehicle) { function Car(name, brand, year) {

    Vehicle.call(this, name, year) this.brand = brand; } Car.prototype = Object.create(Vehicle.prototype, { constructor: { value: Car, enumerable: false, writable: true, configurable: true } }); Car.__proto__ = Vehicle; return Car; }(Vehicle);
  96. Classes Car = function(Vehicle) { function Car(name, brand, year) {

    Vehicle.call(this, name, year) this.brand = brand; } Car.prototype = Object.create(Vehicle.prototype, { constructor: { value: Car, enumerable: false, writable: true, configurable: true } }); Car.__proto__ = Vehicle; return Car; }(Vehicle);
  97. Classes Car = function(Vehicle) { function Car(name, brand, year) {

    Vehicle.call(this, name, year) this.brand = brand; } Car.prototype = Object.create(Vehicle.prototype, { constructor: { value: Car, enumerable: false, writable: true, configurable: true } }); Car.__proto__ = Vehicle; return Car; }(Vehicle);
  98. Modules // foobar.js var foo = 'foo'; var bar =

    'bar'; export { foo, bar }; // app.js import { foo, bar } from 'foobar'; console.log(foo); // foo Named Exports
  99. Modules Default Exports // car.js export default class Car() {

    constructor(name) { this.name = name; } } // main.js import Car from 'car'; let fusca = new Car('Fusca');
  100. Modules All Exports // foobar.js let foo = 'foo'; let

    bar = 'bar'; export { foo, bar }; // main.js module foobar from ‘foobar'; console.log(foobar.foo) // 'foo' console.log(foobar.bar) // 'bar'
  101. How can I use today? ES6 Modern browser supports partially

    NodeJS supports many features (—harmony flag) Transpilers and polyfills June 2015
  102. transpiler 6to5 Have a lot of features implemented CLI-Tool working

    as a Node REPL Have a good integration with Gulp/Grunt github.com/sebmck/6to5
  103. var gulp = require('gulp'); var to5 = require('gulp-6to5'); gulp.task('default', function

    () { return gulp.src('src/app.js') .pipe(to5()) .pipe(gulp.dest('dist')); }); github.com/sindresorhus/gulp-6to5
  104. github.com/sindresorhus/grunt-6to5 require('load-grunt-tasks')(grunt); grunt.initConfig({ '6to5': { options: { sourceMap: true },

    dist: { files: { 'dist/app.js': 'src/app.js' } } } }); grunt.registerTask('default', ['6to5']);