SenchaCon 2016: Learn the Top 10 Best ES2015 Features - Lee Boonstra

Learn the Top 10 best
ECMAScript 2015 features
Lee Boonstra
@ladysign

“What you know as JavaScript in browsers and Node.js is actually a
superset of ECMAScript.
Browsers and Node.js add more functionality through additional
objects and methods, but the core of the language remains as deﬁned
in ECMAScript."

Terminology
• JavaScript - The language name
• ECMAScript - The name of the standard
• Transpiler - Transforms ES2015 code to the JavaScript that currently
supported in our browsers.
• TypeScript - A programming language, which is a superset of JS that aims
to align with ES2015, by Microsoft. Compiles to plain JavaScript, because of
deﬁnition ﬁles it can contain type information.

About Compatibility
You can ﬁnd an overview of compatibility, in one of these ECMAScript 2015
compatibility tables: http://kangax.github.io/compat-table/es6/
ES2015 Implementations:
• V8 (Chrome, Node.js, Opera)
• JavaScript Core (Webkit, Safari)
• Chakra (MS Edge)
• SpiderMonkey (Firefox)
• Mobile (iOS 9+, Android 4.4+)

Top 10 ES2015 features
10. Block scoped constructs
9. Default parameters
8. Template Literals
7. Arrow functions
6. Destructuring Assignment
5. For of loop
4. New Methods
3. Promises
2. Classes
1. Modules

What’s hoisting?
Variable declarations using var are treated
as if they are at the top of the function (or
global scope, if declared outside of a
function) regardless of where these were
placed.

Hoisting explained
You might have seen something like this before:
foo()executes here:
(function() {
console.log(typeof foo); // prints "function"
foo(); // logs "hello sencha"
function foo() { console.log("hello sencha!");
}
})();

Hoisting explained
But here it won't...
(function() {
console.log(typeof foo); // prints "undefined"
foo(); // Error: foo is not a function
var foo = function() {
console.log("hello sencha!");
}
})();

Hoisting explained
This is how the browser interprets it:
// prints "undefined"
(function() {
var foo;
console.log(typeof foo);
function anon() {
} //some anonymous function
foo(); // Error: foo is not a function
//bind anonymous function to foofoo = anon;
})();
Get the code: http://bit.ly/2aAvlpS

Block level declarations
ECMAScript 2015 deﬁnes block-level declarations.
With those you can declare variables that are inaccessible outside of a given block
scope. Block scopes, also called lexical scopes, are created:
1. Inside of a function
2. Inside of a block (indicated by the { and } characters)

Let Declaration
The let declaration syntax is almost the same as the syntax for var.
(function() {
console.log(typeof foo); // ReferenceError: can't access
foo(); // I won't even get here.
let foo = function() {
}
})();
Get the code: http://bit.ly/2aAvlpS

Can only be declared once in the same scope
Below gives a syntax error because you can’t re- declare an identiﬁer within
the same (block) scope:
var baz = "sencha";
let baz = "extjs";
SyntaxError: redeclaration of non-conﬁgurable global property baz

Creates new identiﬁer in a new block scope
This time it won't throw an error:
var baz = "sencha";
if(true){
let baz = "extjs";
//let baz is extjs, but var baz is still sencha
}
console.log(baz); //logs sencha
extjsNote, it doesn’t log , because let baz is only available
within its own block scope.

Constant declarations
You can also define declarations in ES2015 with the const declaration syntax.
These values cannot be changed once set.
const LIVEURL = "http://www.sencha.com/feed.json";

Example of errors
The ﬁrst example is missing initialization. The second example throws a type
error because you can’t assign a new variable to a constant.
const LIVEURL= "http://www.sencha.com/feed.json";
LIVEURL = "http://www.leeboonstra.com/feed.json";
//TypeError: invalid assignment to const `liveUrl'
const LOCALURL;
//syntax error, missing = in const declaration

This will run perfectly ﬁne
It prevents the modiﬁcation of the binding, not the value itself.
const URLS = {};
URLS.LIVE ="http://www.sencha.com/feed.json";
URLS.LIVE ="http://www.leeboonstra.com/feed.json";
URLS.LOCAL = "http://localhost/feed.json";
console.log(URLS);
//Object { live: "http://www.leeboonstra.com/feed.json",
//local: "http://localhost/feed.json" }

Gotcha
• var declarations are hoisted to the top of the function scope
• Use let for setting declarations in block scopes
• Use const for declarations that can’t change the binding
• Be careful when you are replacing var for let and const.
• let and const can create dead zones
• Variables are meant for changing the values! A constant not.

About Default Parameters
Prior to ECMAScript 2015, code would look like this script. You'll have to pass
in the url parameter, but timeout and callback are optional.
function makeRequest(url, timeout, callback) {
timeout = (typeof timeout !== "undefined") ? timeout : 2000;
callback = callback || function() {};
//do something
}

Default function parameters
With ECMAScript 2015, you can actually provide default function parameters:
function makeRequest (url, timeout = 2000,
callback = function() {}
) {
//do something
}
Get the code:
http://bit.ly/2axL0J5

Gotcha
• Default parameters, can keep your function bodies clean, without re-defining
and assigning values to inner variables.

ES5 JavaScript Strings
• JavaScript always lacked, when we are talking about Strings, especially
when talking about:
- Multiline strings
- HTML escaping
- Basic string formatting

Multiline Strings
Example ES5 way of dealing with multiline Strings:
var product = "Sencha";
var myText = product + " provides the industry's most "
+ "comprehensive collection of high‐performance, " +
"customizable UI widgets.These "widgets" include: " +
"HTML5 grids, trees, lists, forms, menus, toolbars," +
"panels, windows, and much more.";

Multiline Strings
Here's how it looks in ES2015:
let product = "Sencha";
let myText = `${product} provides the industry's most
comprehensive collection of high‐performance, customizable UI
widgets. These "widgets" include HTML5 grids, trees, lists,
forms, menus, toolbars, panels, windows, and much more.`;
Get the code:
http://bit.ly/2azCR78

Tagged Templates
Template functions, a template tag performs a transformation on the template
literal and returns the ﬁnal string value.
function mytag(arrLiterals){
return arrLiterals[0].toUpperCase();
}
let message = mytag`hello world!`; //HELLO WORLD!
Get the code:
http://bit.ly/2aT6eiO

Gotcha
• `Multiline Strings` FTW!
• For easy mixing single and double quotes
• String substitution (placeholders in Strings)
• Tagged templates are like template functions in JS.

Arrow Functions
Arrow functions, are a new syntax for functions, deﬁned with an arrow.
Consider the following ES5 functions:
var calculate = function(x,y){
return x + y;
}
var sayHello = function(name){
return "Hello " + name;
}
calculate(5,10); //returns: 15
sayHello('Lee'); //returns: Hello Lee

Arrow Functions
And compare these to the following new syntax:
let calculate = (x,y) => {
return x + y;
}
let sayHello = (name) => {
return "Hello " + name;
}
calculate(5,10); //returns: 15
sayHello('Lee'); //returns: Hello Lee

Arrow Functions
This would work as well:
let calculate = (x,y) => x + y;
let sayHello = (name) => "Hello " + name;
Get the code:
http://bit.ly/2b7G8Gz

Be aware
Arrow functions could slightly behave different compared to traditional
JavaScript functions:
• No this, super, arguments
• No duplicated named arguments
• Can not be called with new
• No prototype
• You can’t change this
• Lexical this

Lexical
Remember var me = this; or var self = this; ? Often used when working
with callbacks, to refer to the original scope, while the current scope changed,
because of a callback.
this
function VideoGame(){ //ES5
var me = this; me.title = "Uncharted", me.version =
3;
setInterval(function() {
return me.title + " " + me.version++;
console.log("1:", this); //Context is
Window console.log("2:", me);
//Context is VideoGame()
}, 5000);
}

Lexical
• An arrow function does not create it's own this scope, rather it captures the
this value of the enclosing scope.
function VideoGame(){
this.title = “Uncharted”;
this.version = 3;
setInterval(() => {
console.log(this.title + " " + this.version++);
// |this| properly refers to the VideoGame object
}, 5000);
}
Get the code: http://bit.ly/2azNHae
this

Gotcha
• Arrow functions =>, write less code
• Ideal for callback function / inline functions.
• When working in teams, make sure everyone understands.
• Be aware:
• No arguments
• Can not create instance with new
• No prototype
• Lexical this
I’ve created examples for this, which I will leave in the slidedeck.

Consider this Object
var myobject = {
name: "Sencha",
logo: {
small: {
png: 'http://path/to/small.png', jpg:
'http://path/to/small.jpg'
},
large: {
png: 'http://path/to/large.png', jpg:
'http://path/to/large.jpg'
}
}
}

ES5: Working with Objects
In ES5 you would do something like this:
var logo = myobject.logo.small.png;
var small = myobject.logo.small;
var company = myobject.name;
console.log(logo); //Sencha
console.log(small); // { png: "http://path/to/small.png",
//jpg: "http://path/to/small.jpg" }
console.log(company); //http://path/to/small.jpg

ES2015: Object Destructuring
Compare this to the ES2015 way, with object destructuring:
let { name, logo : { small : { jpg } } } = myobject;
console.log(name); //Sencha
console.log(small); // { png: "http://path/to/small.png",
//jpg: "http://path/to/small.jpg" }
console.log(jpg); //http://path/to/small.jpg
Get the code:
http://bit.ly/2aDgsmT

ES2015: Array Destructuring
You can also destruct arrays:
let myarray = ["Ext JS", "GXT", "Sencha Test"];
let [myvar1, myvar2, myvar3] = myarray;
console.log(myvar1, myvar2, myvar3) //Ext JS GXT Sencha Test
Get the code:
http://bit.ly/2aA099W

Gotcha
• Extract data from Arrays and Objects
• Ideal for when working with deeply nested Objects. No longer you need to
create extra variables with dot-notation.

ES5: For loops
ES5 has various ways to loop through
array elements and objects.
• ES5 for loop
• ES5 forEach() loop,
can’t break, continue and return
• ES5 for in, iterates through object properties
var array = ["a", "b", "c"];
Var obj = {
firstname: "Lee", lastname: "Boonstra"
};
//1)
for (var i = 0; i < array.length; i++) {
console.log(array[i]);
}
//2)
array.forEach(function(element) {
console.log(element);
});
//3)
for(prop in obj) {
console.log(prop + " = " + obj[prop]);
}

For of loop
New in ES2015, the for...of statement creates a loop iterating over iterable objects
(including Array, Map, Set, String, arguments object etc…)
var array = ["a","b","c","d"];
for(i of array){
console.log(i);
if(i == "c") return;
}

Gotcha
• ES6 For of loop, most concise, direct syntax yet for looping through array elements
• ..but, the old-fashioned ES5 for loop just performs better
• https://www.incredible-web.com/blog/performance-of-for-loops-with-javascript/

ES5: Check equality
console.log(5 == 5); // true
console.log(5 == "5"); // true
console.log(5 === 5); // true
console.log(5 === "5"); // false
console.log(+0 == ‐0); // true <‐‐‐‐‐‐‐‐‐‐WAIT WHAT?!!
console.log(+0 === ‐0); // true <‐‐‐‐‐‐‐‐‐WAIT WHAT?!!
console.log(NaN == NaN); // false <‐‐‐‐‐‐‐‐WAIT WHAT?!!

ES2015: Object.is()
This method performs strict equality on any value, effectively becoming a
safer version of === when dealing with special JavaScript values:
console.log(Object.is(5, 5)); // true
console.log(Object.is(5, "5")); // false
console.log(Object.is(+0, ‐0)); // false <‐‐‐‐ Oh, OK!
console.log(Object.is(NaN, NaN)); // true <‐‐‐ Oh, OK!
Get the code:
http://bit.ly/2b8o9AB

ES2015: Object.assign()
This method makes it easier to change multiple properties on a single object at
once.
function Observable() { }
Observable.prototype = {
constructor: EventTarget,
on: function() { console.log("An event happened.") }
}
let SomeObject = {}
Object.assign(SomeObject, Observable.prototype);
SomeObject.on("customevent"); //An event happened.
Get the code:
http://bit.ly/2b2KB0E

More New Methods
There are much more new methods available in ES2015.
New methods on the following prototypes:
• Object
• Array
• Number
• Math

Gotcha
• Object.is() – Equality checking, the right way
• Object.asign() – Ideal for coding Mixin patterns
• More new methods on prototypes of:
• Object - http://bit.ly/2cbFU3l
• Array - http://bit.ly/2co0yNn
• Number & Math - http://bit.ly/2cnDRb0

Async JavaScript
Promises are new to ECMAScript 2015, and helps you with dealing with
asynchronous code.
JavaScript code is single threaded:
• Code executes from top to bottom
• Right after each other
• 2 bits of code cannot run at the same time

Event Loop
• The Event Loop is a queue of callback functions. When the JS engine sees
an async method, that method is pushed into the queue.

ES5: Callbacks
//Node.js Example
var done = function(err, jobs){
res.render("myview", {
user : req.user,
jobs: jobs
});
};
getJobs = function(req, done){
// Something asynchronous: MongoDB,
// request jobs from a database
Job.findJobsOfUser(req.user._id, function(err, jobs){
if(err) throw err;
done(null, jobs);
});
}
var jobs = getJobs(req, done);

ES2015: Promises (1)
getJobs(req).then(function(jobs){
if(jobs){
//now if I want to chain this with more calls
//i just run the res.render finally
res.render("profile", {
user: req.user,
jobs: jobs
});
}
}, function(error){
throw error;
});

ES2015: Promises (2)
function getJobs(req){
var promise = new Promise(function (resolve, reject) {
//Something asynchronous: MongoDB,
//request jobs from a database
Job.findJobsOfUser(req.user._id, function (err, jobs) {
if (err) reject(err); //reject the promise
else resolve(jobs); //or resolve the promise
});
});
return promise;
}
The advantage of this piece of code, is that it’s better readable and
maintainable. Get the code: http://bit.ly/2b91GW9

Gotcha
• When you deal with callbacks, (async ), you pass a function in a function and you
deal with success and failure.
• The result of an async task (promise) can be fulfilled or rejected. It makes async JS
better readable.
• Promises are chainable.

Just Syntactical Sugar
The class syntax is not introducing a
new object-oriented inheritance model to JavaScript.
They mainly provide more convenient syntax to create old-
school constructor functions.

ES5: Class-like deﬁnition
var Character = function (name, type, universe) {
this.name = name;
this.type = type;
this.universe = universe;
};
Character.prototype.introduce = function () {
return "I am " + this.name + ". A " + this.type +
" from " + this.universe + ".";
};
var batman = new Character("Batman", "superhero", "DC");
batman.introduce(); //I am Batman. A superhero from DC.

ES2015: Class-like deﬁnition
class Character {
constructor(name, type, universe){
this.name = name; this.type = type;
this.universe = universe;
}
introduce() {
return "I am " + this.name + ". A " + this.type + " from "
+ this.universe + ".";
}
}
typeof Character; //"function"
let batman = new Character("Batman", "superhero", "DC");
batman.introduce(); //I am Batman. A superhero from DC.

Getters & Setters
class SuperHero {
constructor(name, ability){
this._name = name;
this._ability = ability;
}
setName(name){ this._name= name; }
getName(){ return this._name; }
setAbility(ability){ this._ability = ability; }
getAbility(){ return this._ability; }
}
Get the code:
http://bit.ly/2aAdgL4

ES2015: Class inheritance (1)
class Character {
constructor(name, type, universe){
this.name = name; this.type =
type; this.universe = universe;
}
introduce() {
return "I am " + this.name + ". A " + this.type + "
from " + this.universe + ".";
}
};

class Wookiee extends Character {
constructor(name){ super();
this.name = name;
this.type = "Wookiee";
this.universe = "Star Wars";
}
talk(){
var roar = "Uughguughhhghghghhhgh raaaaaahhgh"
if(this.name == "Chewbacca")
roar = roar + " Millennium Falcon";
return roar;
}
};

var chewbacca = new
Wookiee("Chewbacca");
chewbacca.introduce();
//I am Chewbacca. A wookiee from Star Wars.
chewbacca.talk();
//Uughguughhhghghghhhgh raaaaaahhgh Millenium Falcon
var chief = new Wookiee("Chief");
chief.introduce();
//I am Chief. A wookiee from Star Wars.
chief.talk();
//Uughguughhhghghghhhgh raaaaaahhgh

Static Methods
Static methods are methods which can be accessed as
classname.methodName() instead of classInstanceName.methodName().

ES2015: Static Method (1)
class SuperHero {
constructor(name, ability){
this._name = name;
this._ability = ability;
}
setAbility(name){
this._ability = name;
}
getAbility(){ return this._ability;}
..
static getMarvelFact() {
return "Marvel Comics is the common name and" +
" primary imprint of Marvel Worldwide Inc.";
}
}

ES2015: Static Method (2)
//Create an object
var spiderman = new SuperHero();
spiderman.setName("Spiderman");
spiderman.getMarvelFact();
//TypeError: spiderman.getMarvelFact is not a function
//Static Method from ClassName
SuperHero.getMarvelFact(); //Marvel Comics is...
Get the code:
http://bit.ly/2arntnv

Gotcha
• ES2015 classes, syntactical sugar, the type is a function under the hood
• Class syntax
• Inheritance: ES2015 classes can extend classes
• Static Classes

ES2015: Modules
Other languages have packages
Before ES2015, JavaScript shared only one global scope which can cause
collisions and security problems.
ES2015 Goal: solve the scope problem:
No module code executes until requested modules are available
and processed.

Modules are JavaScript ﬁles that are loaded in a different mode, than scripts.
Here are some differences:
1. Module code automatically runs in strict mode, you can’t opt-out.
2. Variables created in the top level of a module aren’t automatically added to the
shared global scope. It only exist in the module.
3. The value of this in the top level of a module is undefined.
4. Modules must export anything that should be available to code outside of the
module.
5. Modules may import bindings from other modules.

Example Module (1)
libs/leftpad.js
function leftPadFunction (str, len, ch)
{ str = String(str);
var i = ‐1;
if (!ch && ch !== 0) ch = ' ';
len = len ‐ str.length;
while (++i < len) {
str = ch + str;
}
return str;
}
//export leftPadFunction;
module.export {
leftpad: leftPadFunction
}

Example Module (2)
app.js
//import * as leftpad from '../leftpad‐module';
import leftpad from '../leftpad‐module';
leftpad("lee", 5, "‐") //"‐‐lee"
leftpad("9", 3, "0") //"009"
Get the code:
http://bit.ly/2aH4QPc

Gotcha
• ES2015 answer to packages
• Fix global scope problem (collisions)
• Modules run in a different mode than script
• this in top level of the module equals undefined
• Modules must export anything that should be available to code outside of
the module.

More ECMAScript 2015
There are more nice ECMAScript 2015 features which didn’t ﬁt in my
presentation top 10:
• Spread Operator
• Maps, Weakmaps, Sets & Weaksets
• Generators
• …
See also: http://bit.ly/2clUmIy

Not all ES2015 features are new to Ext devs
Some of these new ES2015 features already exist for years in Ext JS, and they
are more advanced.
ES2015
Tagged Template Templates
Ext
Ext.XTemplate
Object.is() Ext.Object.equals()
Object.assign() Ext.apply()
Promises Ext.Promise
Classes Ext.Base
Modules Ext.Loader

There’s ES2015 support in Sencha Cmd 6.5
• This will require tooling. Our frameworks have to
deal with legacy browsers.
• Sencha will need a transpiler to compile back to
old fashioned ES5 code.
• Our goal is to let your ES2015 code run together
with the Sencha framework code.
• Cmd is Java based! With Sencha Cmd 6.5, code
gets transpiled! Under the hood, we will use
Google Closure Compiler. (We replaced Rhino)

Be aware of the transpiler!
• If you need to use it, you owe yourself to check the output and end
result
• Transpilers generate code which is supported by the current
browsers. It might not be the code what you would expected.

ES2015 support in the next major Ext JS version
• Next Ext JS version will make changes in the class system
Ext.Base
• Write ES2015 “class” syntax to extend from Sencha classes
• New tooling, Node.js / NPM based with integration of Babel. Will
allow TypeScript support.

• http://speakerdeck.com/savelee
• http://www.leeboonstra.com
• http://es6-features.org/#RawStringAccess
• https://github.com/getify/You-Dont-Know- JS/blob/master/es6 &
beyond/README.md#you- dont-know-js-es6--beyond
• https://leanpub.com/understandinges6
• https://developers.google.com/closure/compiler
• https://github.com/google/closure-compiler/wiki/ECMAScript6
• https://kpdecker.github.io/six-speed/
Resources

SenchaCon 2016: Learn the Top 10 Best ES2015 Features - Lee Boonstra

SenchaCon 2016: Learn the Top 10 Best ES2015 Features - Lee Boonstra

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (20)

Similar a SenchaCon 2016: Learn the Top 10 Best ES2015 Features - Lee Boonstra

Similar a SenchaCon 2016: Learn the Top 10 Best ES2015 Features - Lee Boonstra (20)

Más de Sencha

Más de Sencha (20)

Último

Último (20)

SenchaCon 2016: Learn the Top 10 Best ES2015 Features - Lee Boonstra

Notas del editor