ES6: The Good Parts

josh@josh.earth

Mozilla Dev Rel

What is ES6?

EcmaScript 6
EcmaScript 2015
ES 2015
The new stuff

* JavaScript has had many versions over the years, but overall the evolution was slow until recently. More changes have happened in the past three years than in the previous decades. and that's why I created this talk.
* ES 6 stands for EcmaScript 6. It's also called EcmaScript 2015, or ES 2015. These are all different names for the 'new Javascript'.
* I'm not entirely sure *why* JS has changed so much recently, but I I suspect it's because of competiton from other web targeted languages like Typescript and Coffeescript.
* Also, the advent of transpilers have made it possible to use new language features *before* they are built into the browsers. I'll talk a bit more about transpilers in a moment.

Why ES6 matters

JS matters because it's the fabric of the web, and increasingly used for server side apps with Node, and mobile and desktop apps with Cordova, React Native, and Electron.

Thanks to new JS implementations like V8 JS is fast, really fast, and has access to new powerful web apis like WebGL that are also fun.

In short: JS is everywhere. So it matters that we push it forward. Languages which don't evolve start to die. The other reason to make JS better is simply that it's awesome if JS gets better. Our code can improve. our apps can have fewer bugs. And some of these features enable the runtimes to actually run code faster.

Too much new

Let's be useful instead

The Problems with Variables

Variables always vary

var VARS = {
    foo
        set = function() { }
        get = function() { return 42 }
}
VARS.foo = 42; // now I have a constant

Function Scoping

function badCode() {
    if(foo) {
        var x = 5;
    }
    if(bar) {
        console.log(x);
    }
}

Hoisting

function badCode() {
    console.log("foo is",foo);
    var foo = 'bar';
}

Hoisting

for(var i=0; i<5; i++) {
    console.log(i);
}
console.log(i);

A better way

`const` and `let`

`const`

function test() {
    const foo = 'bar';
    foo = 'baz'; //error
}

`let`

function goodCode() {
    if(foo) {
        let x = 5;
    }
    if(bar) {
        console.log(x); //error
    }
}

`let`

function goodCode() {
    for(let i=0; i<5; i++) {
        console.log(i);
    }
    console.log(i); //error
}

Template Literals: Super Strings

var q  = 'foo';
var qq = "foo";

var bq = `foo`;

var qq = "Sally sells \"sea shells\"";
var bq = `Sally sells "sea shells"`;

Multi-line Strings

var qq = "this is a very long"
    + " piece of text that goes over several lines"
    + " and would require silly hacks";

var bq = `this is a very long
    piece of text that goes over several lines
    and would require silly hacks`;

Template Strings

var name = "Alice";
var greeting = `Good morning ${name}`;
var amount = 5;
var price = 3;
var sales = `That costs ${amount*price} dollars`;

HTML Templates

var template = `
  <div>
      <h3>Good morning ${name}</h3>
      <p>
          That item will cost you
          <b>${amount*price}</b>
          dollars.
      </p>
  </div>
`

Arrow Functions

Good

var output = [];
for(var i=0; i<input.length; i++) {
    output[i] = input[i] * 2;
}

Better

var output = input.map(function(x) {
    return x * 2;
});

Arrow Functions

function (x) {
    return x * 2;
}

(x) => {
    return x * 2;
}

Arrow Functions

(x) => x * 2

var output = input.map((x)=>x*2);

The curse of `this`

function App() {
    this.clicked = false;

    var button = document.getElementById('button');
    button.addEventListener('click', function(evt) {
        this.clicked = true; //won't do what you think
    });
}

The `self` pattern

function App() {
    this.clicked = false;

    var button = document.getElementById('button');

    var self = this;
    button.addEventListener('click', function(evt) {
        self.clicked = true;
    });
}

Function binding

function App() {
    this.clicked = false;

    var button = document.getElementById('button');

    var callback = (function(evt) {
        this.clicked = true
    }).bind(this);

    button.addEventListener('click',callback);
}

function App() {
    this.clicked = false;

    var button = document.getElementById('button');
    button.addEventListener('click',()=>{
        this.clicked = true;
    });
}

Promises for Long Running Work

Pyramid of Doom

fs.readFile("file.txt", function(err, file) {
    db.fetchNames(function(err, names) {
        processFile(file, names, function(err, outfile) {
            fs.writeFile('file.txt',outfile, function(err, status) {
                console.log("we are done writing the file");
            })
        });
    })
});

What is a promise

var prom = makeSomePromise();
//value isn't ready yet
prom.then((value)=>{
    //do something with the value
})

fs.readFile("file.txt")
    .then((file) => {
        return db.fetchNames().then((names)=>{
            return processFile(file,names)
        })
    })
    .then((outfile)=>{
        return fs.writeFile('file.txt',outfile);
    })
    .then(()=>{
        console.log("we are done writing the file");
    });

In this way promises are much like traditional callbacks, but promises add a twist.. they can be chained.

Let's revisit our code from before.

Each of these functions must be called in order, and each depends on the result of the previous one. Using Promises we can do it like this instead.

Notice how the arrow functions make this nice and clean. Each then() callback returns a value. This value is passed to the next one so all of our functions can be easily chained.

Now you'll notice that the processFile command needs the result of the previous two values. But a promise only passes one value. Also, we don't care what order readFile and fetchNames happens in. We just want to know when both are completed. We can do that with Promise.all

var proms = filenames.map((name)=> readFile(name));
Promise.all(proms).then((files)=>{
    console.log(`we have ${files.length} files`);
});

Promise.all([
    fs.readFile("file.txt"),
    db.fetchNames()
])
.then((vals) => processFile(vals[0],vals[1]))
.then((outfile)=> fs.writeFile('file.txt',outfile))
.then(()=> console.log("we are done writing the file"));

Promise.all([
    fs.readFile("file.txt"),
    db.fetchNames()
])
.then((vals) => processFile(vals[0],vals[1]))
.then((outfile)=> fs.writeFile('file.txt',outfile))
.then(()=> console.log("we are done writing the file"))
.catch((e) => {
    console.log("some error happened");
})
.then(()=> console.log("we are done either way"));

function makePromise(foo,bar) {
    return new Promise((resolve, reject) => {
        try {
            //do long stuff
            resolve(value);
        } catch {
            reject(error);
        }
    });
}

Of course promises only work if the APIs we call actually use them. Fortunately lots of libraries are starting to switch over to promises. However, while we wait we can make our own promises too. We do it with the Promise object constructor

It takes two values: resolve and reject. each of these are callback functions. Inside you do whatever you need to do that takes a long time, even if it involves multiple callbacks. When you are completely done invoke resolve() with the final value. this will then be sent the the first 'then' clause of whatever uses your promise.

If something bad happens and you want to reject the value, then instead of throwing an error you can use reject() and you can pass whatever alternate value you want.

var url = "http://api.silly.io/api/list/"
              +"e3da7b3b-976d-4de1-a743-e0124ce973b8?format=json";

var xml = new XMLHttpRequest();
xml.addEventListener('load', function() {
    var result = JSON.parse(this.responseText);
    console.log(result);
});
xml.open("GET",url);
xml.send();

function doGet(url) {
    return new Promise((resolve,rej)=>{
        var xml = new XMLHttpRequest();
        xml.addEventListener('load', function() {
            var result = JSON.parse(this.responseText);
            resolve(result);
        });
        xml.addEventListener('error',function(error) {
            reject(error);
        });
        xml.open("GET",url);
        xml.send();
    });
}

var url = "http://api.silly.io/api/list/"
    +"e3da7b3b-976d-4de1-a743-e0124ce973b8?format=json";
doGet(url).then((obj)=>{
    console.log(obj);
});

var url = "http://api.silly.io/api/list/"
            +"e3da7b3b-976d-4de1-a743-e0124ce973b8?format=json";
fetch(url).then((obj) => {
    console.log(obj);
});

Promises are awesome

Four good parts

better vars: const and let
better strings: Template Literals
better functions: Arrow Functions
better async: Promises

Array

var values = [1,2,3,4,5,6,7,8,9,10];

values.forEach((x)=>console.log(x));
var doubled = values.map((x) => x*2);

//find all values that match the filter
var evens = values.filter((x)=>x%2==0);

//true if at least one item matches
var any = values.some((x) => x > 10);

//find the first that matches
var six = values.find((x) =>  x >= 6);
//find the index of the first that match
var index = values.findIndex((x) =>  x >= 6);
//reduce the array to a single value
var sum = values.reduce((a,b) => a+b, 0);

var obj = {
    first:'Alice',
    middle:'N',
    last:'Wonderland',
    age:8,
    height:45,
}
Object.keys(obj).forEach((key)=>{
    console.log("key = ", key);
    console.log("value = ", obj[key]);
});

Things to definitely avoid for now

Destructuring
Modules
Default Parameters
Spread Operator

Destructuring. This lets you pull values out of an object by name. it can be useful in a few situation, but the best use i've found is extracting functions from modules. Unfortunately modules are still a mess and don't work the same everywhere, so avoid for now.

Now, when I wrote original this presentation modules were still problematic without using a transpiler to work in systems that don't support modules yet, and Node didn't support the new modules syntax. However, as of a few weeks ago Node and the browser have moved forward, so it's worth looking into modules now. The next time I give this presentation I think it'll be time to add modules.

Along with destructuring you can ignore tricks like default parameters, and the spread operator. I find these to only be useful when you are doing heavy functional programming.

Things to definitely avoid for now

Symbols
Generators and Iterators
Weak Maps and Weak Sets
Proxies

Class Syntax

class Foo extends Bar {
    constructor(stuff) {
        super(stuff);
        this.first = "first name"
    }
    doStuff() {
    }
    doMoreStuff() {
    }
}

async / await syntax

function getJSON() {
    //return a promise
}
const makeRequest = async () => {
  console.log(await getJSON())
  return "done"
}
makeRequest()

Can I Use them now

caniuse.com

Code for the future

Transpilers
Babel
Webpack
React JSX

However, even if your audience uses older browsers you don't have to wait.

In the past we would say: wait until x% of the user audience can support this. Today, we say: code for the future and let a compiler worry about the past. simplest way to use babel or web pack.

A transpiler is a compiler that converts Javascript to a different form of Javascript.

If you are using a react setup then you are already using a transpiler. If you aren't using react then just google for babel or webpack starter kit.

using these in your code will make your code better and prepare for the future. as tools and browsers mature you won’t need to change your code. just one day you’ll be able to drop the transpiler step.

Also, if you are shipping a JS app then you'll want to have a compile step anyway because you can add in code linters, minimizers, and compressors that check for errors and optmize your code before it's downloaded by your users.

Thank you!

developer.mozilla.org
@joshmarinacci
jmarinacci@mozilla.com
josh@josh.earth

ES6: The Good Parts

josh@josh.earth

Mozilla Dev Rel

What is ES6?

Why ES6 matters

Too much new

Let's be useful instead

Four good parts

The Problems with Variables

Variables always vary

Function Scoping

Hoisting

Hoisting

A better way

const and let

const

let

let

Template Literals: Super Strings

Multi-line Strings

Template Strings

HTML Templates

Arrow Functions

Good

Better

Best

Arrow Functions

Arrow Functions

Arrow Functions

The curse of this

The self pattern

Function binding

Arrow Functions are Awesome

Promises for Long Running Work

Pyramid of Doom

What is a promise

Promises are awesome

Four good parts

Bonus Features

Array

Things to definitely avoid for now

Things to definitely avoid for now

Class Syntax

async / await syntax

Can I Use them now

caniuse.com

Code for the future

Thank you!

`const` and `let`

`const`

`let`

`let`

The curse of `this`

The `self` pattern