Ce se mai întâmplă cu JavaScript în 2022

Vara asta primim o nouă versiune ECMAScript, denumită ES2022, care va include ultimele actualizări din JavaScript. Deși o mare parte din ele erau deja prezente in browser-ele existente, abia acum avem parte de o lansare oficială.

Hai să explorăm împreună ce este nou în lumea web-ului și în limbajul care o domină.

1. Class members

Pe măsură ce devine mai matur, pare că JavaScript devine din ce în ce mai object oriented, pentru că de-acum avem și class members. Mă refer la un soi de instance variables, împreună cu ceva access modifiers și keyword-ul static.

class Person {

  // instance variables
  firstName;
  lastName;
  #address;

  constructor(firstName, lastName, address) {
    this.firstName = firstName;
    this.lastName = lastName;
    this.#address = address;
  }

 
  // static method
  static doSomethingStatic() {
    console.log("Some static method executed");
  }

  // static private method
  static #doSomethingPrivateStatic() {
    console.log("Method should not be accesible");
  }
}

Dacă mă întrebi pe mine, abordarea pentru a face anumite câmpuri sau metode private, anume folosirea simbolului “#”, nu e una prea fericită.

Mi se pare că din moment ce a fost introdus deja keyword-ul static, la fel de bine se putea și private. Dar asta e doar o părere personală, poate și una subiectivă, din cauza faptului că sunt obișnuit cu limbaje ca Java sau C#.

2. Array.at()

O nouă metodă pentru a căuta elemente într-un array în funcție de index.

const arr = [1, 2, 3];
// vs arr[arr.length - 1]
const element = arr.at(-1); // unde -1 e index-ul elementului

O metodă care va face codul mult mai clar și va ajuta cu reducerea de bug-uri.

Față de modalitatea anterioară de a face asta, e o îmbunătățire considerabilă și sunt de părere că mai multe limbaje ar trebui să adopte o metodă similară. Dar stai, cele mai multe limbaje au deja o sumedenie de abstractizări peste array care fac deja lucrurile extrem de ușoare.

Din păcate, în JavaScript Array joacă rolul oricărui fel de colecții sau enumerații.

3. Object.hasOwn()

De-acum va fi mult mai simplu să verifici dacă un object literal conține o proprietate, sau un câmp anume.

const person = {
  firstName: "Ion",
  lastName: "Popescu",
};

// es2022
const hasOwn = Object.hasOwn(person, "fullName");

// before es2022
const hasOwnProperty = Object.prototype.hasOwnProperty.call(person, "fullName");

Deși puteai să faci asta și până acum, faptul că trebuia să accesezi internele prototipului nu o făcea chiar cea mai prietenoasă abordare.

4. Error.cause

Un lucru care din totdeauna mi s-a părut că lipsește în JavaScript este o modalitate corespunzătoare de tratare a erorilor.

De-acum o să avem în Error câmpul cause pentru a transmite și sursa unei erori, atunci când vrem să o aruncăm mai sus pe stack.

// sursa inițială a erorii
const callApi = () => {
  throw new Error("Not found");
};

// prinde eroarea și o aruncă cu un alt mesaj și cu sursa inițială
const doSomething = () => {
  try {
    callApi();
  } catch (e) {
    throw new Error("Api call failed", { cause: e });
  }
};

try {
  doSomething();
} catch (e) {
  console.log(e.cause);
}

5. Top level awaits

În mod cert ai văzut cel puțin o dată eroarea asta super enervantă: Cannot use await outside of async function

și trebuia să faci aiureli de genul:

(async () => {
    await ...
    // ceva cod
})();

De-acum nu mai e nevoie să faci asta, poți chema direct funcții asincrone. Poți scrie cele 2 linii de mai jos oriunde și va funcționa fără probleme.

const todos = await fetch("https://jsonplaceholder.typicode.com/todos/1");
const json = await todos.json();

6. Regex match indices

Partea asta e destul de mică dar utiă, zic eu, pentru oamenii care procesează string-uri destul de des, sau au nevoie să facă ceva validări pe baza lor.

E vorba de adăugarea /d unui regex pentru a obține și indecșii între care se regăsesc elementele rezultate.

const regex = /test/dg;
const text = "this is a test for testing new regex feature";

const result = [...text.matchAll(regex)];

Cu codul de mai sus, o să obții în result 2 elemente care vor conține la rândul lor și indecșii între care se regăsește cuvântul “test” în fraza respectivă.

Cam astea sunt cele mai semnificative schimbări pe care ES2022 le aduce, deși unele din ele nu par atât de importante, e totuși un pas înainte.