ES2020 Features!

BigInt

Arbitrary precision integers 📖.

const theBiggestInt = 9007199254740991n;

const alsoHuge = BigInt(9007199254740991);
// ↪ 9007199254740991n

const hugeButString = BigInt('9007199254740991');
// ↪ 9007199254740991n

import

"function-like" import() module loading syntactic. 📖

<!DOCTYPE html>
<nav>
  <a href="books.html" data-entry-module="books">Books</a>
  <a href="movies.html" data-entry-module="movies">Movies</a>
  <a href="video-games.html" data-entry-module="video-games">Video Games</a>
</nav>

<main>Content will load here!</main>

<script>
  const main = document.querySelector("main");
  for (const link of document.querySelectorAll("nav > a")) {
    link.addEventListener("click", e => {
      e.preventDefault();

      import(`./section-modules/${link.dataset.entryModule}.js`)
        .then(module => {
          module.loadPageInto(main);
        })
        .catch(err => {
          main.textContent = err.message;
        });
    });
  }
</script>

import.meta

metaproperty for holding host-specific metadata about the current module 📖.

(async () => {
  const response = await fetch(new URL("../hamsters.jpg", import.meta.url));
  const blob = await response.blob();

  const size = import.meta.scriptElement.dataset.size || 300;

  const image = new Image();
  image.src = URL.createObjectURL(blob);
  image.width = image.height = size;

  document.body.appendChild(image);
})();

nullish coalescing

nullish coalescing operator ?? 📖.

const response = {
  settings: {
    nullValue: null,
    height: 400,
    animationDuration: 0,
    headerText: '',
    showSplashScreen: false
  }
};

const undefinedValue = response.settings.undefinedValue ?? 'some other default'; // result: 'some other default'
const nullValue = response.settings.nullValue ?? 'some other default'; // result: 'some other default'
const headerText = response.settings.headerText ?? 'Hello, world!'; // result: ''
const animationDuration = response.settings.animationDuration ?? 300; // result: 0
const showSplashScreen = response.settings.showSplashScreen ?? true; // result: false

optional chaining

Chaining is now optional 📖.

obj?.prop       // optional static property access
obj?.[expr]     // optional dynamic property access
func?.(...args) // optional function or method call

Promise.allSettled

All of the promises are settled 📖.

const urls = [ /* ... */ ];
const requests = urls.map(x => fetch(x));

const results = await Promise.allSettled(requests);

const successfulPromises = results.filter(p => p.status === 'fulfilled');

const errors = results
  .filter(p => p.status === 'rejected')
  .map(p => p.reason);

String.prototype.matchAll

matchAll 📖

let regexp = /t(e)(st(\d?))/g;
let str = 'test1test2';

let array = [...str.matchAll(regexp)];

console.log(array[0]);
// ["test1", "e", "st1", "1"]

console.log(array[1]);
// ["test2", "e", "st2", "2"]

globalThis

%GlobalThisValue% 📖.

> globalThis
<ref *1> Object [global] {
  global: [Circular *1],
  clearInterval: [Function: clearInterval],
  clearTimeout: [Function: clearTimeout],
  setInterval: [Function: setInterval],
  setTimeout: [Function: setTimeout] {
    [Symbol(nodejs.util.promisify.custom)]: [Function (anonymous)]
  },
  queueMicrotask: [Function: queueMicrotask],
  clearImmediate: [Function: clearImmediate],
  setImmediate: [Function: setImmediate] {
    [Symbol(nodejs.util.promisify.custom)]: [Function (anonymous)]
  }
}

epxort ns from

export ___ from "module" 📖.

export * as ns from "mod";

for-in enhancements

For-in enumeration order 📖.

var o = {
  p1: 'p1',
  p2: 'p2',
  p3: 'p3',
};

var keys = [];
for (var key in o) {
  if (key === 'p1') {
    o.p4 = 'p4';
  }
  keys.push(key);
}

assert.compareArray(keys, ['p1', 'p2', 'p3']);
With ♥ Hemanth.HM