ECMASCRIPT, ECMA

Standardized by a standards body called ECMA. Similar to  W3C.

Covers

• Language Syntax - parsing, keywords, operators
• Types - undefined, null, boolean, number, string, and object, symbol
• Prototypes and inheritance
• Built-in object and functions ( Math, Array etc )

Does not Cover

• HTML and CSS
• Dom
• NodeJS stdlib

Arrow

I make anonymous functions shorter.

ES5

ES6

const numbers = [1, 2, 3]
const squares = numbers.map(x => x * x)

const numbers = [1, 2, 3]
const squares = numbers.map(function (x) { 
    return x * x 
})

Arrow

More intuitive handling of current object context.

PROMISES

Now a standard feature.

Events vs Promises

Events are best used for actions that can happen multiple times on the same element.

EG click

Where promises help

ASYNCHRONOUS REQUESTS.
Where Tracking all successes and failures is CUMBERSOME 

EXAMPLE

The pyramid of doom

 step1(function (value1) {
     step2(value1, function(value2) {
         step3(value2, function(value3) {
             step4(value3, function(value4) {
                // yay
             });
         });
     });
 });
         

EXAMPLE

A more MANAGEABLE TOWER 

var step1 = new Promise(...);

step1.then(step2)
    .then(step3)
    .then(step4)
    .then((value4) => {
        // Do something with value4
    })
    .catch(function (error) {
        // Woot
        throw new Error('fatal error in promises:' + error.message)
});
        

ANALOGY NO. 1

eventually having a value at some indeterminable point in the future.

OBJECT.assign()

Extending things with other things into potentially new things

ES6

 var o1 = { a: 1 }
 var o2 = { b: 2 }

 // clone
 var copy = Object.assign({}, o1)

 // merge
 var obj = Object.assign(o1, o2)

ES5

ES6

const numbers = [1, 2, 3]
const squares = numbers.map(x => x * x)

const numbers = [1, 2, 3]
const squares = numbers.map(function (x) { 
    return x * x 
})

CLASSES

Example

 class Person {

    constructor(name) {
        this.name = name;
    }

    description() {
        return `My name is ${this.name}`
    }
}

Inheritance

Oh GOD WHY
( cue Hierarchical hell )

Title text
sample text

class Jerk extends Person {
    constructor(name) {
        super(name);
        this.jerk = true;
    }

    isJerk() {
        return this.jerk;
    }
}

DEFAULT PARAMETERS

Kinda neat

es5

es6

function f(x, y = 7, z = 42) {
    return x + y + z
}

function f (x, y, z) {
    if (y === undefined)
        y = 7;
    if (z === undefined)
        z = 42;
    return x + y + z;
}

DESTRUCTURING Assignment

Also kinda neat

es5

es6

var list = [ 1, 2, 3 ]

var [ a, , b ] = list

[ b, a ] = [ a, b ]



var list = [ 7 ]
var [ a = 1, b = 3, c = 5] = list
/*
a === 7
b === 3
c === undefined
*/
                

var list = [ 1, 2, 3 ]
var a = list[0], b = list[2]
var tmp = a
a = b
b = tmp