A Brief intro ES6
What is ECMAScript?
The JavaScript standard (ECMA-262)
Common Implementations
JavaScript JScript ActionScript
How did we get to ES6?
1997 ES1
1998 ES2 - Alignment with other standards
1999 ES3 - Regex, String utils, try/catch
ES4 - ABANDONED
2009 ES5 - Strict mode, Object , JSON , and Array utils
2015 ES6
ES6
ES6
Scoping
-
Block scoping
-
Destructuring
-
Default param values
-
Rest parameters
-
Spread
Modularity
-
Modules
-
Standard Modules
-
Multiple Globals
-
Object Literals
-
Classes
-
Symbols
Control
-
Tail calls
-
Iterators
-
For-of loops
-
Generators
-
Array comprehensions
-
Arrow functions
Collections
-
Sets
-
Maps
-
Weak maps
Virtualization
-
Proxies
-
Loaders
Data
-
Binary data
-
Template strings
-
Octal/Binary literals
-
Unicode syntax
Also... Array, Object, Number, Regex, String, Math, Function improvements
ES6
Scoping
-
Block scoping
-
Destructuring
-
Default param values
-
Rest parameters
-
Spread
Modularity
-
Modules
-
Standard Modules
-
Multiple Globals
-
Object Literals
-
Classes
-
Symbols
Control
-
Tail calls
-
Iterators
-
For-of loops
-
Generators
-
Array comprehensions
-
Arrow functions
Collections
-
Sets
-
Maps
-
Weak maps
Virtualization
-
Proxies
-
Loaders
Data
-
Binary data
-
Template strings
-
Octal/Binary literals
-
Unicode syntax
Also... Array, Object, Number, Regex, String, Math, Function improvements
Native Support
Text
ES6 not fully supported in Electron
Scoping
- Block scoping
- Destructuring
- Default parameter values
- Rest parameters
- Spread
Block Scoping: Let
let
A new keyword:
Conceptually similar to but defines a variable only within the current
var
Block Scoping: Let
function log(msg) { console.log("LOG MESSAGE: " + msg); }
function f(x) {
if (x > 0) {
let { log, sin, cos } = Math;
// log is now Math.log
console.log('log(' + x + ')= ' + log(5));
}
// log is now back to our logging function
log("done computing f()");
}
f(3);
log('hello world!');
log(3)= 1.6094379124341003 done computing f() hello world!
ES6
Block Scoping: Let
function log(msg) {
console.log("LOG MESSAGE: " + msg);
}
function f(x) {
if (x > 0) {
let { log, sin, cos } = Math;
// log is now Math.log
console.log('log(' + x + ')= '
+ log(5));
}
// log is now back to our logging function
log("done computing f()");
}
f(3);
log('hello world!');
"use strict";
function log(msg) {
console.log("LOG MESSAGE: " + msg);
}
function f(x) {
if (x > 0) {
var _log = Math.log;
var sin = Math.sin;
var cos = Math.cos;
// log is now Math.log
console.log("log(" + x + ")= "
+ _log(5));
}
// log is now back to
// our logging function
log("done computing f()");
}
f(3);
log("hello world!");
ES6 -> ES5
ES6
ES5
Block Scoping: Const
const
A new keyword:
Conceptually similar to but defines a read-only variable. Writing to this variable throws a transpile error
let
Block Scoping: Const
const y = {};
y['a'] = 5;
console.log(y)
y = {}; //transpile error
const f = function () {console.log('hi');}
f(); //"hi"
f = function () {console.log('abc');} //transpile error
ES6
Block Scoping: Const
ES6 -> ES5
const y = {};
y['a'] = 5;
// transpile error
// y = {};
const f = function () {console.log('hi');}
f(); // "hi"
// transpile error
// f = function () {console.log('abc')l}
ES6
"use strict";
var y = {};
y.a = 5;
// transpile error
// y = {};
var f = function () {
console.log("hi");
};
f(); // "hi"
// transpile error
// f = function () {console.log('abc')l}
ES5
Destructuring
Pattern matching for objects and arrays, in assignment and function parameters
Destructuring: Assignment
// Example 1, returning an object
function stats(arr) {
var sum = arr.reduce(
function(c,x) {
return (c || 0) + x;
}
);
return {
sum: sum,
mean: arr.length === 0
? 0
: (sum / arr.length)
};
}
var {sum, mean} = stats([1, 2, 3]);
console.log('Sum=', sum,
' Mean=', mean);
ES6
"use strict";
// Example 1, returning an object
function stats(arr) {
var sum = arr.reduce(function (c, x) {
return (c || 0) + x;
});
return {
sum: sum,
mean: arr.length === 0
? 0
: sum / arr.length
};
}
var _stats = stats([1, 2, 3]);
var sum = _stats.sum;
var mean = _stats.mean;
console.log("Sum=", sum,
" Mean=", mean);
ES5
Destructuring: Assignment
var [b,c,a] = [1,,2];
console.log("a=", a); //2
console.log("c=", c); //undefined
ES6
"use strict";
var _ref = [1,, 2];
var b = _ref[0];
var c = _ref[1];
var a = _ref[2];
console.log("a=", a); //2
console.log("c=", c); //undefined
ES5
Destructuring: Arguments
function divide({
numerator: n,
denominator: d }) {
return n/d;
}
console.log('divide 6/4',
divide({numerator: 6, denominator: 4})
);
ES6
"use strict";
function divide(_ref) {
var n = _ref.numerator;
var d = _ref.denominator;
return n / d;
}
console.log("divide 6/4",
divide({ numerator: 6, denominator: 4})
);
ES5
Default Parameter Values
Allows specification of a default value for function parameters.
Default Parameter Values
// Simple values
function addThree(a, b=4) {
return a + b + 3;
}
addThree(4);
addThree(4,5);
// Works with arrays and objects too!
function normalizePayload(
payload={users: []}, type) {
console.log(payload);
};
ES6
"use strict";
// Simple values
function addThree(a) {
var b = arguments[1] === undefined
? 4
: arguments[1];
return a + b + 3;
}
addThree(4);
addThree(4, 5);
// Works with arrays and objects too!
function normalizePayload(_x, type) {
var payload = arguments[0] === undefined
? { users: [] }
: arguments[0];
console.log(payload);
};
ES5
Rest Parameters
- Similar to Java "arguments", except altering values has no weird effects
- It's a real array
Rest Parameters
var t = "Hello %s!"
function greet(template, ...args) {
return args.map(function(arg) {
return t.replace('%s', arg);
}).join(', ');
}
console.log(greet(t, 'Mike', 'Dave', 'Steve'));
// Hello Mike!, Hello Dave!, Hello Steve!
ES6
"use strict";
var t = "Hello %s!";
function greet(template) {
for (var _len = arguments.length,
args = Array(_len > 1
? _len - 1
: 0),
_key = 1;
_key < _len;
_key++) {
args[_key - 1] = arguments[_key];
}
return args.map(function (arg) {
return t.replace("%s", arg);
}).join(", ");
}
console.log(greet(t, "Mike", "Dave", "Steve"));
// Hello Mike!, Hello Dave!, Hello Steve!
ES5
Spread
- Expands arrays to act like multiple variables (Flatten)
- A better Function.prototype.apply
- Easy array concatenation
Spread
var b = [2, 3];
var a = [1, ...b, 5];
console.log(a); // [1, 2, 3, 5]
a.push(...b);
console.log(a); // [1, 2, 3, 5, 2, 3]
ES6
"use strict";
var _toArray = function (arr) {
return Array.isArray(arr)
? arr
: Array.from(arr);
};
var b = [2, 3];
var a = [1].concat(_toArray(b), [5]);
console.log(a); // [1, 2, 3, 5]
a.push.apply(a, _toArray(b));
console.log(a); // [1, 2, 3, 5, 2, 3]
ES5
Modularity
- Modules
- Classes
Modules
- Allows for better encapsulation of code on a per-file bases
- Built on patterns from YUI, AMD, CommonJS, etc...
- No code executes until requested modules are available and processed (async friendly)
Modules: Imports
// app.js
import * as math from "lib/math";
alert("2π = " + math.sum(math.pi, math.pi));
ES6
"use strict";
var _interopRequireWildcard =
function (obj) {
return obj && obj.__esModule
? obj
: { "default": obj };
};
// app.js
var math = _interopRequireWildcard(
require("lib/math")
);
alert("2π = " + math.sum(math.pi, math.pi));
ES5
Classes
- Syntactic sugar over prototypical inheritance
- Presents some of the same advantages as classical inheritance, in declarative form
- super calls
- instance methods
- static methods
- constructors
Classes
class Animal extends Object {
constructor (name='Animal') {
this.name = name
}
eat() {
console.log(this.name + " is eating");
}
}
class Canine extends Animal {
static numLegs() {return 4;}
constructor (name='Canine') {
super(name);
}
eat() {
super();
console.log('...and then chasing his tail');
}
}
class Dog extends Canine {
constructor (name='Dog') {
super(name);
}
}
var d = new Dog();
d.eat(); // Dog is eating ...and then chasing his tail
var dd = new Dog('Charlie');
dd.eat(); // Charlie is eating ...and then chasing his tail
console.log(Dog.numLegs()); // 4
ES6
class Dog extends Canine {
constructor (name='Dog') {
super(name);
}
}
var d = new Dog();
d.eat();
// Dog is eating ...and then chasing his tail
var dd = new Dog('Charlie');
dd.eat();
// Charlie is eating ...and then chasing his tail
console.log(Dog.numLegs());
// 4
ES6
Arrow Functions
- Similar to Java 8, C# concepts
- Behaves like a function, except "this" is always same as parent closure
Arrow Functions
var obj = {
items: ['apple', 'pear'],
formatItem: function(item) {
return item.toUpperCase();
},
print: function () {
console.log(
this.items.map(
x => this.formatItem(x)
)
);
}
};
obj.print();
ES6
"use strict";
var obj = {
items: ["apple", "pear"],
formatItem: function (item) {
return item.toUpperCase();
},
print: function () {
var _this = this;
console.log(this.items.map(
function (x) {
return _this.formatItem(x);
}
));
}
};
obj.print();
ES5
Collections
- Map
- Set
Weak Refference support!
- Weak Map
- Weak Set
Thank You!
Text
http://slides.com/richardhsu/intro-to-es6
Intro to ES6
By Richard Hsu
Intro to ES6
- 595