ES6, or ECMAScript 2015, is a major update to the JavaScript language, introducing new syntax and features such as constants, block scoping, classes, modules, and promises. These enhancements improve code readability, reduce boilerplate, and provide more control over variable scope and asynchronous operations. Modern browsers are beginning to implement these features, and tools like transpilers facilitate the use of ES6 code in environments that support only earlier versions.

1. ES6/ES2015
ECMAScript 6, also known as ECMAScript 2015, is the latest version of
the ECMAScript standard. ES6 is a significant update to the language,
and the first update to the language since ES5 was standardized in
2009. Implementation of these features in major JavaScript engines is
underway now.
“
”Luke Hoban - ES6 Features

2. ES6; // WTF?

3. JavaScript Version History

4. ● ES3 / JavaScript 1.5
○ Poor error reporting
○ Slightly quirky and inconsistent
● ES5 / JavaScript 1.8
○ “use strict” opt-in
● ES6 / JavaScript 2015
○ New syntax
○ New features
Versions, browsers & support

5. ● ES3 / JavaScript 1.5
○ Poor error reporting
○ Slightly quirky and inconsistent
● ES5 / JavaScript 1.8
○ “use strict” opt-in
● ES6 / JavaScript 2015
○ New syntax
○ New features
Versions, browsers & support
All Modern Browsers
Future tech /
partial support

6. New Syntax

7. The New Syntax
● Constants
● Block scoping
● Better parameters
● String templates
● Arrow functions
● New shorthand notation
● Classes
● Modules
● Promises
● + more

8. ¯_(ツ)_/¯

9. ¯_(ツ)_/¯
● Less boilerplate, more actual code
● More fine-grained control, more predictable behaviours
● Standardisation / formal adoption of popular concepts

10. Less Boilerplate, More Code.
● Parameter enhancements replace frequently written custom code
● String templates improve readability
● New shorthand codes
● Standard ‘class’ support to replace common boilerplates
● Standard ‘module’ support to replace anti-patterns & libraries

11. Default Parameters!
function formatText(text, style,
specialchars, options) {
if (style == undefined) {
style = 'uncompressed';
}
if (specialchars == undefined) {
specialchars = '&';
}
var optionsToUse = options || { useTabs:
true, indent: 4 };
// etc
function formatText(text,
style = 'uncompressed',
specialchars = '&',
options = { useTabs: true, indent: 4 }) {
// etc

12. Template Literals! (New Strings!)
var customer = { name: "Foo" };
var card = { amount: 7, product: "Bar",
unitprice: 42 };
var message = "Hello " + customer.name +
",n" + "want to buy " + card.amount + " ""
+ card.product + "" forn" + "a total of " +
(card.amount * card.unitprice) + " bucks?";
var customer = { name: "Foo" }
var card = { amount: 7, product: "Bar",
unitprice: 42 }
var message = `Hello ${customer.name},
want to buy ${card.amount} "${card.product}"
for
a total of ${card.amount * card.unitprice}
bucks?`;

13. Nu Shrthnd!
var obj = { x: x, y: y };
var tmp = getASTNode();
var op = tmp.op;
var lhs = tmp.lhs;
var rhs = tmp.rhs;
var nums = evens.map(function (v, i) {
return v + i;
});
var obj = { x, y };
var { op, lhs, rhs } = getASTNode()
var nums = evens.map((v, i) => v + i)

14. Classes!
var Shape = function (id, x, y) {
this.id = id;
this.move(x, y);
};
Shape.prototype.move = function (x, y) {
this.x = x;
this.y = y;
};
class Shape {
constructor (id, x, y) {
this.id = id
this.move(x, y)
}
move (x, y) {
this.x = x
this.y = y
}
}

15. Classes (with inheritance)!
var Rectangle = function (id, x, y, width,
height) {
Shape.call(this, id, x, y);
this.width = width;
this.height = height;
};
Rectangle.prototype =
Object.create(Shape.prototype);
Rectangle.prototype.constructor = Rectangle;
var Circle = function (id, x, y, radius) {
Shape.call(this, id, x, y);
this.radius = radius;
};
Circle.prototype =
Object.create(Shape.prototype);
Circle.prototype.constructor = Circle;
class Rectangle extends Shape {
constructor (id, x, y, width, height) {
super(id, x, y)
this.width = width
this.height = height
}
}
class Circle extends Shape {
constructor (id, x, y, radius) {
super(id, x, y)
this.radius = radius
}
}

16. Classes (with static methods)!
var Rectangle = function (id, x, y, width,
height) {
…
};
Rectangle.defaultRectangle = function () {
return new Rectangle("default", 0, 0,
100, 100);
};
var Circle = function (id, x, y, width,
height) {
…
};
Circle.defaultCircle = function () {
return new Circle("default", 0, 0, 100);
};
var defRectangle =
Rectangle.defaultRectangle();
var defCircle = Circle.defaultCircle();
class Rectangle extends Shape {
…
static defaultRectangle () {
return new Rectangle("default", 0, 0,
100, 100)
}
}
class Circle extends Shape {
…
static defaultCircle () {
return new Circle("default", 0, 0,
100)
}
}
var defRectangle =
Rectangle.defaultRectangle()
var defCircle = Circle.defaultCircle()

17. Modules!
// lib/math.js
LibMath = {};
LibMath.sum = function (x, y) { return x + y
};
LibMath.pi = 3.141593;
// someApp.js
var math = LibMath;
console.log("2π = " + math.sum(math.pi,
math.pi));
// otherApp.js
var sum = LibMath.sum, pi = LibMath.pi;
console.log("2π = " + sum(pi, pi));
// lib/math.js
export function sum (x, y) { return x + y }
export var pi = 3.141593
// someApp.js
import * as math from "lib/math"
console.log("2π = " + math.sum(math.pi,
math.pi))
// otherApp.js
import { sum, pi } from "lib/math"
console.log("2π = " + sum(pi, pi))

18. Modules (without RequireJS)!
// math.js
define([],function(){
return {
cube: function cube ( x ) {
return x * x * x;
}
}
})
// main.js
require(["math"], function(math) {
console.log( math.cube( 5 ) ); // 125
})
// math.js
export function cube ( x ) {
return x * x * x;
}
// main.js
import { cube } from './maths.js';
console.log( cube( 5 ) ); // 125

19. More Control, More Predictable
● Block scoping reduces variable leaks, ‘side effects’ and memory usage
● const, let and var improve readability and reduce cognitive load
● Arrow functions control this, replacing common anti-patterns
● Promises make asynchronous operations easier to write without callback
hell and/or the need for an external library

20. Block scoping
const myConst = 42;
var myVar = 42;
{
let myLet = 42;
console.log(myVar, myLet); // 42, 42
}
console.log(myVar, myLet); // 42, undefined
myConst = 43; // Error!
function(){
let myLet = 2;
}
console.log(myLet); // undefined
console.log(myVar); // 42

21. Arrow Functions
console.log(this);
// window.document
function tryThis() {
console.log(this);
}
tryThis();
// window.document
$('.button').on('click', tryThis);
// MouseClick.Event
$.ajax()...success(tryThis);
// XMLHTTPRequest
element.apply(tryThis);
// element
console.log(this);
// window.document
var tryThis = () => {
console.log(this);
}
tryThis();
// window.document
$('.button').on('click', tryThis);
// window.document
$.ajax()...success(tryThis);
// window.document
element.apply(tryThis);
// window.document

22. Arrow Functions
// pass stuff without creating a new scope!
(inputValue, options) => functionToExecute(inputValue, 'customValue', options);
// rather than the old way:
function(inputValue, options) {
functionToExecute(inputValue, 'customValue', options);
}
// no more
var thiz = this;
$('.button').on('click', function() {
thiz.doStuff();
});
// this instead
$('.button').on('click', () => {
this.doStuff();
});

23. Promises, Promises
function msgAfterTimeout (msg, who, timeout, onDone) {
setTimeout(function () {
onDone(msg + " Hello " + who + "!");
}, timeout);
}
msgAfterTimeout("", "Foo", 100, function (msg) {
msgAfterTimeout(msg, "Bar", 200, function (msg) {
console.log("done after 300ms:" + msg);
});
});
function msgAfterTimeout (msg, who, timeout) {
return new Promise((resolve, reject) => {
setTimeout(() => resolve(`${msg} Hello ${who}!`), timeout)
})
}
msgAfterTimeout("", "Foo", 100).then((msg) =>
msgAfterTimeout(msg, "Bar", 200)
).then((msg) => {
console.log(`done after 300ms:${msg}`)
})

24. By Popular Demand
● Block scoping removes the necessity of closures
● Constants remove the need for libraries like immutable.js
● Class support standardises the ‘prototype’ and ‘object’ patterns
● Modules support standardises CommonJS / AMD patterns
● Promises standardise async behaviour and remove the need for custom
polyfill libraries

25. Block scoping!
(function(){
// no variables inside a closure
// leak into the global scope
})();
{
let variables
// squiggly brackets control scope
// let only exists within
// var leaks outside
}

26. Recap: The exciting bits.
● Block scoping reduces variable leaks, ‘side effects’ and memory usage
● const, let and var improve readability and reduce cognitive load
● Parameter enhancements replace frequently written custom code
● String templates improve readability
● Arrow functions control this, replacing common anti-patterns
● New shorthand code reduces repetition repetition
● Proper class support replaces common boilerplates and antipatterns
● Modules enable better code organisation without file concatenation steps
or external module-loader libraries
● Promises make asynchronous operations easier without the need for an
external library

27. Can I use it tho?

28. Oh Yes*

29. New Tools

31. Enter the Transpiler
1. Write source code in ES6
2. Compile source code to ES5
3. ???
4. Profit

32. Transpiling ES6
require("load-grunt-tasks")(grunt); // npm install --save-dev load-grunt-tasks
grunt.initConfig({
"babel": {
options: {
sourceMap: true
},
dist: {
files: {
"dist/app.js": "src/app.js"
}
}
}
});
grunt.registerTask("default", ["babel"]);

33. Transpiling ES6 (with Rollup)
grunt.loadNpmTasks('grunt-rollup'); // npm install grunt-rollup --save-dev
grunt.initConfig({
rollup: {
dist: {
options: {
plugins: [
babel()
]
sourceMap: true
},
files: {
'js/index.js': 'js_source/index.js'
}
}
},
});
grunt.registerTask('default', ['rollup']);

34. Live Demo
https://babeljs.io/repl/#?babili=false&evaluate=true&lineWrap=false&presets=es2015%2Creact%2Cstage-2&code=
http://rollupjs.org/