JavaScript Tutorial

This JavaScript tutorial is crafted for beginners to introduce them to the basics and advanced concepts of JavaScript. By the end of this guide, you'll reach a proficiency level that sets the stage for further growth. Aimed at empowering you to progress towards becoming a world-class software developer, this tutorial paves the way for a successful career in web development and beyond.

ECMAScript 2018
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('abcd@domain.com')[0]:  </div>
   <script>
      const lookBeind = /(?<=@)\w+/;
      document.getElementById("output").innerHTML += 
	  lookBeind.exec('abcd@tutorialspoint.com')[0]; // Prints domain
   </script>
</body>
</html>
Output
lookBeind.exec('abcd@domain.com')[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('Hello\nprogrammers'):  </div>
   <script>
      const strRegex = /Hello.programmers/s;
      document.getElementById("output").innerHTML += 
	  strRegex.test('Hello\nprogrammers');
   </script>
</body>
</html>
Output
strRegex.test('Hello\nprogrammers'): 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}
﻿
﻿
﻿
﻿
﻿
﻿

Javascript Basics

JavaScript Operators

JavaScript Control Flow

JavaScript Functions

JavaScript Objects

Object Oriented JavaScript

JavaScript Versions

JavaScript Cookies

JavaScript Browser BOM

JavaScript Web APIs

JavaScript Events

JavaScript Tutorial

ECMAScript 2018

New Added Features in ECMAScript 2018

JavaScript Asynchronous Iteration

Example

Output

New features of the RegExp() object

Unicode Property Escapes (\p{...})

Example

Output

Lookbehind Assertions (?<= ) and (?<! )

Example

Output

Named Capture Groups

Example

Output

s (dotAll) Flag

Example

Output

JavaScript Promise finally()

Example

Output

JavaScript Rest Object Properties

Example

Output