”;
The ECMAScript 2018 version of JavaScript was released in 2018. ECMAScript 2017 introduced singnificant enhancement to the language. Two important features introduced in this version are asynchronous iteration for improved handling of asynchronous operations, and promise finally() to execute code regardless of promise resolution. This chapter will discuss all the new added features in ECMAScript 2018.
New Added Features in ECMAScript 2018
Here are the new methods, features, etc., added to the ECMAScript 2018 version of JavaScript.
- Asynchronous iteration
- New features of the RegExp() Object
- Promise.finally()
- Rest object properties
Here, we have explained each feature in detail.
JavaScript Asynchronous Iteration
You can also use the ”await” keyword with the for loop to make asynchronous iterations.
For example, you are iterating multiple promises, and in each iteration, you need to stop the code execution until the current promise gets resolved or rejected.
Example
In the below code, we have defined the async generator function named gen_function. The gen_func() function makes 5 iterations using the loop. In each iteration, it awaits to resolve the promise and returns p.
In the test() function, we used the ”await” keyword with the for loop to make asynchronous iterations. It updates the output after every 0.5 seconds.
<html>
<body>
<div id = "demo"> </div>
<script>
const output = document.getElementById("demo");
// Generator function
async function* gen_function() {
for (let p = 0; p < 5; p++) {
await new Promise(res => setTimeout(res, 500));
yield p;
}
}
async function test() {
for await (const ele of gen_function()) {
output.innerHTML += "Returned element is: " + ele + "<br>";
}
}
test();
</script>
</body>
</html>
Output
Returned element is: 0 Returned element is: 1 Returned element is: 2 Returned element is: 3 Returned element is: 4
New features of the RegExp() object
In ECMAScript 2018, the following four new regular expression features were introduced −
- Unicode Property Escapes (p{…})
- Lookbehind Assertions (?<= ) and (?<! )
- Named Capture Groups
- s (dotAll) Flag
Unicode Property Escapes (p{…})
The Unicode property escape allows you to escape the Unicode character. You need to represent the Unicode in the curly braces followed by the ”p”.
Example
In the below code, we use the regular expression to check whether the tet contains the letter using the Unicode property access.
<html>
<body>
<div id = "output1">regex.test(''Y''): </div>
<div id = "output2">regex.test(''6''): </div>
<script>
const regex = /p{Letter}/u; // To Match letters only
document.getElementById("output1").innerHTML += regex.test(''Y''); // true
document.getElementById("output2").innerHTML += regex.test(''6''); // false
</script>
</body>
</html>
Output
regex.test(''Y''): true
regex.test(''6''): false
Lookbehind Assertions (?<= ) and (?<! )
The Lookbehind assertion allows you to find a particular subpattern followed by a particular sub patter. The positive look-behind assertion is equal to ?<=, and the negative look-behind assertion is ?<!.
Example
In the below code, we are looking for a word after the ”@” using the look behind the assertion. It finds words after the ”@” pattern.
<html>
<body>
<div id = "output">lookBeind.exec(''[email protected]'')[0]: </div>
<script>
const lookBeind = /(?<=@)w+/;
document.getElementById("output").innerHTML +=
lookBeind.exec(''[email protected]'')[0]; // Prints domain
</script>
</body>
</html>
Output
lookBeind.exec(''[email protected]'')[0]: tutorialspoint
Named Capture Groups
You can give a unique name to each group of the regular expression. The group names make it easy to extract the patterns from the string.
Example
In the code below, we have defined the regular expression to match the date pattern. Also, we have named the groups” year, month, and day.
After that, we extracted the year from the date using the group name.
<html>
<body>
<div id = "output">The year of the date is: </div>
<script>
const datePattern = /(?<year>d{4})-(?<month>d{2})-(?<day>d{2})/;
const match = datePattern.exec(''2023-08-22'');
document.getElementById("output").innerHTML += match.groups.year;
</script>
</body
</html>
Output
The year of the date is: 2023
s (dotAll) Flag
The ”.” (dot) character matches any character except the new line in a regular expression. If you also want to match the new line using the ”.” Character, you need to use the ”/s” flag, as shown in the example below.
Example
In the below code, we have added the ”.” Character in the regular expression pattern to match any character, and also added s flag.
In the output, you can see that ”.” character also matches with the ”n”.
<html>
<body>
<div id = "output">strRegex.test(''Hellonprogrammers''): </div>
<script>
const strRegex = /Hello.programmers/s;
document.getElementById("output").innerHTML +=
strRegex.test(''Hellonprogrammers'');
</script>
</body>
</html>
Output
strRegex.test(''Hellonprogrammers''): true
JavaScript Promise finally()
You can use the finally() block with promises to execute the particular code after the promise gets resolved or rejected. It is similar to the try…catch…finally block.
Example
In the example below, we created the promise and stored it in the getData variable. The promise gets resolved after 1000 milliseconds.
After that, we use the ”then…finally”, block to execute the promise. In the output, you can observe that code of the ”finally” block always gets executed.
<html>
<body>
<div id = "output"> </div>
<script>
const getData = new Promise((res, rej) => {
setTimeout(() => {
res("Promise resolved!");
}, 1000);
});
getData
.then(result => {
document.getElementById("output").innerHTML += result + "<br>";
})
.finally(() => {
document.getElementById("output").innerHTML += "In the finally block!";
});
</script>
</body>
</html>
Output
Promise resolved! In the finally block!
JavaScript Rest Object Properties
You can use the spread operator while destructuring the objects. The spread operator allows you to collect the remaining properties in a single variable in the object format.
Example
In the example below, the numbers object contains 4 properties. While destructuring, we get the value of the num1 property and store other properties in the nums variable using the spread operator.
<html>
<body>
<div id = "output"> </div>
<script>
const numbers = {
num1: 40,
num2: 50,
num3: 80,
num4: 90,
}
const { num1, ...nums } = numbers;
document.getElementById("output").innerHTML =
"num1 = " + num1 + "<br>" +
"nums = " + JSON.stringify(nums);
</script>
</body>
</html>
Output
num1 = 40
nums = {"num2":50,"num3":80,"num4":90}
”;