Starting in 2015, JavaScript has received annual specifications revisions, contributing new and exciting capabilities to the language.

In June of 2022, the JavaScript team introduced several brand-new features for JavaScript developers. After debuting in 1997, the ES2022 is the 13th iteration of the features. In addition, those aspects of ES2022 that pass the stage 4 verification process will be included in the JavaScript language. Having made it to Stage 4, the features have been authorized by TC-39, tested, and successfully implemented in at least two different environments. For those who are unaware, a proposal goes through four distinct phases, with the last phase signifying its completion.

This post will go further into the approving body and the process that led up to the approval. A new version of the ECMAScript standard, including any authorized additions or modifications since the previous edition, is made available annually. Since several features have already reached stage 4 and will be included in the specification, we will also take a peek at what’s to come.

What is ECMAScript?

Source link – https://www.telerik.com/blogs/six-steps-for-approaching-the-next-javascript 

Some languages, such as JavaScript, adhere to ECMAScript, which is a standard general-purpose programming language. It is the original programming language from which Javascript and Node.js were developed for use in web browsers. The ECMA, or European Computer Manufacturers’ Association, is a group that sets norms for many types of electronics and computing devices.

ECMA is responsible for standardizing a number of programming languages, including JavaScript, Dart-lang, and C#. ECMAScript is like JavaScript but without the need for a server. The most common places to run JavaScript are web browsers and Node.js. The language is expanded with these settings’ new application programming interfaces (APIs). For instance, the fs module in Node.js and the browser window object are good examples. Remove all third-party APIs from these platforms, and you have ECMAScript. Web Apps Generator

The following code snippet demonstrates several fundamental ECMAScript capabilities:

// Core ECMAScript

const student_name = “James Miller”;

const age = 20;

let fromHoward = false

if (student_name === “James Miller”){

    fromHoward = true

}

It transforms into browser-side Javascript when used in a web browser.

document.addEventListener(“DOMContentLoaded”, function () {

    const student_name = “James Miller”;

    const age = 20;

    let fromHoward = false

    if (student_name === “James Miller”){

        fromHogwarts = true

    }

    document.getElementById(“content”).innerHTML = JSON.stringify({

        “name”: student_name, 

        age, 

        “from howard”: fromHoward

    })

});

What Organization is Responsible for the Development of ECMAScript?

Solution: TC39 (Technical Committee 39).

The group responsible for JavaScript’s development is called TC39. Companies make up its membership (among others, all major browser vendors). Regular meetings are held for TC39, and both member representatives and outside specialists are welcome to participate. The sessions are recorded, and the minutes are posted online so anybody can get a feel for how TC39 operates.

TC39 member is sometimes used to refer to a person (including in this article)—a representative of a TC39 member firm.

It’s worth noting that decisions in TC39 are made by consensus, meaning that a significant majority must agree and no one must strongly oppose forcing a veto. Likewise, agreements provide binding responsibilities for numerous participants (including the need to roll out new features, etc.).

Break Down the TC39 Procedure

The following are the phases of development that every ECMAScript feature proposal goes through, beginning with stage 0. Ecma TC39, the group in charge of improving and simplifying ECMAScript, has produced several standards that have aided the development of the JS community. TC39 approval is required for advancement from one phase to the next.

Source link- https://twitter.com/rauschma/status/867288986133377024 

Stage 0: Strawman  

It is a formless suggestion box for ECMAScript’s future development. Only TC39 members or non-members who have signed up as contributors to TC39 may submit work.

What must be done? The document is then uploaded to the page containing Stage 0 proposals after being considered during a TC39 meeting (source).

Stage 1: Proposal 

Source link- https://github.com/tc39/how-we-work 

A formal proposal at this level identifies a specific issue or general requirement, proposes a direction for the solution, and highlights obstacles such as “cross-cutting” problems with other features or complex implementation.

Which steps must be taken? First, a “champion” must be chosen to take the lead on the proposal. The winner or one of the co-winners has to be a part of TC39. In writing, an in-depth explanation of the issue that the proposal will address must be provided. In order to explain the solution, you must include examples, an application programming interface (API), and an explanation of the solution’s semantics and methods. Finally, relationships with other features and implementation difficulties should be noted as possible roadblocks to the proposal. Polyfills and demonstrations are necessary for a successful deployment.

After this, what will happen? When a proposal is accepted for stage 1, TC39 indicates its openness to review, discussion, and possible input. Large-scale revisions to the idea are to be anticipated in the future.

Stage 2: The Draft

This is an early draft of what will eventually be included in the standard. In all likelihood, this enhancement will be included in the standard soon. The first version of the proposal was written in the ECMAScript language for the standard.

What steps to take further? A formal definition of the feature’s syntax and semantics is now required in the proposal (using the formal language of the ECMAScript specification). While a to-do list or placeholder text is acceptable, a thorough explanation is preferred. The functionality requires two experimental implementations; however, one of them may be in a transpiler like Babel.

After this, what will happen? From now on, we should only anticipate minor shifts, only little ones.

Stage 3: Candidate

At this point, the proposal is almost complete but still open to changes based on input from actual implementations and end users. When no more changes to the specification are made, and no external comment is received, the proposal is considered final.

The requirements document has to be fully fleshed out. The spec wording must be approved by the ECMAScript spec editor and designated reviewers (selected by TC39, not by the champion). Finally, at least two implementations (which need not be activated by default) must be spec-compliant.

After this, what will happen? From now forward, adjustments will be made only in reaction to serious problems discovered during the usage of the implementations.

Stage 4: Finished  

Ultimately, the proposal is complete and will be included in the current specification version and sent along with the next revision.

All of the following components must be in place before a proposal may reach this stage:

  • Acceptance Tests 262 (approximately, unit tests for the language segment, formed in JavaScript).
  • Two options are ready for production and can meet all requirements and testing.
  • Comprehensive field experience with the implementations.
  • The editor of the ECMAScript standard must approve the final version of the specification before it is released.

What will occur next? The ECMAScript standard will be updated to include this proposal as soon as feasible. The annual confirmation of the specification incorporates the idea into the standard.

In other words, a proposal becomes a sure certainty for inclusion in the standard once it reaches stage 4. Therefore, its inclusion in the next ECMAScript version is probable, albeit not sure (it may be prolonged). So, stop calling the suggested modifications (such new features) “ES7 features” or “ES2016 features.” Instead, here are a few materials that have proven to be a hit among JavaScript developers:

An improvement called “foo” was proposed for ECMAScript. In the first section, the article provides a high-level overview of the proposal process as it is right now.

Functionality in ES.stage2 is identified as “foo.”

At this point, we are confident in referring to a proposal as an ES20xx feature, although we still advise waiting for confirmation from the spec editor. Object.observe, for instance, was a proposed ECMAScript extension that got as far as stage 2 before being abandoned.

Additional reading material on the ECMA and TC39 procedure

To begin, we may go to the ecma262 (ECMA-262 is the ID of the ECMAScript standard) GitHub repository. The latest version of the ECMAScript Language Specification, ECMA-262, may be found in this repository.

You may see the processed, human-readable version of this source below. Also, read the code with its history in searchfox if you’re curious about the specification’s development process.

The following items are included in this repository:

We advise you to parse and understand this TC39 procedure paper to fully grasp how the ECMA committee works by consensus and has the authority to make changes to the standard as it deems suitable. Nonetheless, the standard procedure for revising the specification remains the same.

The Most Important Lessons Learned from the TC39 Procedure:

Once a year, the TC39 process updates the ECMAScript definition.

Points to keep in mind with regard to TC39:

  • TC39 is an inclusive organization of ECMA International members dedicated to improving JavaScript.
  • When it comes to the ECMAScript standard, TC39, and the community work together to keep it up-to-date and relevant.
  • There are five well-defined steps in the TC39 process that enable revisions to the ECMAScript definition.
  • Any revision to the standard requires TC39 approval at each TC39 procedure level.
  • There are annual updates to the standard.
  • Stage 0 is the very first suggestion for a modification or addition to the standard.
  • In Stage 1, you’ll submit a formal proposal that specifies the issue and proposes an approach to fixing it.
  • Stage 2 is a working version of the proposal outline.
  • In the 3rd Stage, the manuscript is almost complete but still open for final comments.
  • The final Stage occurs when the proposed specification is finalized and included in the subsequent edition.

Now that we’ve thoroughly covered our options for incorporating ES features, we can move on to investigating ECMAScript 2022. It’s been out for a while, and if you’ve used it, you know that it provides a lot of cool new features.

These enhancements are wonderful; they will help us streamline some aspects of our code while also raising the bar for the rest. So what are we waiting for, pals? Let’s have a look at them.

Significant New Capabilities in ES2022!

Source link – https://codingbeautydev.com/blog/es13-javascript-features/ 

Top-level await

You may use the await operator to wait for a Promise’s value to be fulfilled. However, its sole appropriate place of usage is inside an asynchronous function or at the module root.

Hey guys, how do you enjoy utilizing it? Most programmers find that it improves the elegance and intuitiveness of developing asynchronous programming.

// Old Style

const getUserInfoOld = () => {

  return fetch(‘/getUserId’)

    .then((userId) => {

      return fetch(‘/getUserInfo’, { body: JSON.stringify({ userId }) })

        .then((userInfo) => {

        return userInfo

      })

    })

}

// await Style  

const getUserInfo = async () => {

  const userId = await fetch(‘/getUserId’)

  const userInfo = await fetch(‘/getUserInfo’, {

    body: JSON.stringify({ userId })

  })

  return userInfo

}

While the async function provided a convenient wrapping for the wonderful await mechanism, this was only sometimes the case. Since ES2022 was introduced, we can utilize it in contexts other than the async function.

const mockUserInfo = () => {

  return new Promise((resolve) => {

    setTimeout(() => {

      resolve({

        userName: ‘Roni’

      })

    }, 1000)

  })

}

const userInfo = await mockUserInfo()

// Can we print out { userName: ‘Roni’ } please?

console.log(userInfo)

This is a terrific addition that opens up a whole world of possibilities for us.

Class declarations fields

Invoking a function Object() { [native code] } was mandatory if you wanted to define a field in a class, right? Never again. You don’t need to use the function Object() { [native code] } anymore to define the class field.

class hello{

fields=0;

title;

}

There should no longer be any syntax errors when using this.

Private functions and fields

Try this out if you want to create a private class: The # prefix will make this possible.

class hello{

fields=0;

#title;

}

The latest enhancements to JavaScript are fantastic, no doubt.

Class fields that are static and private static methods

A static class field is one that is only accessible in the prototype of the class. As in ES2022, we’ll be able to use the term “static” to specify static class fields and private static features.

class hello {

name;

static title=’here’;

static get title(){

return title;

}

}

The “static” keyword is used for cloning, fixed settings, and catching.

Regexp match indices 

With this new, fourth-generation ES2022 JavaScript feature, the letter “d” may be used to indicate a need for both the initial and final indices of the string being matched against. It was previously impossible to do this. A string-matching procedure could only obtain index information.

For the matching set to be retrieved

You may do this using Regexp.exec, which will produce a String with the results in a comma-separated list.

const animals=’Birds:budgie,sparrow,eagle’

const regex=/(budgie)/gd;

const matches=[…fruits.matchAll(regex)];

matches[0]

That’ll provide you with an iterator with matchAll.

Safeguarding private fields with ergonomic brand inspections

Accessing an unknown public field resulted in an undefined error in earlier releases. Like trying to access a protected field, doing so would result in a fatal error.

Thankfully, ES2022 is here to save the day and make your life much simpler. For example, you can easily determine if a field exists in a given class by using the “in” operator. Even in individual lessons, this function will be made accessible.

class hello{

name;

#title;

get #title(){

return #title;

}

set #title(){

#title=null;

}

static hasTitle(obj1){

return #title in obj1;

}

}

Error.cause

Let’s go to the bottom of the cause of the issue for subclasses of the Error. This helps us locate the problem efficiently in deeply nested functions with chained error sections.

function readFiles(filePaths) {

  return filePaths.map(

    (filePath) => {

      try {

        // ···

      } catch (error) {

        throw new Error(

          `While processing ${filePath}`,

          {cause: error}

        );

      }

    });

}

Using the.at() indexing function

In the past, we used square brackets to get individual items from an array. Unless a reverse iteration (i.e., negative indexing) was necessary, the procedure was straightforward. However, with negative indexing, you have to look at the string’s length to figure out where to start. By using the.at() method, we have been able to streamline this procedure.

array= [1.2.4.5]

console.log(array[array.length-1]);

console.log(array.at(-1));

For indexes starting at 0,.at() will work like regular square brackets. This is because the.at() method will begin the iteration at the end if a negative index is provided.

Temporal function

Stage 3 ES2022 JavaScript will have this capability, eventually replacing libraries like Moment.js. In the event that a Date object fails, a Temporal will be used instead. Akin to the Unix timestamp function, its use will be ubiquitous. The temporal function is going to be a worldwide variable that provides a first-rate identifier for APIs dealing with timestamps and dates. Dates, time zones, calendars, and timestamps will all be part of the temporal operation.

Final Thoughts

The age of Web app development is here, and it’s a thrilling moment to be involved. Every day, new options become available. We hope that this JavaScript and ECMAScript-related data was helpful to you. Programming with JavaScript is like drinking coffee; it’s our favorite language. It is modeled after the ECMAScript standard. Developing a scripting language is a skill that may be picked up by reading the ECMAScript specification. Reading the JavaScript reference manual is a great way to gain knowledge about scripting languages.

Front-end developers have access to several JavaScript frameworks. Angular and React remain popular. All component-based JS frameworks operate similarly. Runtime output is based on the UI definition template. Nonetheless, Framework syntaxes differ. For example, react uses JSX, a DSL that blends JavaScript with HTML-like components. Vue uses HTML directives. In addition, angular and Svelte have different file formats.

And as a full-stack JavaScript development firm, you absolutely must be well-versed in all of these features. This will aid in your professional development as a programmer and provide a hand down the line when it comes to writing code that improves the project’s efficiency.