ECMAScript 2015

© Copyright SELA Software & Education Labs Ltd. | 14-18 Baruch Hirsch St Bnei Brak, 51202 Israel | www.selagroup.com
SELA DEVELOPER PRACTICE
JUNE 19-23, 2016
ECMAScript 2015 (or ES6?)
Sebastian Pederiva
sebastianp@sela.co.il
@spederiva

Agenda
2 minutes of bla bla!
Setting the environment
ES6 Features…the coolest
Tips and Questions

History
May 1995, Created in ten days by Brendan Eich at Netscape
1997, Standardization ECMA-262 Ed. 1: ”ECMAScript” aka ES1
1999, ES3 − modern JS baseline
2009, ES5 − “use strict”, JSON, Object.create, etc.
June 2015, Official ES2015 release

ECMAScript or JavaScript?
ECMAScript is the name of the international
standard that defines the JavaScript language
“ECMAScript is based on several originating
technologies, the most well-known being JavaScript
(Netscape) and JScript (Microsoft)”
ECMAScript 2015
ECMAScript 6th version = ES6

Transpilers
“A source-to-source compiler, transcompiler or transpiler is a
type of compiler that takes the source code of a program written
in one programming language as its input and produces the
equivalent source code in another programming language”

Classes
ES6 Classes are syntactical sugar over existing prototype-based inheritance
Clearer syntax to create objects and deal with inheritance
The constructor method is a special method for creating and initializing an object
Properties can only be created inside a class constructor or method
Cannot be defined more than once
function Person(name, age) {
this.name = name;
}
Person.prototype.whoAreYou = function () {
console.log("I'm " + this.name);
}
class Person {
constructor(name, age) {
this.name = name;
}
whoAreYou() {
console.log("I'm " + this.name);
}
}

Getters and Setters
Classes allow you to define accessor properties on the prototype
The syntax for getters and setters is just like in ES5 object literals
class Person{
constructor(){
}
set firstName(fName){
this.fName = fName;
}
set lastName(lName){
this.lName = lName;
}
get name(){
return this.fName + " " + this.lName;
}
}

Static Members
ES6 classes simplify the creation of static members
Using static annotation before the method or accessor property
name
Can help to create a singleton class
class Foo {
constructor(prop) {
this.prop = prop;
}
static className() {
return 'Foo';
}
}
Foo.className();

Inheritance
The extends keyword is used to create a class as a child of another class
The super keyword is used to call functions on an object's parent.
class Rectangle {
constructor(length, width) {
this.length = length;
this.width = width;
}
getArea() {
return this.length * this.width;
}
}
class Square extends Rectangle {
constructor(length) {
super(length, length); // same as Rectangle.call(this, length, length)
}
}

Modules
Modules are JavaScript files that are loaded by parts
Ability to export and import only bindings you need (rather than
everything in a file)
anonymous functions or classes can be exported only using
default
import http from './src/http';
http.request('views/welcome.html')
class Http {
constructor() {
// do something
}
}
export default new Http();

Multiple Modules
// export data
export var color = "red";
export let name = "Roger";
export const magicNumber = 7;
// export function
export function sum(num1, num2) {
return num1 + num1;
}
// export class
export class Person {
constructor(name, width) {
this.name = name;
}
}
// define a function...
function multiply(num1, num2) {
return num1 * num2;
}
// ...and then export it later
export {multiply as kefel};
import {
color,
name,
magicNumber,
sum,
Rectangle,
multiply
} from './src/sample'
import {color} from './src/sample';
import {name} from './src/sample';
import {magicNumber} from './src/sample';
import {sum} from './src/sample';
import {Rectangle} from './src/sample';
import {kepel as multiply} from './src/sample'
import * as sample from './src/sample';

Modules are different
Automatically runs in strict mode
Variables in the top level of a module aren't added to the shared
global scope
‘this’ in the top level of a module is undefined
Must export anything that should be available to code outside of
the module
Modules may import bindings from other modules
In Node.js, the .mjs file extension signifies that the file should be
loaded as a JavaScript module

Always use the export default at the
end of the module

Hoisting, what?
Using var, the variables are set at the top of the function
Initialization remains in the same place
Functions and “global scope” are the unique scope know
function hoistingme(max) {
for (var i = 0; i <= max; i++) {
console.log(i);
}
alert(i); //--> i==?
}
hoistingme(10);

Block Declarations: Let & Const
Accessible only inside the scope as many C-base languages
function donthoistingme(max) {
for (let i = 0; i <= max; i++) {
console.log(i);
}
alert(i); //--> ReferenceError: i is not defined
}
const loops = 10;
hoistingme(loops);

Objects into Const
Objects declared with const can be modified (partially)
Prevent modification of the bindings, not of the value
const person = {
name: "Sebastian”
}
person = {
name: "Sebastian",
email: "sebastianp@sela.co.il"
} //--> Assignment to constant variable
const person = {
name: "Sebastian"
}
person.name = "Seba";
person.email = "sebastianp@sela.co.il";

Let & Const…more
No redeclaration…cannot be decleared twice
Const must be initialized on declaration
Variables declared with let & const cannot be accessed before
declaration – Temporal Dead Zone
let and const are safe to use in the global scope when you don't
want to create properties on the global object because cannot
be declare more than once

Loops
var funcs = [];
for (var i = 0; i < 10; i++) {
funcs.push(function () {
console.log(i);
});
}
funcs.forEach(function (func) {
func();
});

Loops
var funcs = [];
for (var i = 0; i < 10; i++) {
funcs.push((function (value) {
return function () {
console.log(value);
}
}(i)));
}
func();
});

Loops
var funcs = [];
for (let i = 0; i < 10; i++) {
funcs.push(function () {
console.log(i);
});
}
func();
});

Loop...special behavior
Each iteration, the loop created a new variable (i)
And initialize the value
Inside the loop gets its own copy of I
The behavior of let declarations in loops is a specially-defined behavior in
the specification
Consts cannot be used in for loops
But can be used in for-in and for-of loops
for (let i = 0; i <= max; i++) {
let i = 10;
console.log(i);
}

use const by default and only use let when
you know a variable's value needs to
change

Template Literals
“This scheme extends ECMAScript syntax with syntactic sugar to allow
libraries to provide DSLs that easily produce, query, and manipulate
content from other languages that are immune or resistant to
injection attacks such as XSS, SQL Injection, etc”
New strings delimited by backticks (`)
Comes to solve the following problems:
Multiline strings A formal concept of multiline strings
Basic string formatting The ability to substitute parts of the string for values
contained in variables
HTML escaping The ability to transform a string such that it is safe to insert into
HTML.

More templates
let count = 10;
let price = 0.25;
let message = `
<h1>Items</h1>
<h2>
All ${count} items will cost US$ ${(count * price).toFixed(2)}
</h2>`;
document.querySelector('body').innerHTML = message;

Arrow Functions
More concise syntax for writing function expressions
Arrow functions are anonymous
Binds “this” in a different way…as we expect! No ’this’ binding
setTimeout( (d)=>{
console.log('This is an Arrow Function', d);
}, 1000, "data data” );
setTimeout(d=>console.log('This is an Arrow Function', d), 1000, "data data");
setTimeout(function(d) {
console.log('This is an Arrow Function', d);
}, 1000, "data data");

Arrow Functions…more samples
const squares = arr.map(x => x * x);
var squares = arr.map(function (x) {
return x * x
});
var sum = (num1, num2) => num1 + num2;
var sum = function(num1, num2) {
return num1 + num2;
};
var utils = {
foo: function () {
setTimeout(()=>this.bar(), 500);
},
bar: function () {
console.log("hello");
}
}
utils.foo(); //hello
var utils = {
foo: function() {
setTimeout(function() {
this.bar();
}, 500);
},
bar:function(){
console.log("hello");
}
}
utils.foo(); // this.bar is not a function

Arrow Functions – Not a Traditional Function
No this, super, arguments, and new.target bindings
Cannot be called with new
No prototype
No arguments object
No duplicate named arguments
Can't change this

Use “arrow functions” whenever you
need to preserve the lexical value of
‘this’

Default Parameters - Mimic in ES5
function Person(name, age) {
this.age = age || -1;
console.log("Age: " + this.age);
}
var joey = new Person("Joey", 48);
Age: 48
var ross = new Person("Ross");
Age: -1
var chandler = new Person("Chandler", 0);
Age: -1

Arguments in ES5
In ECMAScript 5 the arguments object reflects changes in the
named parameters of a function…weird!
function calc(firstNum, secondNum) {
console.log(arguments[0] * arguments[1]);
firstNum++
secondNum++;
console.log(arguments[0] * arguments[1]);
}
calc(2, 3);
//<-- 6
//<-- 12

Default Parameter
In ES6, a parameter default value is only triggered by undefined
Always behave in the same manner as ECMAScript 5 strict mode
function calc(firstNum = 0, secondNum = 0) {
console.log(arguments[0] * arguments[1]); //<-- 6
firstNum++;
secondNum++;
console.log(arguments[0] * arguments[1]); //<-- 6
}
calc(2, 3);

Expressions as Default Parameters
Default values not need to be primitives
The expression will be only called when “sleep” function is called
without a second parameter
function calculateSecond(){
return Math.round(Math.random()*1000);
}
function sleep(delay = calculateSecond()) {
console.log(delay);
//do something
}
sleep(); // 437
sleep(); // 755

Default Values and the Temporal Dead Zone
function sum(firstNum = secondNum, secondNum = 0) {
console.log(firstNum + secondNum);
}
sum(); //ReferenceError: secondNum is not defined
function sum(firstNum = 0, secondNum = firstNum) {
console.log(firstNum + secondNum);
}
sum(); //0

Arguments and Default Parameters
The presence of default parameter values triggers the
arguments object to remain detached from the named
parameters
function sum(firstNum = 0, secondNum = 0) {
console.log(arguments[0] * arguments[1]); //<-- NaN
console.log(firstNum++ * secondNum++); //<-- 0
console.log(arguments[0] * arguments[1]); //<-- NaN
}
sum(2);

No more arguments!... Rest of Parameters
Rest Parameters syntax allows us to represent an indefinite
number of arguments as an array
Unlike arguments, Rest Parameters is an Array object
function log(severity, message, ...values){
console[severity].call(console, message, values);
}
log('error', 'some error', "exception", "exceptionDetails");
log('log', 'everything OK', 'SDP2016');

The Spread Operator
The JavaScript engine then splits the array into individual
arguments and passes them in.
Calling to Math.max dynamically
let values = [25, 50, 75, 100];
Math.max(...values); // 100
Math.max(...values, 9999); // 9999
let values = [25, 50, 75, 100];
Math.max.apply(Math, values); // 100

New Methods – Object.assign()
Used to copy the values of all enumerable own properties from one or
more source objects to a target object
Ignores inherited properties
Similar to $.extend() or angular.extend()
//Cloning an object
var obj = {a: 1};
var copy = Object.assign({}, obj);
//Merging objects
var o1 = {a: 1}, o2 = {b: 2}, o3 = {c: 3};
var obj = Object.assign(o1, o2, o3);
console.log(obj); // { a: 1, b: 2, c: 3 }
console.log(o1); // { a: 1, b: 2, c: 3 }, target object itself is changed.

New Methods…more
Object.is() method determines whether two values are the same
value
Object.is(NaN, 0/0)
Object.getOwnPropertySymbols() method returns an array of all
symbol properties found directly upon a given object
Object.setPrototypeOf() method sets the prototype (i.e., the
internal [[Prototype]] property) of a specified object to another
object or null.

Property value shorthands
Abbreviate the definition of a property in an object literal
Can omit the key when the key and variable are the same
function makeRequest(method, uri){
return {
method,
uri
}
}
function makeRequest(method, uri){
return {
method: method,
uri: uri
}
}

Computed Property Names
Allows you to put an expression in brackets [], that will be
computed as the property name
let obj = {
prop: "bla bla",
["new foo"]: "new foo",
["new bar"]: "very new foo",
["dyna" + ”mic"]: "dynamic prop”
}
let obj = {
prop: "bla bla”
}
obj["new foo"] = "foo";
obj["new bar"] = "very new foo";
obj["dyna" + "mic"] = "dynamic prop";

Object destructuring
Process of breaking a data structure down into smaller parts
How to extract the values is specified via patterns
let request = {
uri: "http://service.com",
method: "GET”
};
let {uri, method = "GET"} = request;
let request = {
uri: "http://service.com",
method: "GET”
};
// extract data from the object
let uri = request.uri;
let method = request.method || "GET";
let obj = {x: 4, y: 1};
let {x, y} = obj;
let obj = {x: 4, y: 1};
let x = obj.x;
let y = obj.y;

Nested Object Destructuring
let {loc: {start}} = node;
let {loc:{end:{line, column}}} = node;
let node = {
name: "foo",
loc: {
start: {
line: 1,
column: 1
},
end: {
line: 1,
column: 4
}
}
};
let start = node.loc.start;
let line = node.loc.end.line;
let column = node.loc.end.column;
The destructuring pattern can uses curly braces to indicate that
the pattern should descend into the property named loc on
node and look for the start/end property

Array Destructuring
let colors = ["red", ["green", "lightgreen"], "blue"];
let [ firstColor, [ secondColor ] ] = colors;
let colors = [ "red", "green", "blue" ];
let [ firstColor, ...restColors ] = colors;
console.log(firstColor); // "red”
console.log(restColors.length); // 2
console.log(restColors[0]); // "green”
console.log(restColors[1]); // "blue"
let countries = [ "Israel", "USA", "UK", "Italy" ];
let [ israel, , , italy, spain = "Spain" ] = countries;

Use Case…Swapping Variables
let a = 1;
let b = 3;
[ a, b ] = [ b, a ];
let tmp = a;
a = b;
b = tmp;

Use Case…Function Parameters
function $http(requestConfig) {
var url = requestConfig.url,
method = requestConfig.method || 'GET,
headers = requestConfig.headers,
data = requestConfig.data;
//Rest of the code
}
function $http({url, method= 'GET', headers = {}, data = {}}) {
//Rest of the code
}
$http({
url: 'http://www.api.com',
method: 'POST’
});

Promises
Promises are an alternative to callbacks for delivering the results
of an asynchronous computation
Can chain promises together based on success or failure in ways
that make your code easier to understand and debug.
ajax("http://www.filltext.com/?rows=10&fname={firstName}&lname={lastName}")
.then( (data) => {
console.log(data);
})
.catch( (err) => {
console.error(err);
});

Promises…sample
function ajax(url, method = 'GET') {
return new Promise( (resolve, reject) => {
let client = new XMLHttpRequest();
client.onload = function () {
if (this.status >= 200 && this.status < 300) {
// "resolve" when this.status is equal to 2xx
resolve(this.response);
} else {
// "reject" when this.status is different than 2xx
reject(this.statusText);
}
};
client.onerror = function () {
reject(this.statusText);
};
client.open(method, url);
client.send();
});
}

Then/Catch returns a new promise
var p = ajax("https://www.filltext.com/?rows=10&fname={firstName}")
.then((data) => {
console.log('first then', data.length);
return ([]);
})
.then((data) => {
console.log('second then', data.length);
return ([]);
});
p.then((d, num) => {
console.log(’third then', d.length);
});

Multiple Promises
var p1 = ajax("https://www.filltext.com/?rows=10&fname={firstName");
var p2 = ajax("https://www.filltext.com/?rows=20&fname={firstName}");
var p3 = ajax("https://www.filltext.com/?rows=30&fname={firstName}");
Promise.all([p1, p2, p3])
.then((values) => {
console.log(values.length); //length: 3
})
.catch((err) => {
console.log(err);
});

Don't forget to .catch,
avoid .then(successFn, errorFn)

Symbols
Symbols are a new primitive type in ECMAScript 6
Symbols began as a way to create private object members
The Symbol object is an implicit object wrapper for the symbol
primitive data type
let sym1 = Symbol(),
sym2 = Symbol("foo"),
sym3 = Symbol("foo");
sym2 == sym3; // false
Symbol("foo") === Symbol("foo"); // false

Symbols as properties
The symbol firstName is created and used to assign a new
property on the person object
let name = Symbol("name");
let person = {
[name]: "Albert Einstein”
};
person[name]; //Albert Einstein
Object.keys(person).length; //0
let symbols = Object.getOwnPropertySymbols(person);
symbols[0] //Symbol(first name)

Always providing a description to make
both reading and debugging symbols
easier.

ECMAScript 2015

More Related Content

What's hot (20)

Similar to ECMAScript 2015 (20)

Recently uploaded (20)

ECMAScript 2015

Editor's Notes