CF Camp Notes: ECMAScript 6, Matt Bourke

October 22, 2014

ECMAScript 6 - Matt Bourke

ECMAScript is a "language", JavaScript is a "dialect" of that
they're kind of 1 in the same.

Creating awesome games in JS is easy -- Phaser.js
Automated regression testing w/ casper.js

JS is the "assembly language of the web"
-- there are over a dozen languages now that compile to JS
CoffeeScript, Google Dart, etc.

EcmaScript 6
1, 2, 3, some back and forth, then 3.1 became 5 and then 6.0
3.1 roughly became 5
4.0 scrapped and some of it became 6
7.0 will be riding the yearly software release train
if they keep to their word on this

when can we use this new version 6 stuff?
depends on your audience and how much polyfilling or Transpiling you'd like to do
Polyfill by prototype extension
Transpile w/ told like Traceur or Mascara
use the latest Chrome / Firefox
Enable "experimental Javascript" in Chrome uRL chrome://flags
check out your browser compatibility on http://kangax.github.io/compat-table/es6/
es6fiddle.com

keep your "var" variables at the top of the function
when you put "var" in the middle javascript will do "function hoisting" and move it anyway so you'll get weird results.

var scope

"let" scope
to get "block level" scoping

...will output 10 because "let" keeps that "num = 6" scoped inside the if() statement. no "function hoisting".

The Module Pattern --
aka an "object literal" -- the "javascript object/class" we're used to now.

revealing module pattern


default arguments --


named parameters --


functions - spread or apply

ala "unpacking" in python

fat functions

shorthand function syntax;

new string stuff
contains


arrays - new stuff
static array methods


prototype methods
entries
keys
values
fill

Modules are now built in
will work faster and be more "standard" than any of the other hacked ways Modules exist today.

"real" Classes
class Person extends ParentClass
will have constructors that are called automatically etc

templating
via back-tick `
can use multiple lines, variables, etc.

promises
now native to JS, instead of the various hacks that are available now.

generators --

you don't have a "return" you have a "yield"

Weak Map --
like key/value pair except instead of keys needing to be a string (simple data type) the keys can be objects
much more efficient for garbage collection
can't iterate it "naturally". you'd have to keep an list of keys somewhere (if that's what you wanted to do)

Proxies --
allow us to intercept operations done on objects
via proxy "traps"
get()
set()
deleteProperty()
iterate()
ownKeys()
and a few others

Set() Object
.add
.size
.has


coming in version 7

Object.observe - no more dirty checking objects for a change
(this works in Chrome NOW, don't need to wait for version 7)