JavaScript today

Where we are, where we're going, what's next

Powered by OpenTable Engineering

Matt Blair

Principal Software Engineer, Search Platform
mblair@opentable.com
 
http://blog.mattblair.co/forwardjs-2016-prezzo
https://github.com/duereg/forwardjs-2016-prezzo

Where we are - Browsers

Where we are - Transpilers

Where we are - Runtimes

Examples

What Works Everywhere?

Syntax

let

function varTest() {
  var x = 31;
  if (true) {
    var x = 71;  // same variable!
    console.log(x);  // 71
  }
  console.log(x);  // 71
}

let

function letTest() {
  let x = 31;
  if (true) {
    let x = 71;  // different variable
    console.log(x);  // 71
  }
  console.log(x);  // 31
}

let errors

if (x) {
  let foo;
  let foo; // TypeError thrown.
}

function do_something() {
  console.log(foo); // ReferenceError
  let foo = 2;
}

const

const MY_FAV = 7;
MY_FAV = 20; //fails FF, Chrome, not Safari

console.log("my favorite number is: " + MY_FAV); // 7

const MY_FAV = 20; //throws
var MY_FAV = 20; //throws

console.log("my favorite number is " + MY_FAV); // 7

const

const FOO; // SyntaxError: missing = in const declaration
const MY_OBJECT = {"key": "value"}; // works

//fails FF, Chrome, not Safari
MY_OBJECT = {"OTHER_KEY": "value"};

// Object attributes are not protected
MY_OBJECT.key = "otherValue";

Arrow Functions

// Arrow functions are all bound to this
(param) => { param++; } // function(param) { param++; }
// implicit return
(a1, a2, aN) => a1 + a2  // function(a1, a2, aN) { return a1 + a2; }

// Parentheses are optional when there's one parameter
(singleParam) => { statements }
singleParam => { statements }

Object Literal Extensions

var a = 103, bar = 'foo'
var obj = {
  a: a,
  m: function(z) {return z + this.a},
}
obj[bar] = 104 // obj.foo
Object.defineProperty(obj, 'getA', {
  get: function() {return this.a()},
})

Object Literal Extensions

var a = 103, bar = 'foo'

var obj = {
  a, // a:a, object shorthand
  m(z) {return z + this.a}, // function shorthand
  [bar]: 104, // Computed Property Names
  get getA() {return this.a}
}

String Templating

console.log("string text line 1\n string text line 2");
// is equal to
console.log(`string text line 1
string text line 2`);

var a = 5, b = 10;
console.log(`Fifteen is ${a + b} and\nnot ${2 * a + b}.`);

What Works Everywhere?

Data Structures

Set

let s = new Set()
s.add("hello").add("hello").add({action: 'goodbye'})
s.size === 2
s.has("hello") === true
for (let key of s.values()) // insertion order
  console.log(key)

Map

let s = { foo: 'bar' }
let m = new Map()
m.set("hello", 42)
m.set(s, 34)
m.get(s) === 34
m.size === 2
for (let [ key, val ] of m.entries())
    console.log(key + " = " + val)

WeakSet

let thingToDelete = {};
let ws = new WeakSet()
ws.set(thingToDelete) //cannot be primitive
ws.has(thingToDelete) === true
thingToDelete = null;
ws.has(thingToDelete) === false

WeakMap

let thingToDelete = {};
let wm = new WeakMap()
wm.set(thingToDelete, 42) //cannot be primitive
wm.get(thingToDelete) === 42
thingToDelete = null;
wm.has(thingToDelete) === false
wm.get(thingToDelete) === undefined

Symbol

Symbol("foo") !== Symbol("foo") // every Symbol is unique
const foo = Symbol()
const bar = Symbol()
typeof foo === "symbol"
typeof bar === "symbol"
let obj = {}
obj[foo] = "foo"
obj[bar] = "bar"
JSON.stringify(obj) // {}
Object.keys(obj) // []

Promise

What else is there?

What are we missing?

What are my options?

Thanks!

For more information: