Skip to content

Instantly share code, notes, and snippets.

@ChrisBAshton
Created April 11, 2016 12:08
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ChrisBAshton/482be0d95a6d21523e03f21271dc8460 to your computer and use it in GitHub Desktop.
Save ChrisBAshton/482be0d95a6d21523e03f21271dc8460 to your computer and use it in GitHub Desktop.
My personal highlights from the new ES6 standard

Amazing levels of awesomeness

These are the features I've wished JavaScript always had, and can't wait to start using.

Classes

class Shape {
    constructor (id, x, y) {
        this.id = id
        this.move(x, y)
    }
    move (x, y) {
        this.x = x
        this.y = y
    }
}

Class Inheritance

class Rectangle extends Shape {
    constructor (id, x, y, width, height) {
        super(id, x, y)
        this.width  = width
        this.height = height
    }
}
class Circle extends Shape {
    constructor (id, x, y, radius) {
        super(id, x, y)
        this.radius = radius
    }
}

Generator functions (like blocks in Ruby)

function* range (start, end, step) {
    while (start < end) {
        yield start
        start += step
    }
}

for (let i of range(0, 10, 2)) {
    console.log(i) // 0, 2, 4, 6, 8
}

Object Property Assignment (JSON merging)

var dst  = { quux: 0 }
var src1 = { foo: 1, bar: 2 }
var src2 = { foo: 3, baz: 4 }
Object.assign(dst, src1, src2)
dst.quux === 0
dst.foo  === 3
dst.bar  === 2
dst.baz  === 4

String searching

"hello".startsWith("ello", 1) // true
"hello".endsWith("hell", 4)   // true
"hello".includes("ell")       // true
"hello".includes("ell", 1)    // true
"hello".includes("ell", 2)    // false

Promises

function msgAfterTimeout (msg, who, timeout) {
    return new Promise((resolve, reject) => {
        setTimeout(() => resolve(`${msg} Hello ${who}!`), timeout)
    })
}
msgAfterTimeout("", "Foo", 100).then((msg) =>
    msgAfterTimeout(msg, "Bar", 200)
).then((msg) => {
    console.log(`done after 300ms:${msg}`)
})

Constants

const PI = 3.141593

Arrow Function Expression Bodies

odds  = evens.map(v => v + 1)

Lexical this

this.nums.forEach((v) => {
    if (v % 5 === 0)
        this.fives.push(v)
})

Default Parameter Values

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

Template Literals

var card = { amount: 7, product: "Bar", unitprice: 42 }
message = `Hello ${customer.name},
want to buy ${card.amount} ${card.product} for
a total of ${card.amount * card.unitprice} bucks?`

Computed Property Names

let obj = {
    foo: "bar",
    [ "baz" + quux() ]: 42
}

Hmm!

These are the features I'd like to try out, but could probably live without.

Blocked Scope Variables

for (let i = 0; i < a.length; i++) {
    let x = a[i]
    
}

Array Element Finding:

[ 1, 3, 4, 2 ].find(x => x > 3) // 4

Rest Parameter

function f (x, y, ...a) {
    return (x + y) * a.length
}

Value Export/Import

//  lib/math.js
export function sum (x, y) { return x + y }
export var pi = 3.141593

//  someApp.js
import * as math from "lib/math"
console.log("2π = " + math.sum(math.pi, math.pi))

//  otherApp.js
import { sum, pi } from "lib/math"
console.log("2π = " + sum(pi, pi))

Internationalization

// number formatting
var i10nEN = new Intl.NumberFormat("en-US")
var i10nDE = new Intl.NumberFormat("de-DE")
i10nEN.format(1234567.89) === "1,234,567.89"
i10nDE.format(1234567.89) === "1.234.567,89"

// currency formatting
var i10nUSD = new Intl.NumberFormat("en-US", { style: "currency", currency: "USD" })
var i10nGBP = new Intl.NumberFormat("en-GB", { style: "currency", currency: "GBP" })
var i10nEUR = new Intl.NumberFormat("de-DE", { style: "currency", currency: "EUR" })
i10nUSD.format(100200300.40) === "$100,200,300.40"
i10nGBP.format(100200300.40) === "£100,200,300.40"
i10nEUR.format(100200300.40) === "100.200.300,40 €"

//date formatting
var i10nEN = new Intl.DateTimeFormat("en-US")
var i10nDE = new Intl.DateTimeFormat("de-DE")
i10nEN.format(new Date("2015-01-02")) === "1/2/2015"
i10nDE.format(new Date("2015-01-02")) === "2.1.2015"
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment