ES2016+ (http://kangax.github.io/compat-table/esnext/)

01. trimming and padding.js

// 1. trimming and padding
// https://github.com/tc39/proposal-string-left-right-trim
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/TrimLeft
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/padStart

console.log("  123  ".trim() === "123"); // true
console.log("  123  ".trimStart() === "123  "); // true
console.log("  123  ".trimEnd() === "  123"); // true

console.log("123".padStart(6, "0")); // 000123
console.log("123".padStart(2, "0")); // 123
console.log("123".padStart(10, "foo")); // foofoof123
console.log("123".padStart(6, "foobar")); // foo123

console.log("123".padEnd(6, "0")); // 123000
console.log("123".padEnd(2, "0")); // 123
console.log("123".padEnd(10, "foo")); // 123foofoof
console.log("123".padEnd(6, "foobar")); // 123foo

02. object.js

// 2. Object.entries(), Object.values()
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/entries

console.log(Object.keys({ a: 1, b: 2 })); // ["a", "b"]

console.log(Object.values({ a: 1, b: 2 })); // [1, 2]

for (let [key, value] of Object.entries({ a: 1, b: 2 })) {
  console.log(`${key}: ${value}`); //a: 1, b: 2
}

03. optional catch.js

// 3. catch without (e)
// http://2ality.com/2017/08/optional-catch-binding.html

let jsonData;
try {
    jsonData = JSON.parse(str);
} catch {
    jsonData = {};
}
  
// available only in Babel 7

04. flatMap.js

// 04. flatten, flatMap
// http://2ality.com/2017/04/flatmap.html
console.log([[1, 2], [3, 4]].flatten()); // [1,2,3,4]

console.log([1, [2, 3], [4, 5]].flatten()); // [1,2,3,4,5]

console.log([1, [2, 3], [4, 5], [[6], [7,8]]].flatten()); // [1,2,3,4,5,[6],[7,8]]

console.log([1, [2, 3], [4, 5], [[6], [7,8]]].flatten(2)); // [1,2,3,4,5,6,7,8]

console.log([{ a: 1, b: 2 }, { a: 3, b: 4 }].flatMap(i => [i.a, i.b])); // [1,2,3,4]

// only works with arrays, doesn't work with iterables or array-like objects

console.log(["abc", "def"].flatten()); // stays ["abc", "def"] and not ["a", "b", "c", "d", "e", "f"]

console.log([["abc", "def"]].flatten()); // becomes ["abc", "def"] and stays ["abc", "def"] even if you try set depth to 2+

// ------------------------------------
function f() {
  console.log([arguments].flatten(2));
}

f([1], 2, 3); // [Arguments([1], 2, 3)]

05. global.js

// 5. global
// http://2ality.com/2016/09/global.html

window.a = {b: "foo"};

console.log(window.a); // { b: "foo" }
console.log(global.a); // { b: "foo" }
console.log(window === global); // true;
console.log(window.a === global.a); // true;

06. dynamic import.js

// 6. import()
// http://2ality.com/2017/01/import-operator.html

// ----------------------------------------------------------
// first.mjs
import fs from "fs";
import mkdirp from "mkdirp";

// .. 100 loc

import("./second").then(function (module) {
  // first time in second module
  console.log(typeof module); // object
  console.log(typeof module.default); // function
  console.log(module.FOO); // bar
  module.foo("baz"); // baz/bar
  new module.default(); // in ctor
});

import("./third").catch(function (err) {
  console.error(err); // Error: Cannot find module ./third
});

let module2 = await import("./second"); // module2 === module on line 11


// ----------------------------------------------------------
// second.mjs
console.log("first time in second module");

export const FOO = "bar";
export function foo(arg) {
  console.log(`${arg}/${FOO}`);
}

export default class {
  constructor() {
    console.log("in ctor");
  }
}

07. class fields.js

// 7. fields in classes
// http://2ality.com/2017/07/class-fields.html

class A {
  instanceProp = "foo";
  static staticProp = "bar";
  instanceFn = () => 2;
  instanceFn2 = () => this.instanceProp;
}

console.log(new A().instanceFn()); // 2
console.log(new A().instanceFn2()); // foo

// -----------------------------------
// order doesn't matter
function f(i) {
  console.log("in init", i);
  return i;
}

class B {
  foo = f(1);
  constructor() {
    console.log("in ctor", this.foo, this.foo2);
  }
  foo2 = f(2);
}

new B(); // in init 1, in init 2, in ctor 1 2

08. promise finally.js

// 8. Promise.finally
// https://github.com/tc39/proposal-promise-finally

function f() {
  console.log("in finally");
}

Promise.resolve().then(f, f); // in finally

Promise.resolve().finally(f); // in finally

// ------------------------------------------------
function f2(res) {
  console.log("in f2", res);
  return 42;
}

let res1 = await Promise.resolve(1).then(f2, f2); // in f2 1
console.log(res1); // 42!!!

let res2 = await Promise.resolve(1).finally(f2); // in f2 undefined
console.log(res2); // 1!!!

09. regex named groups.js

// 9. Regex named groups
// https://github.com/tc39/proposal-regexp-named-groups

let reg1 = /(\d{4})-(\d{2})-(\d{2})/;
let res1 = reg1.exec("2015-01-02");

console.log(res1[0]); // 2015-01-02
console.log(res1[1]); // 2015
console.log(res1[2]); // 01
console.log(res1[3]); // 02

let reg2 = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/;
let res2 = regex.exec("2015-01-02");

console.log(res2.groups.year); // 2015
console.log(res2.groups.month); // 01
console.log(res2.groups.day); // 02

// -------------------------------------------------------------
let reg3 = /^(\d+)---\1$/;
console.log(reg3.test("123---123")); // true
console.log(reg3.test("123---1234")); // false
console.log(reg3.test("123---223")); // false

let reg4 = /^(?<left>\d+)---\k<left>$/;
console.log(reg4.test("123---123")); // true
console.log(reg4.test("123---1234")); // false
console.log(reg4.test("123---223")); // false

10. for await of.js

// 10. for await of
// https://github.com/tc39/proposal-async-iteration

for await (let line of readLines(filePath)) {
  console.log(line);
}

async function* readLines(path) {
  let file = await fileOpen(path);

  try {
    while (!file.EOF) {
      yield await file.readLine();
    }
  } finally {
    await file.close();
  }
}

11. dotAll.js

// 11. dotAll
// http://exploringjs.com/es2018-es2019/ch_regexp-dotall-flag.html

console.log(/^.$/.test('\n')); // false
console.log(/^.$/s.test('\n')); // true

12. incoming

Stage 1 & 2:
https://github.com/tc39/proposal-throw-expressions
https://github.com/wycats/javascript-decorators
https://github.com/tc39/proposal-pipeline-operator
https://github.com/tc39/proposal-optional-chaining
https://github.com/tc39/proposal-nullish-coalescing
https://github.com/keithamus/proposal-object-freeze-seal-syntax
https://github.com/tc39/proposal-string-replace-all

Nice!