Professional Documents
Culture Documents
Javascript Es6 Presentation
Javascript Es6 Presentation
- Avinash Kundaliya
Agenda
Terminologies
Language Features
Template string
let
Arrow Function
forof loops
Function Parameters
Promise
Demo
Compatibility
http://kangax.github.io/compat-table/es6/
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
Agenda
Terminologies
Language Features
Template string
let
Arrow Function
forof loops
Function Parameters
Promise
Demo
Template String
Allows string literals with embedded expressions in them.
Multiline strings
Tags (pass through a function)
1varname="TUMunich",
2msg=`Hello,${name}!`;
3
4console.log(msg);
//"Hello,TUMunich!"
let
1{leta=blockscopes,yay!';}
2console.log(a);//ReferenceError:aisnotdefined
Arrow Function
Shorter syntactical form of the function keyword.
(()=>{}vs.function(){})
Agenda
Terminologies
Language Features
Template string
let
Arrow Function
forof loops
Function Parameters
Promise
Demo
forof loops
looping of only iterable objects (Array, Sets, and Maps)
only iterates data, not object properties (like forin)
1for(letwordof[One",Two",Three"])
2console.log(word);
//One,Two,Three
forin issue
1vararr=['some','text'];
2Array.prototype.each=function(){};
3for(variinarr)
4console.log(i);
5//0,1,each
6
7for(variofarr)
8console.log(i)
9//some,text
Function Parameters
Rest parameters
deal with arbitrary number of parameters
1functiontest(param1,...restParams){
2console.log(param1);
3console.log(restParams);//alwaysanArray
4}
5test(1,2,4,5);
//1
//[2,4,5]
Callback Hell
1$.get("www.api.awesome.com/get/rest",function(data){
2varresponse=DoStuffWithData(data);
3$.getJSON("www.api.test.com/get/test",function(data){
4if(data.isAwesome()){
5SetAwesomeData(data):
6}
7}
8});
9
10$.get("www.api.awesome.com/get/rest")
11.then(doStuffWithData)
12.then(function(data){
13if(data.isAwesome()){
14SetAwesomeData(data);
15}
16})
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
Promise (examples)
1varpromise=newPromise(function(resolve,reject){
2//doathing,possiblyasync,then
3if(/*everythingturnedoutfine*/){
4resolve("Stuffworked!");
5}
6else{
7reject(Error("Itbroke"));
8}
9});
1promise.then(function(result){
2console.log(result);//"Stuffworked!"
3},function(err){
4console.log(err);//Error:"Itbroke"
5});
Chrome Canary
Traceur compiler
http:// github.com/google/traceur-compiler
node 0.11.x (with -harmony flag)
Chrome enable experimental flags
Firefox <scripttype="application/javascript;version=1.7
class
yet to be implemented in major browsers
Maximally-Minimal Class
uses the class keyword
has constructor, getters and setter
can be extend(ed)
super is available in sub classes
module
yet to be implemented in major browsers
Adds a module loading system
Makes the global scope sensible
DEMO
iCAL Reader
https://bitbucket.org/avk/es6-seminar
Questions?