Here are the slides that I gave for The Arizona Software Community meetup. http://www.meetup.com/azsoftcom/events/222936544/ This was a gentle introduction to some of the features in EcmaScript 2015 and how and why you may use them.

1. EcmaScript 2015impress your friends at the party

2. What is es6?

3. Why es6?

4. Is it Safe to Us Es6?!?!

5. https://kangax.github.io/compat-table/es6/

6. How do we use Es6?

9. https://github.com/rauschma/webpack-es6-demo

10. https://github.com/angular-class/NG6-starter

11. Syntactic SugAr

13. Es6 Classes

15. ES6 Classes
• Simple sugar over the the prototype-based
OO pattern
• A more convenient form makes classes
easier to use
• Classes support inheritance, super calls,
instance and static methods and
constructors

16. class Project {
constructor(name) {
this.name = name;
}
start() {
return `Project ${this.name} starting`;
}
}
var project = new Project("Website");
project.start(); // "Project Website starting"

17. Es6 Inheritance

18. ES6 INheritance
• Inheritance is possible via the prototype
• You can inherit from a base class using the
extends keyword
• You must call super before you can access
this in a subclass

19. class Shape {
…
toString () {
return `Shape(${this.id})`
}
}
class Rectangle extends Shape {
constructor (id, x, y, width, height) {
super(id, x, y)
…
}
toString () {
return "Rectangle > " + super.toString()
}
}
class Circle extends Shape {
constructor (id, x, y, radius) {
super(id, x, y)
…
}
toString () {
return "Circle > " + super.toString()
}
}

20. Es6 Modules

21. ES6 MODULES
• Language-level support for modules for
component definition
• Best of both both CommonJS and AMD
• Named exports and default exports

22. //------ lib.js ------
export const sqrt = Math.sqrt;
export function square(x) {
return x * x;
}
export function diag(x, y) {
return sqrt(square(x) + square(y));
}
//------ main.js ------
import { square, diag } from 'lib';
console.log(square(11)); // 121
console.log(diag(4, 3)); // 5

23. //------ main.js ------
import * as lib from 'lib';
console.log(lib.square(11)); // 121
console.log(lib.diag(4, 3)); // 5

24. //------ myFunc.js ------
export default function () { ... };
//------ main1.js ------
import myFunc from 'myFunc';
myFunc();

25. //------ MyClass.js ------
export default class { ... };
//------ main2.js ------
import MyClass from 'MyClass';
let inst = new MyClass();

26. Es6 Block Level Scoping

28. ES6 MODULES
• Function scope can be tricky!
• We can scope variables at a block level
using let and const

29. function printName() {
if(true) {
var name = "Rafael";
}
console.log(name); // Rafael
}

30. function printName() {
var name; // variable declaration is hoisted to the top
if(true) {
name = "Rafael";
}
console.log(name); // Rafael
}

31. function printName() {
if(true) {
let name = "Rafael";
}
console.log(name); // ReferenceError: name is not defined
}

32. function printName() {
var name = "Hey";
if(true) {
let name = "Rafael";
console.log(name); // Rafael
}
console.log(name); // Hey
}

34. if (true) { // enter new scope, TDZ starts
// Uninitialized binding for `tmp` is created
tmp = 'abc'; // ReferenceError
console.log(tmp); // ReferenceError
let tmp; // TDZ ends, `tmp` is initialized with `undefined`
console.log(tmp); // undefined
tmp = 123;
console.log(tmp); // 123
}

35. Es6 Arrow functions

37. ES6 Arrow Functions
• Arrow function expression aka fat arrow
functions are a shorter syntax
• Lexically binds the this value
• Arrow functions are always anonymous

38. var numbers = [1,2,3,4,5];
var timesTwo = numbers.map(function (number) {
return number * 2;
});
console.log(timesTwo); // [2, 4, 6, 8, 10]

39. var numbers = [1,2,3,4,5];
var timesTwo = numbers.map((number) => number * 2);
console.log(timesTwo); // [2, 4, 6, 8, 10]

40. var numbers = [1,2,3,4,5];
var timesTwo = numbers.map(number => number * 2);
console.log(timesTwo); // [2, 4, 6, 8, 10]

41. function FooCtrl (FooService) {
this.foo = 'Hello';
FooService
.doSomething(function (response) {
this.foo = response;
});
}

42. function FooCtrl (FooService) {
this.foo = 'Hello';
FooService
.doSomething(function (response) {
this.foo = response;
}.bind(this));
}

43. function FooCtrl (FooService) {
var that = this;
that.foo = 'Hello';
FooService
.doSomething(function (response) {
that.foo = response;
});
}

44. function FooCtrl (FooService) {
this.foo = 'Hello';
FooService
.doSomething((response) => { // woo, pretty
this.foo = response;
});
}

45. function FooCtrl (FooService) {
this.foo = 'Hello';
FooService
.doSomething(response => this.foo = response);
}

46. Es6 Template Strings

47. ES6 Template strings
• Multi-line strings
• Expression interpolation
• Do not let untrusted users construct
template strings!

48. console.log("string text line 1n"+
"string text line 2");
// "string text line 1
// string text line 2"

49. console.log(`string text line 1
string text line 2`);
// "string text line 1
// string text line 2"

50. var a = 5;
var b = 10;
console.log("Fifteen is " + (a + b) + " andnnot " +
(2 * a + b) + ".");
// "Fifteen is 15 and
// not 20."

51. var a = 5;
var b = 10;
console.log(`Fifteen is ${a + b} andnnot ${2 * a + b}.`);
// "Fifteen is 15 and
// not 20."

52. Es6 Object Literals

53. ES6 Object Literals
• Object literals are extended to be more
convenient and more like defining a class
• Better property and method declarations

54. var x = 10;
var y = 30;
var coordinates = {
x: x,
y: y
};
console.log(coordinates); // { x: 10, y: 30 }

55. let x = 10;
let y = 30;
let coordinates = { x, y };
console.log(coordinates); // { x: 10, y: 30 }

56. let x = 10;
let y = 30;
let coordinates = {
x,
y,
z: 10,
};
console.log(coordinates); // { x: 10, y: 30, z: 10 }

57. var cart = {
_items: [],
addItem: function(item) {
this._items.push(item);
return this;
},
toString: function() {
return this._items.join(', ');
}
}
cart.addItem('apple')
.addItem('orange')
.addItem('banana');
console.log(cart.toString()); // apple, orange, banana

58. var cart = {
_items: [],
addItem(item) {
this._items.push(item);
return this;
},
toString() {
return this._items.join(', ');
}
}
cart.addItem('apple')
.addItem('orange')
.addItem('banana');
console.log(cart.toString()); // apple, orange, banana

59. Es6 Array API

60. ES6 Array API
• Array.from converts array-like objects into arrays
• Array.keys, Array.values and Array.entries are
handy for iterating over arrays
• Array.find returns the first element that the
callback returns true
•Array.findIndex returns the index of the first
element that the callback returns true

61. // Array-like object (arguments) to Array
function f() {
return Array.from(arguments);
}
f(1, 2, 3);
// [1, 2, 3]
// Any iterable object...
// Set
var s = new Set(["foo", window]);
Array.from(s);
// ["foo", window]
// Map
var m = new Map([[1, 2], [2, 4], [4, 8]]);
Array.from(m);
// [[1, 2], [2, 4], [4, 8]]
// String
Array.from("foo");
// ["f", "o", "o"]

62. var arr = ["a", "b", "c"];
var iterator = arr.keys();
console.log(iterator.next()); // { value: 0, done: false }
console.log(iterator.next()); // { value: 1, done: false }
console.log(iterator.next()); // { value: 2, done: false }
console.log(iterator.next()); // { value: undefined, done: true }

63. var arr = ['w', 'y', 'k', 'o', 'p'];
var eArr = arr.values();
console.log(eArr.next().value); // w
console.log(eArr.next().value); // y
console.log(eArr.next().value); // k
console.log(eArr.next().value); // o
console.log(eArr.next().value); // p

64. var arr = ['a', 'b', 'c'];
var eArr = arr.entries();
console.log(eArr.next().value); // [0, 'a']
console.log(eArr.next().value); // [1, 'b']
console.log(eArr.next().value); // [2, 'c']

65. function isPrime(element, index, array) {
var start = 2;
while (start <= Math.sqrt(element)) {
if (element % start++ < 1) {
return false;
}
}
return element > 1;
}
console.log([4, 6, 8, 12].find(isPrime)); // undefined, not found
console.log([4, 5, 8, 12].find(isPrime)); // 5

66. function isPrime(element, index, array) {
var start = 2;
while (start <= Math.sqrt(element)) {
if (element % start++ < 1) {
return false;
}
}
return element > 1;
}
console.log([4, 6, 8, 12].findIndex(isPrime)); // -1, not found
console.log([4, 6, 7, 12].findIndex(isPrime)); // 2

67. Es6 SET

68. ES6 SET
• Lets you store unique values of any type
• You can store primitive values or object
references

69. var mySet = new Set();
mySet.add(1);
mySet.add(5);
mySet.add("some text");
mySet.has(1); // true
mySet.has(3); // false, 3 has not been added to the set
mySet.has(5); // true
mySet.has(Math.sqrt(25)); // true
mySet.has("Some Text".toLowerCase()); // true
mySet.size; // 3
mySet.delete(5); // removes 5 from the set
mySet.has(5); // false, 5 has been removed
mySet.size; // 2, we just removed one value

70. Es6 MAP

71. ES6 MAP
• Simple key/value map
• Any value (object or primitive value) can be
used as either a key or a value

72. var myMap = new Map();
var keyObj = {},
keyFunc = function () {},
keyString = "a string";
// setting the values
myMap.set(keyString, "value associated with 'a string'");
myMap.set(keyObj, "value associated with keyObj");
myMap.set(keyFunc, "value associated with keyFunc");
myMap.size; // 3
// getting the values
myMap.get(keyString); // "value associated with 'a string'"
myMap.get(keyObj); // "value associated with keyObj"
myMap.get(keyFunc); // "value associated with keyFunc"
myMap.get("a string"); // "value associated with 'a string'"
// because keyString === 'a string'
myMap.get({}); // undefined, because keyObj !== {}
myMap.get(function() {}) // undefined, because keyFunc !==
function () {}

73. Es6 Resources

74. https://leanpub.com/exploring-es6/

75. http://es6-features.org/

76. http://es6katas.org/

77. http://www.es6fiddle.net/
http://es6-features.org/
http://www.2ality.com/
https://github.com/lukehoban/es6features
http://codepen.io/bradleyboy/posts/getting-to-know-es6-object-literals
http://jamesknelson.com/es6-the-bits-youll-actually-use
http://jamesknelson.com/es6-cheatsheet.png

79. Thank you!