ES6 Overview

An overview of ES6 (EcmaScript2015) the newest version of Javascript. Presentation hold at Bärner JS Talks June 6th 2016
History, new syntax and functions, transpilers, resources

Transcript

2. ES6 ECMAScript2015
3. Stef Käser @steffstefferson BärnerJS Talks | Mon, June 6th 2016
4. a brief history => the past Javascript => December 1995 for Netscape Navigator JScript => August 1996 for Microsoft Internet Explorer ECMAScript 1 => June 1997 ES2 => June 1998 ES3 => December 1999 ES4 => July 2008 abandoned! ES5 => December 2009 (ECMA = European Computer Manufacturers Association)
5. a brief history => last year ES5 => December 2009 ES6 => June 2015 (aka ECMAScript 2015) > big gap!
6. What’s new? Arrow functions Template Strings Default Arguments Destructuring Rest Parameters Let & const for-of loop Module System Promises Map & Set WeakMap & WeakSet Symbols Classes Math methods Number literals Number methods String methods Array methods Proxy Blocks scope Generators Interators Typed arrays
7. Implementation state Most ES6 features are already implemented by the most popular js-engines http://kangax.github.io/compat-table/es6/
8. What’s new? >Arrow functions >Template Strings >Default Arguments >Destructuring >Rest Parameters >Let & const >for-of loop Module System Promises Map & Set WeakMap & WeakSet Symbols Classes Math methods Number literals Number methods String methods Array methods Proxy Blocks scope Generators Interators Typed arrays
9. let, the new variable
10. let => is block scoped function (){ // let versus var var a = 5; let b = 5; if(a == b){ var a = 10; let b = 10; // NEW variable console.log('var a:', a); // var a: 10 console.log('let b:', b); // let b: 10 } console.log('var a:', a); // var a: 10, because var is function scoped console.log('let b:', b); // let b: 5, because let is block scoped (new scope in if statement) }
11. // b is hoisted to the top of the scope but for let a Temporal Dead Zone (TDZ) is defined until declaration of b console.log(b); // ReferenceError b = 5; // ReferenceError console.log(b); // ReferenceError let b = 10; console.log(b); // 10 let => hosting and Temporal Dead Zone (TDZ) // a is hoisted to the top of the scope console.log(a); // undefined a = 5; console.log(a); // 5 var a = 10; console.log(a); // 10 var a; let b; { TDZ
12. Constants // once a const variable is set it cannot be reset const ant = 'try to override me'; ant = 5; // Reference Error console.log(ant); //try to override me
13. Default arguments logMyName('Stef','Käser'); // ES5: check if params are set with or operator function logMyName(firstname, lastname){ firstname = firstname || 'John'; lastname = lastname || 'Doe'; console.log('My name is '+firstname+' '+lastname+'!'); } // ES6: default arguments function logMyName(firstname = 'John',lastname = 'Doe'){ console.log(`My name is ${firstname} ${lastname}!`); }
14. Template literals var person = { firstname: 'Stef', lastname: 'Käser', topic: 'ES6 Overview' }; // ES5: concatenating as usual var greeting = 'Hi! I\'m '+person.firstname+' '+person.lastname+' and I am talking about '+person.topic+'!'; // ES6: using the template syntax with backticks ` var greeting = `Hi! I'm ${person.firstname} ${person.lastname} and I am talking about ${person.topic}!`;
15. Template literals // ES5: concatenating as usual var someHtmlTemplate = '<div>\n'+ '\t<ul>\n'+ '\t\t<li>a list element</li>\n'+ '\t</ul>\n'+ '</div>'; // ES6: with new backticks ` syntax var someHtmlTemplate = `<div> <ul> <li>a list element</li> </ul> </div>`;
16. Arrow functions var arr = [1, 2, 3]; // Calculate the squares the ES5 way var squares = arr.map(function (x) { return x * x }); // ES6: less verbose code for one-liners Var squares = arr.map(x => x * x); function (x) { return x * x } (x) => { return x * x } x => { return x * x } x => x * x
17. Arrow functions var button = document.getElementById('button'); function handleClick() { console.log('button click handler called'); }; // ES5: the “this” to that assign hack var that = this; button.addEventListener('click', function () { that.handleClick(); }); // ES6: “this” can be used as expected button.addEventListener('click', () => { this.handleClick(); });
18. Destructuring
19. Destructuring with arrays // ES5: using a temporary dateArray var dateArray = '2012-01-14'.split('-'); var year = dateArray[0]; var month = dateArray[1]; var day = dateArray[2]; // ES6: destructuring, using a array like syntax on the left hand side of the assignment var [year,month,day] = '2016-04-21'.split('-');
20. Destructuring with objects var person = { firstname: 'Stef', lastname: 'Käser', topic: 'ES6 Overview' }; // ES5: assign each attribute after the other var theName = person.firstname; var theTopic = person.topic; // ES6: destructuring, using a object like syntax on the left hand side of the assignment var { firstname : theName, topic : theTopic} = person;
21. Rest parameter // method should concat all params with the first param as delimiter logWords(' and ','apples','bananas','pears'); // should output: apples and bananas and pears // ES5: working with the arguments parameter function logWords(){ var delimiter = arguments[0]; var words = Array.prototype.slice.call(arguments).splice(1); console.log(words.join(delimiter)); }; // ES6: the rest parameter (...) covers the remaining parameters in an array function logWords(delimiter, ...words){ console.log(words.join(delimiter)); };
22. Spread operation // how can we call the printDate method with our dateString var dateString = '1969-07-20'; function printDate(year, month, day){ console.log(`The date is ${day}.${month}.${year}!`); } var dateArray = dateString.split('-'); // ES5: hardcoding it, or use the apply function printDate(dateArray[0], dateArray[1], dateArray[2]); printDate.apply(null, dateArray); // ES6: the spread operator converts the array to parameters printDate(...dateArray);
23. for of Loops // let’s print all values of the array. var arr = ['a','b','c','d']; // ES5: working with the element’s index for (var i = 0; i<arr.length; i++) { var elem = arr[i]; console.log(elem); } // ES6: working with the element’s value for (var elem of arr) { console.log(elem); }
24. Transpiler But it works on my machine….. Compiling ES6 code back to ES5 code (Converts JS code to JS code :-) Babel https://babeljs.io/ Traceur https://github.com/google/traceur-compiler Typescript Compiler https://www.typescriptlang.org/
25. a brief history => today & the future ES2016 => June 2016 • Array.prototype.includes • Exponentiation operator (**) ESNext => work in progress with yearly release cycle
26. Questions? Isn’t it cooler to learn Angular(2) or React instead of ES6? Should I rewrite my application to ES6?
27. Sources and links ES6 Overview in 350 Bullet Points https://ponyfoo.com/articles/es6 ES6 Learning resources https://github.com/ericdouglas/ES6-Learning ECMAScript on github https://github.com/tc39/ecma262 The TC39 process http://www.2ality.com/2015/11/tc39-process.html
28. Books Exploring ES6 http://exploringjs.com/es6/index.html You-Dont-Know-JS ES6 & beyond https://github.com/getify/You-Dont-Know-JS/tree/master/es6%20%26%20beyond (I recommend the whole YDKJS book series)