ECMAScript 2019

❮ Previous Next ❯

JavaScript Version Numbers

Previous versions of ECMAScript were identified using numbers: ES5 and ES6.

Starting in 2016, the versions are named based on the year they are released: ES2016, 2018, 2020, and so on.

New Features in ES2019

String.trimStart()
String.trimEnd()
Object.fromEntries
Optional catch binding
Array.flat()
Array.flatMap()
Revised Array.Sort()
Revised JSON.stringify()
Separator symbols allowed in string litterals

Revised Function.toString()

Warning

These characteristics are quite recent.

Older web browsers might require a different code known as a Polyfill.

JavaScript String trimStart()

In 2019, JavaScript got a new method called trimStart() for handling strings.

The trimStart() function is similar to trim(), but it only deletes white spaces from the beginning of a string.

JavaScript String trimEnd()

ES2019 introduced a new method in JavaScript called trimEnd().

The trimEnd() function is similar to trim(), but it specifically removes any extra spaces from the end of a string.

JavaScript Object fromEntries()

JavaScript got a new method called fromEntries() in ES2019.

The fromEntries() function makes an object using pairs of keys and values from an iterable.

Optional catch Binding

In ES2019, you can leave out the catch parameter if you don't require it.

Example

Before 2019:

try {
// code
} catch (err) {
// code
}

After 2019:

try {
// code
} catch {
// code
}

JavaScript Array flat()

In ES2019, JavaScript got a new method called flat() for arrays.

The flat() function makes a fresh array by straightening out a nested array.

JavaScript Array flatMap()

ES2019 introduced the flatMap() method to JavaScript arrays.

The flatMap() function takes all items from an array, processes them, and then produces a single, flattened array.

Stable Array sort()

ES2019 updated the Array sort() method.

Before 2019, the rules permitted unpredictable sorting methods like QuickSort.

After 2019, web browsers need to use a consistent sorting method:

When arranging items based on their value, each item should stay in its original place relative to other items that have the same value.

In the example above, when sorting by price, the names should not appear in a different relative position like this:

X01 100
X03 100
X00 100
X03 100
X05 110
X04 110
X06 110
X07 110

Revised JSON.stringify()

ES2019 updated the JSON stringify() method.

Before 2019, JSON couldn't convert characters encoded with \ into strings.

Before the ES2019 version, when using JSON.stringify() on UTF-8 code points (U+D800 to U+DFFF), it resulted in incorrect Unicode characters such as ��.

Following this update, strings containing UTF-8 code points can be securely transformed using JSON.stringify() and reversed to their original form using JSON.parse().

Separator Symbols

Now, you can use symbols (\u2028 and \u2029) to separate lines and paragraphs in string expressions.

Prior to 2019, these were considered as line terminators and caused error exceptions:

Note

JavaScript and JSON now follow the same rules.

Before ES2019:

The code text = JSON.parse('"\u2028"') will be parsed to an empty string.

The code '"\u2028"' will result in a syntax error.

Revised Function toString()

ES2019 made changes to the Function's toString() method.

The toString() function gives back a text that shows the code of a function.

Starting in 2019, the toString() function is required to provide the source code of the function, encompassing comments, spaces, and syntax details.

Prior to 2019, various web browsers provided different versions of the function, some without comments and spaces. Starting in 2019, the function should be returned exactly as it is written.

<!DOCTYPE html>
<html>
  <body>
    <h1>JavaScript Strings</h1>
    <h2>The trimStart() Method</h2>
    <p id="demo"></p>
    <script>
      let text1 = "     Hello World!     ";
      let text2 = text1.trimStart();
      document.getElementById("demo").innerHTML = "Length text1 = " + text1.length + " <br> Length text2 = " + text2.length;
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <h1>JavaScript Strings</h1>
    <h2>The trimEnd() Method</h2>
    <p id="demo"></p>
    <script>
      let text1 = "     Hello World!     ";
      let text2 = text1.trimEnd();
      document.getElementById("demo").innerHTML = "Length text1 = " + text1.length + " <br> Length text2 = " + text2.length;
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <h1>JavaScript Objects</h1>
    <h2>The fromEntries() Method</h2>
    <p>The number of pears are:</p>
    <p id="demo"></p>
    <script>
      const fruits = [
        ["apples", 300],
        ["pears", 900],
        ["bananas", 500]
      ];
      const myObj = Object.fromEntries(fruits);
      document.getElementById("demo").innerHTML = myObj.pears;
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <h1>JavaScript Arrays</h1>
    <h2>The flat() Method</h2>
    <p id="demo"></p>
    <script>
      const myArr = [
        [1, 2],
        [3, 4],
        [5, 6]
      ];
      const newArr = myArr.flat();
      document.getElementById("demo").innerHTML = newArr;
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <h1>JavaScript Arrays</h1>
    <h2>The flatMap() Method</h2>
    <p id="demo"></p>
    <script>
      const myArr = [1, 2, 3, 4, 5, 6];
      const newArr = myArr.flatMap((x) => x * 2);
      document.getElementById("demo").innerHTML = newArr;
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <h1>JavaScript Stable Sort</h1>
    <p>From ES2019, browsers must use a stable sorting algorithm.</p>
    <p>When arranging items by a specific characteristic, they need to stay in the same order compared to other items with that same characteristic.</p>
    <p id="demo"></p>
    <script>
      const myArr = [{
        name: "X00",
        price: 100
      }, {
        name: "X01",
        price: 100
      }, {
        name: "X02",
        price: 100
      }, {
        name: "X03",
        price: 100
      }, {
        name: "X04",
        price: 110
      }, {
        name: "X05",
        price: 110
      }, {
        name: "X06",
        price: 110
      }, {
        name: "X07",
        price: 110
      }, {
        name: "X08",
        price: 120
      }, {
        name: "X09",
        price: 120
      }, {
        name: "X10",
        price: 120
      }, {
        name: "X11",
        price: 120
      }, {
        name: "X12",
        price: 130
      }, {
        name: "X13",
        price: 130
      }, {
        name: "X14",
        price: 130
      }, {
        name: "X15",
        price: 130
      }, {
        name: "X16",
        price: 140
      }, {
        name: "X17",
        price: 140
      }, {
        name: "X18",
        price: 140
      }, {
        name: "X19",
        price: 140
      }];
      myArr.sort((p1, p2) => {
        if (p1.price < p2.price) return -1;
        if (p1.price > p2.price) return 1;
        return 0;
      });
      let txt = "";
      myArr.forEach(myFunction);

      function myFunction(value) {
        txt += value.name + " " + value.price + " <br> "; 
      }
      document.getElementById("demo").innerHTML = txt;
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <h1>JavaScript JSON</h1>
    <h2>Revised stringify()</h2>
    <p id="demo"></p>
    <script>
      let text = JSON.stringify("\u26D4");
      document.getElementById("demo").innerHTML = JSON.parse(text);
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <h1>JavaScript Strings</h1>
    <p>Starting from ES2019, you can now use symbols to separate lines and paragraphs (\u2028 and \u2029) within string texts.</p>
    <p id="demo"></p>
    <script>
      let text = "\u2028";
      document.getElementById("demo").innerHTML = text;
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <h1>JavaScript Functions</h1>
    <h2>The toString() Method</h2>
    <p>The toString() method returns the function as a string:</p>
    <p id="demo"></p>
    <script>
      function myFunction(a, b) {
        return a * b;
      }
      document.getElementById("demo").innerHTML = myFunction.toString();
    </script>
  </body>
</html>

❮ Previous Next ❯

JavaScript Tutorial

JS Math

JS Versions

JS Objects

JS Functions

JS Classes

JS Async

JS HTML DOM

JS Browser BOM

JS Web APIs

JS AJAX

JS JSON

JS vs jQuery

JS Graphics