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 2017
The ECMAScript 2017 version of JavaScript was released in 2017. ECMAScript 2017 introduced a number of new features to the language. One the most notable features is async/await syntax which allows us to write asynchronous operations in a more synchronous style. It provided shared memory and atomics that enhances support for concurrent programming.
In this chapter, we will discuss all the new added features in ECMAScript 2017.
New Features Added in ECMAScript 2017
Here are the new methods, features, etc., added to the ECMAScript 2017 version of JavaScript.
padStart() and padEnd() methods
Object.entries() method
Object.values() method
JavaScript async and await
Object getOwnPropertyDescriptors() Method
JavaScript Shared Memory
Here, we have explained each feature in detail.
String Padding: padStart() and padEnd() methods
The ECMAScript 2017 introduced two string methods, padStart() and padEnd() methods, that allow you to add padding to the string at the start and end by adding a particular character. These methods are used to extend the string and achieve the desired length.
Example
In the below code, we have passed the desired string length as the first parameter of the padStart() and padEnd() method and the character as a second parameter.
However, you can also pass the string as a second parameter.
<html>
<body>
   <div id = "output1">After padding at the start: </div>
   <div id = "output2">After padding at the end: </div>
   <script>
      let base = "TurorialsPoint";
      let start_updated = base.padStart(18, "@"); // Padding at the start
      let end_updated = base.padEnd(18, "*");   // Padding at the end
      document.getElementById("output1").innerHTML += start_updated;
      document.getElementById("output2").innerHTML += end_updated;
   </script>
</body>
</html>
Output
After padding at the start: @@@@TurorialsPoint
After padding at the end: TurorialsPoint****
The Object.entries() Method
ECMAScript 2017 added Object.entries() method to objects. The Object.entries() method returns an iterator to traverse the key-value pair of the object.
Example
In the below code, the employee object contains three properties. We used the Object entries() method to get the iterator of the object.
After that, we used the for...of loop to traverse object properties using the iterator.
<html>
<body>
   <div id = "demo"> </div>
   <script>
      const output = document.getElementById("demo");
      const employee = {
         Company: "TutorialsPoint",
         Ex_company: "TCS",
         Experience: 4,
      }
      const emp_iterator = Object.entries(employee);
      for (let pair of emp_iterator) {
         output.innerHTML += pair + "<br>";
      }
   </script>
</body>
</html>
Output
Company,TutorialsPoint
Ex_company,TCS
Experience,4
The Object.values() Method
ECMAScript 2017 introduced Object.values() method to objects. The JavaScript Object.values() method is used to get the array of values of the object properties.
Example
In the below code, we used the Object.values() method to get all the values of the object in the array.
<html>
<body>
   <div id = "output">Object values are: </div>
   <script>
      const wall = {
         color: "blue",
         size: "15x12",
         paintBrand: "Asiant paints"
      }
      document.getElementById("output").innerHTML += 
	  " " + Object.values(wall);
    </script>
</body>
</html>
Output
Object values are: blue,15x12,Asiant paints
JavaScript async and await
The async and await keywords are added to the language in ECMAScript 2017. The async/await keywords are used to create asynchronous functions. The async keyword is used to create asynchronous functions, and await keyword handles the operations.
Example
The printMessage() function is asynchronous in the below code. We have defined a new promise inside the function and stored it in the getData variable.
The promise takes the time of 0.5 seconds to resolve. The ‘await’ keyword handles the promise and blocks the function code execution until the promise gets resolved.
<html>
<body>
   <div id = "output"> </div>
   <script>
      async function printMessage() {
         let getData = new Promise(function (res, rej) {
            setTimeout(() => { res("Promise resolved !!"); }, 500);
         });
         document.getElementById("output").innerHTML = await getData;
      }
﻿
      printMessage();
   </script>
</body>
</html>
Output
Promise resolved !!
The Object.getOwnPropertyDescriptors() Method
The Object.getOwnPropertyDescriptor() method returns the property descriptors for each property, such as writable, enumerable, configurable, value, etc. It is metadata for the object property.
Example
In the below code, we get the property descriptors for each property of the object using the getOwnPrpopertyDescriptors() method.
<html>
<body>
   <div id = "output">The Property descriptors of the wall object is: <br></div>
   <script>
      const wall = {
         color: "blue",
         thickness: 10,
      }
      document.getElementById("output").innerHTML += 
	  JSON.stringify(Object.getOwnPropertyDescriptors(wall));
   </script>
</body>
</html>
Output
The Property descriptors of the wall object is:
{"color":{"value":"blue","writable":true,"enumerable":true,"configurable":true},"thickness":{"value":10,"writable":true,"enumerable":true,"configurable":true}}
JavaScript Shared Memory and Atomics
In JavaScript, share memory allows multiple threads to share a memory, enabling efficient communication between multiple threads.
JavaScript is a single-threaded programming language. However, you can use the web workers to run the JavaScript code in the different threads.
In 2018, SharedArrayBuffer was introduced to share memory and perform atomic operations by sharing the data.
﻿
﻿
﻿

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 2017

New Features Added in ECMAScript 2017

String Padding: padStart() and padEnd() methods

Example

Output

The Object.entries() Method

Example

Output

The Object.values() Method

Example

Output

JavaScript async and await

Example

Output

The Object.getOwnPropertyDescriptors() Method

Example

Output

JavaScript Shared Memory and Atomics