ES6

Hi :-)

I'm Jim Cowart.

@ifandelse => (twitter, github, instagram)

<3 I work for LeanKit. <3

Brace Yourselves

ES WAT?

First - Definitions & History

In Case You Didn't Know

Why "ES6"? This is short for:
"ECMAScript Language Specification, Edition 6"
"ECMA WAT?!"
ECMAScript is the official name of JavaScript.
You can thank Sun's Java trademark (at the time) for this.
"TC39" -> ECMA Technical Committee 39.

1995

While Keanu Reeves carried 320GB of data in his brain...

Netscape released LiveScript with Navigator 2

& later re-named it JavaScript.

1996-97

While Jeff Golblum was using a Powerbook to upload a virus to an alien mothership, the ECMAScript 1 (ES1) spec was submitted & then published in 1997

1998

Willis & Affleck were saving the planet from Armageddon while ECMAScript 2 was being published...

1999

JavaScript was busy being improved with ES3 while
Lucas was busy ruining Star Wars with JarJarScript.
Browser War Dark Ages in Full Swing

2002

JSON Released

2006

jQuery Released

2008

Google Chrome Released

Fringe Begins Airing

RIP Netscape Navigator

ES4 Abandoned

2008-2009

TC39 resolves > 1 yr split & moves forward

Eich is Revealed to be Gandalf

ES5 is Released

(But many fail to enjoy all of it thanks to IE6-8)

ES6 Status/Schedule

Features already appearing in browsers
Features are 'frozen'
"Finished" by end of 2014
(other than late-arriving bugs)
June 2015 - Formal Publication

Don't Worry

ES6 does not "break" older JavaScript.

All JavaScript must be runnable on all runtimes in use.

In other words, ES5 will continue to work.

Hang On a Sec...

"Are you about to tell me about a bunch of cool

language features that I can't use right now?"

Actually, no! You can write in ES6 today using most

major features and transpile to ES5 as a build step

(with source maps!).

With traceur it's as simple as:

 traceur --out ./out/transpiled.js --script es6Source.js

(Links to resources included at the end.)

Goals

Scope & Assignment
Functions
String & Object API Additions
Number API Additions
Array API Additions
Loops, Generators, Collections & more
Promises
Modules/Classes
Proxies
Symbols

Scope & Assignment

Block Scope - Let

Const

Destructuring

Functions

Arrow Functions

⇒

Functions - The ES5 Way

The ES6 Way

The ES5 Way

The ES6 Way

The ES5 Way

The ES6 Way

Default Params

In ES5:

Default Params

ES6:

Spread & Rest

ES5:

Spread & Rest

ES6

Named Parameters

(more destructuring)

Named Parameters

With Defaults Values!

String & Object API Additions

String Templates

Multi-line Strings

String API Sugar

(In other words: "FINALLY!")

Object.is

Object Literal Shorthand

Object Literal Shorthand

Object.assign

Number API Additions

Number.isInteger

Number.isSafeInteger

Number.isNaN

Array API Additions

Array.findIndex()

In ES5

Array.findIndex()

ES6

Array.find()

ES5

Array.find()

Array.fill()

Array.from()

ES5

Array.from()

ES6

Array.from()

ES6

Loops, Generators

Collections & More

Loops Made Better

ES5

Loops Made Better

ES5

Loops Made Better

ES6

for-of + generators

Generators

Allow you to "pause & resume" a function
"Interruptible Computations" – Dave Herman
"Shallow Coroutines" – Axel Rauschmayer
Great for simplifying asynchronous code

Generators - The Basics

Generators - The Basics

What's Really Going On?

Generators return a generator object
that is an iterator

An iterator has a `next` method

Calling next returns an object

with a `value`
and a `done` boolean

What's Really Going On?

Generating Awesome

"Pausing with yield =>

concurrency minus the callbacks"

– Dave Herman

Map

Data structure mapping Keys & Values

Can be iterated over via for-of

Not Limited to string keys!

Map

Map

WeakMap

Keys are weakly held* Objects
Values are anything
Keys are not enumerable
(because of garbage collection)

WeakMap

Set

A Collection - with *no* duplicates

Set

Going Array-to-Set and Back

WeakSet

Holds weakly held* Objects only

Objects will be unique (like Set)

Not enumerable

WeakSet

Promises

Represent the result of an async operation
(then-able)
Have existed in libs like when.js, Q, RSVP
& jQuery
Are now native to JavaScript

Promises

Most of us have seen something like:

Promises

Creating a Promise in ES6:

Promises

Promise.all()

Structural / Organizational Features

Modules!

Until Now Our Choices Have been:

AMD
CommonJS
Hand-rolled/Revealing Module/etc
Scope? Encapsulation? What's that ?

FINALLY -

we have a native way to organize code!

Modules

Exporting:

Modules

Exporting:

Modules

Importing:

Classes

If you <3 building your prototype

chains manually, don't worry.

Classes are syntactical sugar over

prototypes & object instances.

ES5 Parent "Class"

ES5 Child "Class"

ES6 Parent Class

ES6 Child Class

Proxies

Allows you to define the 'semantics' of an
object in JavaScript (as opposed to C++)
Gives you hooks to intercept/trap certain
operations
Use-cases include: