DEV Community

Cover image for What's new in ES2022? 🤔

What's new in ES2022? 🤔

Jasmin Virdi on March 05, 2022

Soon the new version of ECMA Script will become standard in few months. So let's take a glimpse at the features that will be part of ES2022. ...
Collapse
 
baraa_baba profile image
Baraa Baba

I will miss arr[arr.Length -2]

Collapse
 
jasmin profile image
Jasmin Virdi

True 😅

Collapse
 
maxart2501 profile image
Massimo Artizzu

... or not! 😅

Collapse
 
blessinghirwa profile image
Blessing Hirwa

I didn't like this one. It could mislead me sometimes 😂/

Collapse
 
ardunster profile image
Anna R Dunster

Don't worry, you can still use it if you want ;)

Collapse
 
adnane_ch profile image
Adnane Chaikhi

hhhhhhhhhhhhhhhhh

Collapse
 
idabdellah profile image
Mohamed ID-ABDELLAH

so true hahahahah

Collapse
 
atulcodex profile image
🚩 Atul Prajapati 🇮🇳

Ohh wow

Collapse
 
jasmin profile image
Jasmin Virdi

Thanks👍

Collapse
 
mindplay profile image
Rasmus Schultz

What is error.cause for?

Normally, the cause of the error is what I would put in the error message. I mean, what else would you put there?

Why do we need another field for that?

I don't know of any other language that has two text messages in the same exception. What for? 🤷‍♂️

Collapse
 
abea profile image
Alex Bea

The error message might sometimes be used for a public-facing message. You could then put more technical information in the cause as well. That's my guess, at least.

Collapse
 
mindplay profile image
Rasmus Schultz

Ah, mystery solved!

2ality.com/2021/06/error-cause.html

It's for chaining errors - like the "inner exception" you have in many other languages.

Because you can throw anything in JS, the property type isn't specified as Error - but the intention is similar.

Thread Thread
 
jasmin profile image
Jasmin Virdi

Thanks for attaching this link for reference. 🙂

The way this would be super helpful is in deeply nested functions with chained errors.
Like if we have mutiple try catch block inside a deeply nested function so we pass the string as the purpose of that block and cause as the argument of catch block. For example:

function deeplyNested() {
  try {
    // outer block logic.

    let appData = [{...}]
    // app data array parsing.
    appData.map(
      (data) => {
        try {
          // ···
        } catch (error) {
          throw new Error(`While processing ${data}`, {
            cause: error
          });
        }
      });
  } catch (error) {
    throw Error('Error while processing outer block', {
      cause: error
    });
  }
}

Enter fullscreen mode Exit fullscreen mode
Collapse
 
mindplay profile image
Rasmus Schultz

That sounds unlikely?

At least, I've never heard of anyone using exceptions for display purposes - exceptions generally do contain technical information, they are usually intended for developers, not for users. How would you deal with localization, for instance... That's just not what exceptions are for...

Collapse
 
juvpengele profile image
Juvenal PENGELE • Edited

I may be wrong but I do not think this is correct "For static data we have Static fields and Static Blocks that are executed every time a new instance is created.".

Static blocks are evaluated once during Class definition not every time a new instance is created.
When a new instance is created, it is the code in the construction that is executed.

Collapse
 
jasmin profile image
Jasmin Virdi • Edited

Yes you are right, static blocks are executed when a class is created not in case of instance. Updated the statement.

Thanks👍

Collapse
 
brettz9 profile image
Brett Zamir

Informative post, thank you. There is apparently an error in the output listed for matchObj.indices.groups however which should instead by an object keyed by group.

Collapse
 
jasmin profile image
Jasmin Virdi

Hey,

Actually, I included the full output which is an array having an object keyed by group.

I should’ve included just the groups output for more clarity.
Thanks for pointing out buddy!😀👍

Collapse
 
brettz9 profile image
Brett Zamir

This is what I see as the output showing on the page:

matchObj.indices.groups;
/*
Output -
[0,4]
*/
Enter fullscreen mode Exit fullscreen mode

There's no object showing there...

Thread Thread
 
jasmin profile image
Jasmin Virdi • Edited

I was referring to the snippet just above this one 😅
I should’ve returned the full object instead of returning just the indices.

Updated the post. Thanks 👍

Collapse
 
ironcladdev profile image
Conner Ow

Top-level await is what I've been waiting for forever!!

Can't wait for these to come out!!

Collapse
 
sanidz profile image
sanidz • Edited

flatMap operator is alternative but sure its nice to have

Collapse
 
stereoplegic profile image
Mike Bybee

I'm very excited for being able to use the top level await examples you gave (minus the lodash part).

Collapse
 
jasmin profile image
Jasmin Virdi

😁

Collapse
 
jiimaho profile image
Jim Aho

Can you give an example as of why?

/ C# dude here

Collapse
 
mat3uszkek profile image
Mateusz Skrobiś

superb post, thanks.

Collapse
 
jasmin profile image
Jasmin Virdi

🙂

Collapse
 
lico profile image
SeongKuk Han

Thank you for sharing the post. :)

Collapse
 
jasmin profile image
Jasmin Virdi

🙂

Collapse
 
sahan profile image
Sahan

Thanks for the breakdown. Nicely written too 👏

Collapse
 
jasmin profile image
Jasmin Virdi

Thanks👍

Collapse
 
zyabxwcd profile image
Akash

Short and crisp. Thumbs up for that but one minor feedback though, it would have been great if practical/possible use cases around it would have been shown or told on top of the syntax. Cheers!

Collapse
 
jasmin profile image
Jasmin Virdi • Edited

Thanks for sharing the feedback. Will definitely work on it. 🙌

Collapse
 
jwp profile image
John Peters

Excellent summary Tx.

Collapse
 
jasmin profile image
Jasmin Virdi

Thank you! 👍🏻

Collapse
 
steveplays profile image
Steveplays

Great post Jasmin! Very informative.

Collapse
 
jasmin profile image
Jasmin Virdi

Thank you! 👍

Collapse
 
macadoshis profile image
Saad BENBOUZID

Laughing in typescript

(JK, very interesting !)

Collapse
 
qq449245884 profile image
qq449245884

Dear Jasmin Virdi,may I translate your all dev articles into Chinese?I would like to share it with more developers in China. I will give the original author and original source.

Collapse
 
jasmin profile image
Jasmin Virdi

Hey,

Sure please go ahead. Do tag me in the post so that I can see it too!👍

Collapse
 
arthur322 profile image
Arthur Conrado de Lima

Excellent article! Thanks!

Collapse
 
yeasin2002 profile image
Md Kawsar Islam Yeasin

Wow Thanks ❤️

Collapse
 
jasmin profile image
Jasmin Virdi

🙂

Collapse
 
alenmorgan profile image
Alen Morgan

I had so much fun learning with you. Your lessons were very insightful and interactive, so thank you.

Collapse
 
jasmin profile image
Jasmin Virdi

Glad to hear 😄

Thanks for going through my articles👍

Collapse
 
msp99000 profile image
Manpreet Singh

Really useful, honestly learned new features. Thanks

Collapse
 
jasmin profile image
Jasmin Virdi

Thanks👍

Collapse
 
sem1colons profile image
Youssef Abdulaziz

Thanks a lot, appreciate your time

Collapse
 
jasmin profile image
Jasmin Virdi

🙂

Collapse
 
sachiicoding profile image
sachiicoding

Great job jasmin.. its very nice for students like me..

Collapse
 
jasmin profile image
Jasmin Virdi

Thanks 👍

Collapse
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
jasmin profile image
Jasmin Virdi • Edited

Hey,

It is index based that is why the element at 3rd index would be 4 as per what is mentioned in the example 🤔

Collapse
 
romulocintra profile image
romulocintra:dev

That's a nice summary please looking forward to see you around TC39 Educators call @jasmin github.com/tc39/js-outreach-groups

Collapse
 
jasmin profile image
Jasmin Virdi

Hey,

Thank you soo much. Can you please share more details about this?😅

Collapse
 
romulocintra profile image
romulocintra:dev

Hello, you can fill a form there github.com/tc39/js-outreach-groups then I can invite you for our next meeting :)

Thread Thread
 
jasmin profile image
Jasmin Virdi

Thank you so much!
Filled the form!🙂

Collapse
 
code_rabbi profile image
Emeka Orji

In all these, I guess I will be using Array.at(index) more.

Collapse
 
shaun0703 profile image
Shaun47

Hi jess hun how are you?

Collapse
 
blackjyn profile image
ZVHR El Ekhsaan

All we need is actually implementation of ES4. That way, not only it solves many problems, we also dont need TypeScript__

Collapse
 
blackjyn profile image
ZVHR El Ekhsaan

All we need is actually implementation of ES4. That way, not only it solves many problems, we also dont need TypeScript

Collapse
 
oanouman profile image
Martial Anouman

Great summary. Thanks

Collapse
 
gers2017 profile image
Gers2017

why did they chose # to declare private properties? I don't love the syntax tbh but I guess is better than nothing

Collapse
 
darwinphi profile image
Darwin Manalo

I'm still waiting for the pipe operator 🙈🙈

Collapse
 
syedmeesamali profile image
syedmeesamali

pipe? I was sure it would be there ....

Collapse
 
leob profile image
leob

Looks more like an incremental upgrade, nothing revolutionary here ...

Collapse
 
akuoko_konadu profile image
Konadu Akwasi Akuoko

Thanks for writing this 😘
I really love your theme 🤩🔥, please what theme is it?

Collapse
 
jasmin profile image
Jasmin Virdi

Thank you 👍🏻
I have used JS code blocks which does the Javascript style highlighting.

Collapse
 
1link profile image
1Link.Fun

So, we can use await in any where, no need to wrap in an async method?

Collapse
 
elijahtrillionz profile image
Elijah Trillionz

await without async functions 🤪 that's really a good one.
Also can't wait for the array find-from-last object.

Collapse
 
krishnapankhania profile image
Krishna Pankhania

Amazing
Image description

Collapse
 
odeh profile image
Odeh

Array.at(-1)

Collapse
 
serenawilliams profile image
SerenaWilliams

how to access a private field from outside of the class ? wazifa to marry someone you love

Collapse
 
zhengzheren profile image
zhengzheren

hi there?

Collapse
 
mikmik1011 profile image
Misa Stefanovic

bruh, isn't .at(3) literally the same thing as [3]

i swear to god js is just becoming the huge pile of this random stupid functions