“This is the 22nd day of my participation in the First Challenge 2022. For details: First Challenge 2022”

With THE release of ECMAScript 2022 coming in June, here are the four most important changes that are sure to come in ES2022! These features are now in phase 4 of the TC39 standardization release.

TC39 is part of Ecma International, a group of JavaScript developers, implementers, scholars, and others who work with the JavaScript community to maintain and develop the JavaScript standard.

Idle talk less Syria, blunt duck ~~

At () method

Finally! An at() method is added to the ES2022 array to devalue by index;

var a = [1, 2, 3]; 

a.at(1) // 2 

a.at(-1) // 3
Copy the code

We can get the last term by a.at(-1);

Before that, take the array/string and the last item looks like this:

// 3 const arr = [1,2,3,4] arr. Slice (-2)[0] // 3 const STR = "1234" STR [str.length-2] // '3' str.slice(-2)[0] // '3'Copy the code

While this is a small feature change, it greatly improves the readability of core array/string operations;

Error cause

🎉Error Cause is the first new feature proposal for JavaScript to reach Stage 4 led by a Chinese company representative (Alibaba TC39 representative Legendecas)!

The proposal is simply: rewrap the source of the Error;

try {
  doSomeComputationThatThrowAnError() 
} catch (error) {
  throw new Error('I am the result of another error', { cause: error })
}
Copy the code

Error Constructor adds an optional parameter, options, that sets cause and accepts any JavaScript value, which is assigned to the newly created Error. Cause.

Try {return await fetch('//unintelligible-url-a') // throw a low level Error. Catch (err => {throw new Error('Download raw ') resource failed', { cause: Err})} Catch (err) {console.log(err) console.log('Caused by', err.cause) // Error: Download raw resource failed // Caused by TypeError: Failed to fetch }Copy the code

The top await

The top-level await allows the developer to use an await field outside of an async function.

Before:

Await Promise. Resolve (the console. The log (' 🎉 ')); // → SyntaxError: await is only valid in async function (async function () {await promise.resolve (console.log('🎉')); / / - > 🎉}) ();Copy the code

ES2022:

Top-level await works at the top level of modules. (Still not supported in class code blocks or non-async functions.)

const serviceName = await fetch("https://example.com/what-service-should-i-use")
const service = await import(`/services/${serviceName}.js`)

// OR

const params = new URLSearchParams(location.search);
const theme = params.get('theme');
const stylingFunctions = await import(`/styling-functions-${theme}.js`);
Copy the code

Conditional imports are also supported:

const date = new Date()

if(date.getFullYear() === 2023) {
  await require('/special-code-for-2023-year.js')
}
Copy the code

To learn more

Private properties and methods

The concept of classes was first introduced in ES6, but it is far less developed than object-oriented languages. Some new features will be added to JS, such as private properties and methods;

They are marked with #, and when accessed outside the class, an error is reported;

class Human {
  #name = "John";
  
  setName(name) {
    this.#name = name;
  }
}

const human = new Human()
human.#name = 'Amy'  // ERROR!
human.setName('Amy') // OK
Copy the code
class Human {
  name = "John";
  
  constructor(name) {
    this.#setName('Amy') // OK
  }
  
  #setName(name) {
    this.name = name;
  }
}

const human = new Human()
human.#setName('Amy') // ERROR!
Copy the code

OK, above, is the share ~~ enough concise ~~

I’m Nuggets Anthony, output exposure input, technical insight into life, goodbye ~