Javscript: What's New in 2019

Published on May 11, 2019

New # private fields

class SuperHero {
  #name;
}

Now If you try

const ironMan = new SuperHero();
ironMan.#name
// Syntax Error

New inheritance super()

class Hulk extends SuperHero {
  color = "green";

  // no need to call constructor
  smash() {
    console.log("smashing");
  }
}

New string.matchAll

let string = "Favorate GitHub repos: ts39/ecma262 v8/v8.dev ";
let regex = /\b(?<owner>[a-z0-9]+)\/(?<repo>[a-z0-9\.]+)\b/g;
for (const match of string.matchAll(regex)) {
  console.log(`${match[0]} at ${match.index} with '${match.input}'`);
  console.log(`-> owner: ${match.groups.owner}`);
  console.log(`-> repo: ${match.groups.repo}`);
}

// Output:
// ts39/ecma262 at 23 with 'Favorate GitHub repos: ts39/ecma262 v8/v8.dev '
// -> owner: ts39
// -> repo: ecma262
// v8/v8.dev at 36 with 'Favorate GitHub repos: ts39/ecma262 v8/v8.dev '
// -> owner: v8
// -> repo: v8.dev

New Big int

// With out Big int
console.log(11212121238489989349982323 * 123);
// output: 1.3790909123342687e+27

// by suffix `n`
console.log(11212121238489989349982323n * 123n);
// output: 1379090912334268690047825729n

New Array.flatMat()

// map
[1, 3, 5].flatMat(x => [x, x + 1]);
// [[1,2], [3,4],[5,6]]

[1, 3, 5].flatMat(x => [x, x + 1]);
// [1, 2, 3, 4, 5, 6]

New Object.fromEntries

const arr = [
  ["x", 13],
  ["y", 10],
  ["z", 34]
];
console.log(Object.fromEntries(arr));

// output
// { x: 13, y: 10, z: 34 }

// Also maps

const map = new Map({ name: "Hulk", weight: "1400 lbs" });

console.log(Object.fromEntries(map));

// output:
// { name: 'Hulk', weight: '1400 lbs' }

Global this

// For all enviroments (eg: Node, Chrome, etc...)

const theGlobalthis = globalThis;

// on chrome

console.log(theGlobalthis);
// Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, …}

Intl APIs

To Localize your websites

/** Intl.RelativeTimeFormat **/
const rtf = new Intl.RelativeTimeFormat("en", { numeric: "auto" });

// input <number, 'second' | 'minute' | 'hour' | 'day' | 'week' | 'month' | 'year' >
rtf.format(-1, "day");
rtf.format(0, "day");
rtf.format(1, "day");

// output:

// "yesterday"
// "today"
// "tomorrow"

// you can use any language

const rtf = new Intl.RelativeTimeFormat("en", { numeric: "auto" });

rtf.format(2, "hours");

// 2 గంటల్లో

Optional Catch block

// Old
try {
   ...
} catch(error) {
   ...
}
// New
try {
   ...
} catch {
   ...
}

Ref:

https://github.com/tc39/proposals