Ecmascript 2015

Transcript

1. ECMAScript 2015 Benjamin MICHEL 03/07/2015
2. What is ECMASript ? • a scripting language • standardized by Ecma International • several well-known implementations: ◦ JavaScript ◦ JScript ◦ ActionScript
3. History of ES • First edition 1997 • ES 3 in 1999 • ES 4 never released : too ambitious • ES 5 in 2009 • ES 6/2015 also called Harmony • ES 7/2016
4. ES2015 features
5. Promises var promise = new Promise(function(resolve, reject) { // some code }); promise.then(successCb, errorCb); promise.catch(errorCb); Promise.all([promise1, promise2]);
6. Class class MyClass extends MyParentClass { constructor (param1, param2) { super(param1, param2); // some code } myMethod1(param) { // some code } static myMethod2(param) { // some code } }
7. Generator function* testYield(){ var index = 0; while(index < 3){ yield index++; } } var gen = testYield(); console.log(gen.next().value); // 0 console.log(gen.next().value); // 1 console.log(gen.next().value); // 2 console.log(gen.next().value); // undefined
8. Let - Const function varTest() { var x = 31; if (true) { var x = 71; console.log(x); // 71 } console.log(x); // 71 } function letTest() { let x = 31; if (true) { let x = 71; console.log(x); // 71 } console.log(x); // 31 } const myConstant = 42; myConstant = 12; // Error const myConstant = 3; // Error
9. Arrow ([param] [, param]) => { instructions } param => expression // implicit return var square = (x) => x*x;
10. Arrow - Bind this lexically ES5: var myObject = { var myString = ‘Hello’; var myArray = [‘a’, ‘b’, ‘c’]; var myMethod = function () { var self = this; this.myArray.forEach(function(element){ console.log(self.myString + element); }) } } ES2015: var myObject = { var myString = ‘Hello’; var myArray = [‘a’, ‘b’, ‘c’]; var myMethod = function () { this.myArray.forEach((element) => console.log(this.myString + element); }) } }
11. Destructuring var anArray = [1,2,3]; var [one, two, three] = anArray; var [foo, [[bar], baz]] = [1, [[2], 3]]; var anObject = {prop1: ‘abc’}; var {prop1: myProp1} = anObject;
12. String template console.log(`first line second line`); var a = 2; var b = 3; console.log(`the sum of a and b is ${a+b}`);
13. For .. of var myArray = [‘a’, ‘b’, ’c’]; for( let myElement of myArray) { console.log(myElement); }
14. Modules // lib.js export square = (x) => x*x; // main.js import {square} from lib; console.log(square(4)); NB: a lot of variation of ‘import’ syntax exist to please both AMD and Common.js users
15. Map set let mySet = new Set([1,2,2,2,2,2,2]); mySet.add(3); console.log(mySet.size); // 3 console.log(mySet.has(2); // true mySet.delete(2); console.log(mySet.has(2); // false
16. Current support
17. ES 2015
18. ES 2016
19. Links • http://kangax.github.io/compat-table/es6/ • http://es6katas.org/ • https://babeljs.io/docs/learn-es2015/