_2 Javascript versions

Details

 

ECMAScript

  • ES5 ( 2009 )
  • ES6 ( 2015 )
  • JS 2016
  • JS 2017
  • JS 2018
  • JS 2019
  • JS 2020
  • JS 2021
  • JS 2022

 

JS 2022

  • Method .at();
  • Object.hasOwn();
  • RegExp: match indices(‘d’ flag);
  • Error: .cause;
  • New members of Classes;
  • Private Slot Checks;
  • Top-level Await.
  • Method .at();

     

     

  • Object.hasOwn();

     

     

  • RegExp: match indices(‘d’ flag);

     

     

  • Error: .cause;

     

     

  • New members of Classes;

     

     

  • Private Slot Checks;

 

 

  • Top-level Await.

 

 

JS 2021

 

Some good detailed examples:

https://www.proposals.es/

 

See: https://www.w3schools.com/js/js_2021.asp

Promise.any([promise1, promise2])

const first = await Promise.any([prom1,prom2,prom3]);

String.replaceAll()

text = text.replaceAll("Cats","Dogs");
text = text.replaceAll("cats","dogs");

text = text.replaceAll(/Cats/g,"Dogs");
text = text.replaceAll(/cats/g,"dogs");

 

Numeric separators 

const num1 = 1_000_000_000;
const num2 = 1000000000;
document.getElementById("demo").innerHTML = (num1 === num2); 

 

 

JS 2020

Todo: Get examples of these

BigInt

JavaScript integers Number can only represent 15 digits.
A BigInt can store X digits.

let x = 9999999999999999;
let y = BigInt("9999999999999999");
document.getElementById("demo").innerHTML = x + "<br>" + y;


Integer and BigInt

10000000000000000
9999999999999999


text.matchAll(/Cats/gi)

let text = "I love cats. Cats are very easy to love. Cats are very popular."
const iterator = text.matchAll(/Cats/gi);

document.getElementById("demo").innerHTML = Array.from(iterator);

The JavaScript typeof a BigInt is "biting"

 

 

 

 

 

 

 

Dynamic Imports

Allows lazy loading

Load a module on demand at runtime.

 

// Static imports
// import { ... } from '...';

// ...

import('./module.mjs').then((module) => {
  // The exports are accessible through the module object
  module.myFunction();
});

 

button.addEventListener('click', async () => {
  const { myFunction } = await import('./module.mjs');
  myFunction();
});

 

 

 

JS 2019

 

 

 

 

 

 

 

 

 

 

 

JS 2018

 

Asynchronous Iteration

 

Promise Finally

 

let myPromise = new Promise();

myPromise.then();

myPromise.catch();

myPromise.finally();

 

Object Rest Properties

let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
x; // 1
y; // 2
z; // { a: 3, b: 4 }

 

New RegExp Features

 

  • Unicode Property Escapes (\p{...})
  • Lookbehind Assertions (?<= ) and (?<! )
  • Named Capture Groups
  • s (dotAll) Flag

 

JavaScript Shared Memory

 

Note: Put laborious work onto a Web Worker.

Note: Data is sent between the main thread and workers through messages.

 

Example

Let us name the files main.js and worker.js.

// main.js
var worker = new Worker('worker.js');

 

// main.js
var worker = new Worker('worker.js');worker.addEventListener('message', function(e) {
   console.log(e.data);
}

worker.postMessage('Happy Birthday');

Note: the data is copied and not shared.

 

// worker.js
self.addEventListener('message', function(e) {
 var message = e.data + 'to myself!';
 self.postMessage(message);
 self.close();
}

 

JavaScript Threads

In JavaScript you use the Web Workers API to create threads.

Worker threads are used to execute code in the background so that the main program can continue execution.

Worker threads run simultaneously with the main program. Simultaneous execution of different parts of a program can be time-saving.

JavaScript Shared Memory

Shared memory is a feature that allows threads (different parts of a program) to access and update the same data in the same memory.

Instead of passing data between threads, you can pass a SharedArrayBuffer object that points to the memory where data is saved.

SharedArrayBuffer

A SharedArrayBuffer object represents a fixed-length raw binary data buffer similar to the ArrayBuffer object.

JS 2017

 

 

The Object.entries() method returns an array of the key/value pairs in an object:

 

const person = {
 firstName : "John",
 lastName : "Doe",
 age : 50,
 eyeColor : "blue"
};

let text = Object.entries(person);
document.getElementById("demo").innerHTML = text;

//firstName,John,lastName,Doe,age,50,eyeColor,blue

 

The Object.values() method returns an array of values from an object:

 

const person = {
 firstName : "John",
 lastName : "Doe",
 age : 50,
 eyeColor : "blue"
};

let text = Object.values(person)
document.getElementById("demo").innerHTML = text;



// John,Doe,50,blue

 

 

 

  • JavaScript Object.getOwnPropertyDescriptors

 

 

JS 2016

  • JavaScript Exponentiation (**)
  • JavaScript Exponentiation assignment (**=)
  • JavaScript Array includes()

 

  • JavaScript Exponentiation (**)

JavaScript exponent is the same as Math.pow(x, y)

let x = 5;
let z = x ** 2;

 

 

  • JavaScript Exponentiation assignment (**=)

 

 

  • JavaScript Array includes()

Check if the fruit array contains "Mango":

 

const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.includes("Mango");

 

 

ES6 (2015)

 

 

 

 

 

 

 

 

 

 

 

 

ES5 ( 2009 )