The document discusses the features of ECMAScript 6 (ES6), also known as JavaScript. It provides examples of new features such as arrow functions, classes, rest parameters, and more. It then discusses options for using ES6 features today, such as compiling to ES5 using tools like Traceur and Babel. Finally, it thanks the audience and provides links to learn more.

1. Living in the ES6 Future
TODAY

2. What is
ES6?

3. ECMAScript
==
JavaScript

4. ES5
Array.forEach
Function.bind
Object.create
Object.defineProperty

5. ES6

6. ES6
arrow functions

7. ES6
arrow functions
classes

8. ES6
arrow functions
classes
rest parameters

9. ES6
arrow functions
classes
rest parameters
for ... of

10. ES6
iterators
arrow functions
classes
rest parameters
for ... of

11. ES6
iterators
generators
arrow functions
classes
rest parameters
for ... of

12. ES6
arrow functions
classes
iterators rest parameters
generators
destructuring
for ... of

13. unicode support
arrow functions
ES6
classes
iterators rest parameters
generators
destructuring
for ... of

14. unicode support
arrow functions
ES6
classes
iterators rest parameters
generators
destructuring
for ... of
block-scoped variables

15. unicode support
arrow functions
WeakMaps
classes
ES6
iterators rest parameters
generators
destructuring
for ... of
block-scoped variables

16. unicode support
arrow functions
WeakMaps
classes
proxies
iterators rest parameters
generators
destructuring
for ... of
block-scoped variables
ES6

17. unicode support
arrow functions
WeakMaps
classes
proxies
iterators rest parameters
generators spread operator
destructuring
for ... of
block-scoped variables
ES6

18. unicode support
arrow functions
WeakMaps
classes
proxies
iterators rest parameters
generators spread operator
destructuring
for ... of
block-scoped variables
ES6m
d
n
!
e
r
o
a

19. What does all that
MEAN?

21. :(

22. ES6 is Nigh
ES6 The Awesome Parts
ES6 The Refined Parts
The Subtleties of ES6
The Future of JavaScript

23. rest parameters
function log(level) {
var args =
[].slice.call(arguments,1);
}

24. rest parameters
function log(level, ...args) {
}

25. default parameters
function log(message, prefix) {
prefix = prefix || "> ";
console.log(prefix + message);
}

26. default parameters
function log(message, prefix) {
if (prefix === undefined) {
prefix = "> ";
}
console.log(prefix + message);
}

27. default parameters
function log(message, prefix = "> ") {
console.log(prefix + message);
}

28. block-scoped vars
console.log(i);
if (false) {
var i = 10;
}

29. block-scoped vars
var i;
console.log(i);
if (false) {
i = 10;
}

30. block-scoped vars
console.log(i); // ReferenceError:
if (false) {
// i is not defined
let i = 10;
}

31. block-scoped vars
if (false) {
let i = 10;
}
console.log(i); // ReferenceError:
// i is not defined

32. block-scoped vars
for (let i = 0; i < 10; i++) {
// do something
}
console.log(i); // ReferenceError:
// i is not defined

33. arrow functions
[1, 2, 3].map(function(i) {
return i * i;
});

34. arrow functions
[1, 2, 3].map(i => i * i);

35. arrow functions
{
i: 1,
printWithDelay: function() {
setTimeout(function() {
console.log(this.i);
}, 100);
}
}

36. arrow functions
{
i: 1,
printWithDelay: function() {
var self = this;
setTimeout(function() {
console.log(self.i);
}, 100);
}
}

37. arrow functions
{
i: 1,
printWithDelay: function() {
setTimeout(function() {
console.log(this.i);
}.bind(this), 100);
}
}

38. arrow functions
{
i: 1,
printWithDelay: function() {
setTimeout(_.bind(function() {
console.log(this.i);
}, this), 100);
}
}

39. arrow functions
{
i: 1,
printWithDelay: function() {
setTimeout( () => {
console.log(this.i);
}, 100);
}
}

40. improved literals
return {
name: name,
age: age,
height: height
};

41. improved literals
return { name, age, height };

42. improved literals
{
doAThing: function() {
// ...
},
doAnotherThing: function() {
// ...
}
}

43. improved literals
{
doAThing() {
// ...
},
doAnotherThing() {
// ...
}
}

44. classes
class Demo {
constructor() {
this.i = 1;
}
print() {
console.log(this.i);
}
}

45. classes
class Parent {
//
}
class Child extends Parent {
constructor(name) {
super();
this.name = name;
}
}

46. Much, much more
let { top, left } = e.getClientRect();
function* gen() { yield 1; yield 2; }
for (i of gen()) { log(i); }
[ for (let i of [1, 2, 3]) i * i ];
var sq = ( for (let i of [1, 2, 3]) i * i );
for (let i of sq) { log(i); }

47. I have software
to ship to
REAL USERS

48. Coming Soon(er)
node.js
FirefoxOS
browser plugins
Windows 8

49. What are my
options?

50. What can we
use today?

51. kangax.github.io/es5-compat-table/es6/

52. If we have

53. If we have
CoffeeScript --> JavaScript

54. If we have
CoffeeScript --> JavaScript
IcedCoffeeScript --> JavaScript

55. If we have
CoffeeScript --> JavaScript
IcedCoffeeScript --> JavaScript
TypedScript --> JavaScript

56. If we have
CoffeeScript --> JavaScript
IcedCoffeeScript --> JavaScript
TypedScript --> JavaScript
ClojureScript --> JavaScript

57. Why not?
JavaScript --> JavaScript

58. Why not?
JavaScript.next
-->
JavaScript.now

59. Traceur

60. Traceur
JavaScript --> JavaScript

61. Traceur
JavaScript --> JavaScript
...written in JavaScript

62. Demo
Time

63. WAIT!
what about modules?

64. square/es6-module-transpiler
import { foo, bar } from "foobar";
function fooTheBar() {
return foo + bar;
}
export default = fooTheBar;

65. ES6 all the
things?

66. Thanks!
@JeremyMorrell
http://rathercurio.us
http://github.com/jmorrell