javascript es6 presentation
DESCRIPTION
a university presentation about ES6TRANSCRIPT
Folie 1
- Avinash Kundaliya
EcmaScript 6
Technische Universitt Mnchen
Agenda
Terminologies
Language Features
Template string
let
Arrow Function
forof loops
Function Parameters
Promise
Demo
Technische Universitt Mnchen
Compatibility
http://kangax.github.io/compat-table/es6/
Technische Universitt Mnchen
Terminologies
JavaScript // the language
EcmaScript // scripting language standard
ES6 (EcmaScript 6) // 6th version of the scripting language standard
ES.next
ES Harmony
TC39 // Technical committee that maintain and update the standard
Technische Universitt Mnchen
ECMAScript was always an unwanted trade name that sounds like a skin disease.
4
Agenda
Terminologies
Language Features
Template string
let
Arrow Function
forof loops
Function Parameters
Promise
Demo
Technische Universitt Mnchen
Template String
Allows string literals with embedded expressions in them.
Multiline strings
Tags (pass through a function)
Link to Spec : http://tc39wiki.calculist.org/es6/template-strings/
1 var name = "TU Munich",
2 msg = `Hello, ${name}!`;
3
4 console.log(msg); // "Hello, TU Munich!"
Technische Universitt Mnchen
6
Template String (contd..)
1 var event_details = `
2
3 ${currentEvent.DTSTART.getDay()}
4 ${currentEvent.DTSTART.toLocaleString('en-US', { month: "short" })}
5 ${currentEvent.DTSTART.getFullYear()}
6
7
8
9
10
11
Technische Universitt Mnchen
Template String (tags)
Can be used for l10n
Escaping
Possibilities are endless
1 let name = "world";
2 tag`Hello ${name}!`;
3
4 // tag ( ["Hello ", "!"], "world" )
Technische Universitt Mnchen
let
syntactically similar to var
defines a variable in the current block
No hoisting
Basically, a better var
constant, a baby sister for let
1 { let a = block scopes, yay!'; }
2 console.log(a); // ReferenceError: a is not defined
1 const a = 'Constants';
2 a = 'You shall not change'; // SyntaxError: Assignment to constant variable
Link to Spec : http://tc39wiki.calculist.org/es6/block-scoping/
Technische Universitt Mnchen
Arrow Function
Shorter syntactical form of the function keyword.
Lexical this binding.
Lacks a .prototype
No constructor
(() => {} vs. function () {})
Link to Spec : http://tc39wiki.calculist.org/es6/arrow-functions/
Technische Universitt Mnchen
Arrow Function (examples)
Link to Spec : http://tc39wiki.calculist.org/es6/arrow-functions/
1 let artists = [
2 {name:"Michael", songs:55},
3 {name:"Max", songs:44}
4 ];
5 console.log(artists.map(artist => artist.name));
6 // ["Michael", "max"]
7
8 let songs = artists.map(artist => artist.songs);
9 console.log(songs.reduce((s1, s2) => s1 + s2));
10 // 99
Technische Universitt Mnchen
Arrow Function (lexical this binding)
1 var makeRequest = (url) => {
2 this.my_url = url;
3 return new Promise((resolve, reject) => {
4 let httpRequest = new XMLHttpRequest();
5 httpRequest.onreadystatechange = () => {
6 console.log(this.my_url);
7 };
8 httpRequest.open('GET', url, true);
9 httpRequest.send(null);
10 }); // promise object
11 };
Technische Universitt Mnchen
Agenda
Terminologies
Language Features
Template string
let
Arrow Function
forof loops
Function Parameters
Promise
Demo
Technische Universitt Mnchen
forof loops
looping of only iterable objects (Array, Sets, and Maps)
only iterates data, not object properties (like forin)
1 for (let word of [One", Two", Three"])
2 console.log(word);
// One, Two, Three
Link to Spec : http://tc39wiki.calculist.org/es6/for-of/
Technische Universitt Mnchen
forin issue
1 var arr = ['some','text'];
2 Array.prototype.each = function(){};
3 for(var i in arr)
4 console.log(i);
5 // 0, 1, each
6
7 for(var i of arr)
8 console.log(i)
9 // some, text
Technische Universitt Mnchen
Function Parameters
Rest parameters
deal with arbitrary number of parameters
1 function test(param1, ...restParams){
2 console.log(param1);
3 console.log(restParams); // always an Array
4 }
5 test(1,2,4,5);
// 1
// [2, 4, 5]
Technische Universitt Mnchen
Function parameters (contd)
Default parameter values ( forget options = options || {}; )
1 function test(i=3){ return i; }
2 test(); //returns 3
1 function throwMissingError(){
2 throw new Error('missing parameter');
3 }
4 function testThrow(requiredParam = throwMissingError()) {
5 return requiredParam;
6 }
7
8 testThrow();
9 // Error: missing parameter
10 testThrow(123);
11 // 123 (http://www.2ality.com/2014/04/required-parameters-es6.html)
Technische Universitt Mnchen
Callback Hell
1 $.get("www.api.awesome.com/get/rest", function(data){
2 var response = DoStuffWithData(data);
3 $.getJSON("www.api.test.com/get/test", function(data){
4 if(data.isAwesome()){
5 SetAwesomeData(data):
6 }
7 }
8 });
9
10 $.get("www.api.awesome.com/get/rest")
11 .then(doStuffWithData)
12 .then(function(data){
13 if(data.isAwesome()){
14 SetAwesomeData(data);
15 }
16 })
Technische Universitt Mnchen
Promise
Promise for a value to be returned in a future
Can have three mutually exclusive states
fulfilled
rejected
pending
Can be referred as deferred or future
Powerful for asynchronous / concurrent applications
Link to Spec : http://people.mozilla.org/~jorendorff/es6-draft.html#sec-promise-objects
Technische Universitt Mnchen
Promise (examples)
1 var promise = new Promise(function(resolve, reject) {
2 // do a thing, possibly async, then
3 if (/* everything turned out fine */) {
4 resolve("Stuff worked!");
5 }
6 else {
7 reject(Error("It broke"));
8 }
9 });
1 promise.then(function(result) {
2 console.log(result); // "Stuff worked!"
3 }, function(err) {
4 console.log(err); // Error: "It broke"
5 });
Technische Universitt Mnchen
20
How to use it today?
Firefox Nightly Chrome Canary Traceur compiler
http:// github.com/google/traceur-compiler
node 0.11.x (with -harmony flag)
Chrome enable experimental flags
Firefox