My talk at OdessaJS 2016

1. ECMAScript
past, present & future

2. Ksenia Redunova
@katidotk

3. A Brief History of JavaScript
From the Big Bang to Black Holes

6. ECMAScript 3 ECMAScript 4 ECMAScript 5 ES 6 ES 2016
1999 2008 2009 2015 2016

7. ECMAScript 5
• Just a normal JavaScript :)
• about 100% support
• strict mode

8. “Every once in a while, a piece of technology is situated in the right place at the
right time, and it ends up taking over the world. Ten years ago I saw JavaScript
poised to be in that position. What we had before was really what Brendan Eich
came up with over 10 days in May of 1995. This is a new foundation for what
may be the most important programming language of the next several decades,
and ES6 is probably the foundation of JavaScript for the next 10 or 15 years”
ECMAScript project editor Allen Wirfs-Brock

9. ECMAScript 6 / ES 2015
• Better syntax for features that already exist (via libraries)
• New functionality in the standard library
• Completely new features

10. ES 2016
• Array.prototype.includes
> ['a', 'b', 'c'].includes('a')
true
> ['a', 'b', 'c'].includes('d')
false
• Exponential operator
x ** y
• Yearly release schedule

11. Compatibility
• “Don’t break the web”
• Evolution without versioning
• Example: classes are internally translated to constructors
• Example: methods are still functions

12. https://babeljs.io/
Transpilers (such as Babel and Traceur) let you compile ES6 to ES5

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

14. ES 2016 support

15. ES6 in details

16. Syntax changes
• get rid of F-word: method definition inside an object literal
const obj = {
foo() { ··· },
}
• let, const block scoping (no need of IIFE)
• for of
• shorthand assignment
let x = 5; let xobj = {x}; // xobj = {x: 5}
• template strings & string literals improvements
• destructuring
let {x, y} = point;
let [a, b, c] = three();
const [all, year, month, day] = /^(dddd)-(dd)-(dd)$/.exec('2999-12-31');

17. Parameters handling
• Default parameters
function findClosestShape(x=0, y=0) {
// …
}
• Get rid of arguments magic
• Rest parameters
function f(x, ...y) {
// …
}
f('a', 'b', 'c'); // x = ‘a’, y = [‘b', 'c']
• Spread operator
Math.max(x1, x2, ···) // rest op; arbitrary number of params
Math.max(...[-5, 2, 0, 3]) //Array as arguments

18. Arrow functions
// ES5
{
...
addAll: function addAll(pieces) {
var that = this;
_.each(pieces, function (piece) {
that.add(piece);
});
},
...
}
// ES6
{
...
addAll(pieces) {
_.each(pieces, piece => this.add(piece));
},
...
}

19. Classes
class Point {
constructor(x, y) {
this.x = x;
this.y = y;
}
toString() {
return `(${this.x}, ${this.y})`;
}
}
> typeof Point
‘function'
• invoke a class via new, not via a function call
• no separating punctuation between the members of a class definition
(‘;’ ignored but ‘,’ causes an error)

20. And much more
• Modules
• Iterators
• Generators
• Proxies
• WeakMaps
• etc

21. http://exploringjs.com/es6/
https://hacks.mozilla.org/category/es6-in-depth/
https://learn.javascript.ru/es-modern
http://frontender.info
Links

23. Q & A