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.
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"
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
32. function printName() {
var name = "Hey";
if(true) {
let name = "Rafael";
console.log(name); // Rafael
}
console.log(name); // Hey
}
33.
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
}
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]
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"]
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
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
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 () {}