An overly-broad overview of new features in JavaScript ES6: the "use it now", the "worth consideration", the "ruby rip-offs", and the "crazytown"!

1. ESWow!
A overly-broad overview of JavaScript ES6

2. ES6 Background

3. ECMAScript
December 1995: JavaScript announced by Sun
March 1996: Shipped in Netscape Navigator 2.0
November 1996: Netscape presents Ecma-262 to ECMA International
European Computer Manufacturers Association
FAT12/FAT16
CD-ROM
C# language spec
ECMAScript
JSON
June 1997: ECMAScript v1 is adopted

4. ES Versions
V1 - 1997
V2 - 1998
V3 - 1999
Add regex, try/catch
V4 - N/A
Abandoned
V5 - 2009
Adds “strict mode”, JSON support, reflection
V6 - 2015
Woohoo!
V7 - 2016
Array.prototype.includes(), **

5. ESPanorama

6. The use it now features

7. Block-scoped variables: let, const
if(true) {
var answer = 42;
}
answer;
>> 42
if(true) {
let answer = 42;
}
answer;
>> ReferenceError: answer is not defined
ES5 ES6

8. Self-invoking functions
(function() {
console.log(“hi”);
})();
{
console.log(“hi”);
}
ES5 ES6

9. Arrow functions
[1, 2, 3, 4, 5].map(function(num) {
return num * 2;
});
-------
this.thing = “thing”;
[1, 2].forEach(function() {
console.log(this.thing);
});
>> undefined
>> undefined
[1, 2, 3, 4, 5].map(num => num * 2);
[1, 2, 3, 4].map((number, index) => {
return number * index;
});
-------
this.thing = “thing”;
[1, 2].forEach(() => {
console.log(this.thing);
});
>> thing
>> thing
ES5 ES6

10. Method properties
var log = {
info: function(message) {
console.log("INFO: " + message);
},
warn: function(message) {
console.log("WARN: " + message);
}
};
log.info(“ES6”);
>> INFO: ES6
var log = {
info(message) {
console.log("INFO: " + message);
},
warn(message) {
console.log("WARN: " + message);
}
};
log.info(“ES6”);
>> INFO: ES6
ES5 ES6

11. Computed property names
var object = {};
object[4 + 2] = “6”;
{ 6: “6” }
var object = {
[4 + 2]: “6”
};
{ 6: “6” }
ES5 ES6

12. Property shorthand
var answer = 42;
{ answer: answer };
>> { answer: 42 }
var answer = 42;
{ answer };
>> { answer: 42}
ES5 ES6

13. Array.prototype.includes()
var array = [1, 2, 3, 4, 5];
function includes(element, array) {
Return array.indexOf(element) !== -1;
}
includes(3, array);
>> true
var array = [1, 2, 3, 4, 5];
array.includes(3);
>> true
ES5 ES6

14. String.prototype.includes()
var string = “Hi team”;
Function includes(string, substring) {
return string.indexOf(substring) !== -1;
}
includes(string, “team”);
>> true
var string = “Hi team”;
string.includes(“team”);
>> true
ES5 ES6

15. For… of
Var array = [1, 2, 3];
for(var i = 0; i < array.length; i++) {
console.log(array[i]);
}
>> 1
>> 2
>> 3
Var array = [1, 2, 3];
for(let number of array) {
console.log(number);
}
>> 1
>> 2
>> 3
ES5 ES6

16. Object.assign()
function assign() {
var target = arguments[0];
var sources = Array
.prototype
.slice
.call(arguments, 1);
sources.forEach(function(source) {
for(var property in source) {
if(source.hasOwnProperty(property)) {
target[property] = source[property];
}
}
});
return target;
};
assign({}, {hi: 1}, {bye: 2});
>> { hi: 1, bye: 2 }
Object.assign({}, { hi: 1 }, { bye: 2 })
>> { hi: 1, bye: 2 }
ES5 ES6

17. The ruby rip-off features

18. String interpolation
let name = “Rick”;
`Hi ${name}`
>> Hi Rick

19. Array.prototype.find()
[1, 2, 3, 4].find(num => num === 2);
>> 2

20. String.prototype.repeat()
“hi”.repeat(5);
>> hihihihihi
Fun fact:
“5” * 2
>> 10

21. The worth consideration features

22. Worth consideration
Number.EPSILON
Set/WeakSet
Map/WeakMap
Class syntax
Getters/setters
import

23. The crazytown features

24. Proxying
let object = {
person: "rick"
};
let proxy = new Proxy(object, {
get(target, name) {
return "hi " + target[name];
}
});
object.person
"rick"
>> proxy.person
"hi rick";

25. Symbols
let name = Symbol();
let type = Symbol();
let object = {};
object[name] = "RicksObject";
object[type] = "Object";
object
>> {}
object.name
undefined
object[name]
>> "RicksObject"

26. Unicode regex
/u{1F4BB}/u.test("💻")
>> true

27. Deploying ES6 at Panorama

28. Babel

29. sprockets-es6

30. ESQuestions?