Download as PDF, PPTX
![@boyney123 ES6 : MODULES COMMONJS AMD var $ = require('jquery'); exports.myExample = function () {}; define(['jquery'] , function ($) { return function () {}; }); Common on browserCommon on server The goal for ECMAScript 6 modules was to create a format that both users of CommonJS and of AMD are happy with.](https://image.slidesharecdn.com/es6-introduction-151202131610-lva1-app6891/75/Introduction-into-ES6-JavaScript-16-2048.jpg)
![@boyney123 var obj = { // Shorthand for ‘handler: handler’ handler, // Methods toString() { // Super calls return "d " + super.toString(); }, //get property get property() {}, //set property set property(value) {}, // Computed (dynamic) property names [ 'prop_' + (() => 42)() ]: 42 }; ES6 : OBJECT](https://image.slidesharecdn.com/es6-introduction-151202131610-lva1-app6891/75/Introduction-into-ES6-JavaScript-23-2048.jpg)
![@boyney123 An arrow function expression (also known as fat arrow function) has a shorter syntax compared to function expressions and lexically binds the this value (does not bind its own this, arguments, super, or new.target). Arrow functions are always anonymous. var a = [ "Hydrogen", "Helium", "Lithium", "Beryllium" ]; var a2 = a.map(function(s){ return s.length }); var a3 = a.map( s => s.length ); ES6 : ARROW FUNCTIONS Until arrow functions, every new function defined its own this value](https://image.slidesharecdn.com/es6-introduction-151202131610-lva1-app6891/75/Introduction-into-ES6-JavaScript-26-2048.jpg)
Introduction into ES6 JavaScript.
- 2.
- 3.
- 4. HOW CAN IUSE ES6 @boyney123 https://kangax.github.io/compat-table/es6/ HOW CAN WE USE ES6 TODAY?
- 5.
- 6.
- 7.
- 8.
- 9.
- 10. @boyney123 The let statementdeclares a block scope local variable, optionally initializing it to a value. if (x > y) { let gamma = 12.7 + y; i = gamma * x; } let allows you to declare variables that are limited in scope to the block, statement, or expression on which it is used.This is unlike the var keyword, which defines a variable globally, or locally to an entire function regardless of block scope. ES6 : LET
- 11. @boyney123 ES6 : LET- CODE EXAMPLES
- 12.
- 13. @boyney123 The const declarationcreates a read-only reference to a value. It does not mean the value it holds is immutable, just that the variable identifier cannot be reassigned. const API_URL = “http://www.some-api-url.co.uk”; ES6 : CONST
- 14. @boyney123 ES6 : CONST- CODE EXAMPLES
- 15.
- 16. @boyney123 ES6 : MODULES COMMONJSAMD var $ = require('jquery'); exports.myExample = function () {}; define(['jquery'] , function ($) { return function () {}; }); Common on browserCommon on server The goal for ECMAScript 6 modules was to create a format that both users of CommonJS and of AMD are happy with.
- 17. @boyney123 Named Exports -Several per module ES6 : TYPES OF MODULES Default Exports - One per module
- 18. @boyney123 ES6 : MODULES- CODE EXAMPLES
- 19.
- 20. @boyney123 Syntactical sugar overJavaScript's existing prototype-based inheritance.The class syntax is not introducing a new object-oriented inheritance model to JavaScript. JavaScript classes provide a much simpler and clearer syntax to create objects and deal with inheritance. class Person { constructor(firstname, surname) { this.firstname = firstname; this.surname = surname; } } To declare a class, you use the class keyword with the name of the class ("Person" here). ES6 : CLASSES
- 21. @boyney123 ES6 : CLASSES- CODE EXAMPLES
- 22.
- 23. @boyney123 var obj ={ // Shorthand for ‘handler: handler’ handler, // Methods toString() { // Super calls return "d " + super.toString(); }, //get property get property() {}, //set property set property(value) {}, // Computed (dynamic) property names [ 'prop_' + (() => 42)() ]: 42 }; ES6 : OBJECT
- 24. @boyney123 In JavaScript, parametersof functions default to undefined. However, in some situations it might be useful to set a different default value.This is where default parameters can help. function multiply(a, b) { b = typeof b !== 'undefined' ? b : 1; return a*b; } multiply(5); // 5 ES6 : DEFAULT PARAMETERS function multiply(a, b = 1) { return a*b; } multiply(5); // 5 ES5 example ES6 example
- 25. @boyney123 ES6 : LET ARROWFUNCTIONS
- 26. @boyney123 An arrow functionexpression (also known as fat arrow function) has a shorter syntax compared to function expressions and lexically binds the this value (does not bind its own this, arguments, super, or new.target). Arrow functions are always anonymous. var a = [ "Hydrogen", "Helium", "Lithium", "Beryllium" ]; var a2 = a.map(function(s){ return s.length }); var a3 = a.map( s => s.length ); ES6 : ARROW FUNCTIONS Until arrow functions, every new function defined its own this value
- 27. @boyney123 ES6 : ARROWFUNCTIONS - CODE EXAMPLES
- 28.
- 29. @boyney123 The Promise objectis used for deferred and asynchronous computations.A Promise represents an operation that hasn't completed yet, but is expected in the future. ES6 : PROMISES Promise has three states: pending: initial state, not fulfilled or rejected. fulfilled: meaning that the operation completed successfully. rejected: meaning that the operation failed.
- 30. @boyney123 ES6 : PROMISELIFE CYCLE
- 31. @boyney123 ES6 : PROMISES- CODE EXAMPLES
- 32.
- 33. @boyney123 Template strings arestring literals allowing embedded expressions.You can use multi-line strings and string interpolation features with them. `Hello World!` `Hello brown bag! I cant wait for a few drinks and dance on thursday!` let person = ‘David’; `${person} is drunk. Send him home!` ES6 : TEMPLATE STRINGS var person = ‘David’; person + ‘ is drunk. Send him home!’ ES5 example ES6 example
- 34.
- 36.
- 37. @boyney123 async keyword ensuresthat the function will return a Promise object. Within an async function any time you return a value it will actually return a promise that is resolved. If you want to reject you need to throw an error async function foo() { if( Math.round(Math.random()) ) return 'Success!'; else throw 'Failure!'; } ES7 : ASYNC ES7 example function foo() { if( Math.round(Math.random()) ) return Promise.resolve('Success!'); else return Promise.reject('Failure!'); } ES6 example
- 38.
- 39. @boyney123 await will stopthe function call until the async has resolved or rejected. async function loadStory() { try { let story = await getJSON(‘story.json'); return story; } catch (err) { throw ‘Failure!'; } } ES7 : AWAIT
- 40. @boyney123 let db =new PouchDB(‘mydb'); try { //nice that we don't have to wrap in promise let result = await db.post({}); //This reads pretty nice? let doc = await db.get(result.id); console.log(doc); } catch (err) { console.log(err); } ES7 : ASYNC & AWAIT EXAMPLE 2
- 41.
- 42.
- 43.