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

ECMAScript 6

Luiz Augusto
February 28, 2015

ECMAScript 6

Luiz Augusto

February 28, 2015
Tweet

More Decks by Luiz Augusto

Other Decks in Programming

Transcript

  1. Some history… 1996 August Microsoft RELEASED IE 3.0 with JScript

    1997 June ECMA International PUBLISHED ECMA-262 Netscape & Sun ANNOUNCED JavaScript 1995 December
  2. ES6

  3. Let & Const 1 function myFnc() { 2 if (true)

    { 3 let a = 'hi'; 4 console.log(a + ' gdg'); // hi gdg 5 } 6 7 console.log(a); // a is not defined 8 } 9 10 myFnc();
  4. Let & Const 1 function myFnc() { 2 if (true)

    { 3 var a = 'hi'; 4 console.log(a + ' gdg'); // hi gdg 5 } 6 7 console.log(a); // hi 8 } 9 10 myFnc();
  5. Let & Const 1 const num = 1; 2 num

    = 2; // "num" is read-only
  6. Class 1 class Human { 2 constructor(name) { 3 this.name

    = name; 4 } 5 6 describe() { 7 return 'Human name is ' + this.name; 8 } 9 } 10 11 let h = new Human('Luiz'); 12 console.log(h.describe()); // Human name is Luiz
  7. Class 1 class Developer extends Human { 2 constructor(name, favoriteLanguage)

    { 3 super(name); 4 this.favoriteLanguage = favoriteLanguage; 5 } 6 7 describe() { 8 return `${super.describe()} and its favorite language is ${this.favoriteLanguage}`; 9 } 10 } 11 12 let d = new Developer('Luiz', 'JavaScript'); 13 console.log(d.describe()); // Human name is Luiz and its favorite language is JavaScript
  8. Modules 1 /* lib.js */ 2 export function sayHi() {

    3 return 'Hi!'; 4 } 5 6 export function sayHello() { 7 return 'Hello!'; 8 } 1 /* main.js */ 2 import {sayHi, sayHello} from 'lib'; 3 4 console.log(sayHi()); // Hi! 5 console.log(sayHello()); // Hello!
  9. Modules 1 /* lib.js */ 2 export default function sayHi()

    { 3 return 'Hi'; 4 } 1 import sayHi from 'lib' 2 3 console.log(sayHi()); // Hi
  10. Destructuring 1 let [a, , b] = [1, 2, 3];

    2 console.log(`${a}, ${b}`); // 1, 3 3 4 let { first, last } = { first: 'Jane', last: 'Doe' }; 5 console.log(`${first}, ${last}`); //Jane, Doe
  11. Default params 1 function http({mehtod='GET', url='', data={}, headers={}}) { 2

    3 } 4 5 function http(options) { 6 options = options || {}; 7 var method = options.get || 'GET' 8 //.. 9 }
  12. Default params 1 function format(pattern, ...params) { 2 return params;

    3 } 4 5 console.log(format('foo', 1, 2, 3, 4)); // [1,2,3,4]
  13. For of 1 let array = ['foo', 'bar', 'baz']; 2

    3 for (let element of array) { 4 console.log(element); 5 } 6 /* Output: 7 foo 8 bar 9 baz 10 */
  14. Object literals 1 let first = 'Jane'; 2 let last

    = 'Doe'; 3 4 let obj = { first, last }; 5 // Same as: 6 let obj = { first: first, last: last }; 7 8 let obj = { 9 myMethod(arg0, arg1) { 10 //... 11 } 12 }; 13 14 let propKey = 'foo'; 15 let obj = { 16 [propKey]: true, 17 ['b'+'ar']: 123 18 };
  15. Arrow functions 1 let sum = (x, y) => {

    2 return x+y; 3 } 4 5 var sum = function (x, y) { 6 return x + y; 7 }; 8 9 let plusOne = x => x+1; 10 11 var plusOne = function (x) { 12 return x + 1; 13 };
  16. Arrow functions 1 class Person { 2 constructor(name){ 3 this.name

    = name; 4 } 5 6 timers(){ 7 setTimeout(function(){ 8 console.log(this.name); // undefined 9 }, 100); 10 11 setTimeout(() => { 12 console.log(this.name); // person’s name 13 }, 100); 14 } 15 }
  17. 1 // avoid 2 angular.module('app') 3 .controller('MyController', function($scope, ...) {

    4 // controller definition 5 }); 6 7 // better 8 angular.module('app') 9 .controller('MyController', MyController); 10 11 function MyController($scope, ...) { 12 // controller definition 13 }
  18. 1 class UserService { 2 constructor($http) { 3 this.$http =

    $http; 4 } 5 getFullName() { 6 return this.$http.get('api/user/details'); 7 } 8 } 9 10 class MyController { 11 constructor(userService) { 12 userService.getFullName() 13 .then(result => this.userName = result.fullName); 14 } 15 } 16 17 angular.module('app') 18 .service('userService', UserService) 19 .controller('MyController', MyController); https://github.com/michaelbromley/angular-es6