KISACA JS

2022 yılında ES13 ile JavaScript Diline Gelen Yeni Özellikler

JavaScript tarihçesi ile ilgili blog yazımı güncellerken ES11, ES12, ES13 ait JavaScript gelişmeleri anlatmadığımı farkettim. Bu blog ES13 gelen yeni özellikleri analiz edeceğiz.

ES13 2022 yılında JavaScript diline getirilen yenilik ve özellikler;

.at() function for Indexing
Array find from last
Error Cause
Await operator at the top-level
Class field declarations
Ergonomic brand checks for private fields
Class Static Block
.hasOwn()

1 .at() function for Indexing

Biz String, Array gibi Türlerde ilgili indexteki item veya char [index] üzerinden erişebiliyoruz. Bunun için artık .at() fonksiyonunu kullanabilirsiniz.

const arr = [100, 200, 300, 400];
arr[0]; arr.at(0); // 100
arr[-2]; arr.at(-2); // 300

const str = "ABCD";
str[-1]; str.at(-1); // 'D'
str[0]; str.at(0); // 'A'

2. Array find from last (findLast)

Array içerisinde arama yaparken find(), findIndex() bulunuyordu. Tersten arama yapmak için String.reverse deyip sonra aramanız gereken yapı için findLast() ve findLastIndex() fonksiyonları Array prototype eklenmiş.

3. Error Cause (cause)

Beklenmeyen davranış durumuna yardımcı olmak için hataların, o sırada ne olduğunu açıklamak için hata mesajları ve hata örneği özellikleri gibi bağlamsal bilgilerle güçlendirilmesi gerekir. Error nesnesindeki cause özelliği, hangi hatanın diğer hataya neden olduğunu belirlememize izin verir.

try {
  apiCall()
} catch (err) {
  throw new Error("New error message", { cause: err });
}

4. Await operator at the top-level (await)

Önceden await keyword sadece async blok içerisinde kullanabilirken ,

artık bunu bu context dışında top level’dan istediğiniz şekilde kullanabiliyorsunuz. Aşağıda bunun ile ilgili örnek kullanımlar mevcut.

//Dynamic Module Loading.
const strings = await import(`./example.mjs`);

//Fallback module Loading
let jQuery;
try {
  jQuery = await import("https://cdn-a.com/jQuery");
} catch {
  jQuery = await import("https://cdn-b.com/jQuery");
}

//Load module parallel...
const resource = await Promise.any([
  fetch("http://example1.com"),
  fetch("http://example2.com"),
]);

5. Class Field Declaration (#)

ES11 blog yazımızda 5nci bölümde Private Fields olarak anlattığımız kısım. Tekrar buradan okuyabilirsiniz. (Not: ES13 de ES11 deki değişiklikten farklı olarak ne yapıldığını tam anlamadım.Bu konuyu ilerleyen süreçte tekrar inceleyeceğim. (Proposal Linki)

6. Ergonomic brand checks for Private Fields (in)

Private field’lerin ilgili nesneye ait olup olmadığının kontrolünü yapabilmek için in keyword ile o objenin içerisinde olup olmadığını kontrol ediyor. Aşağıdaki resimde ilgili kısımların kontrollerini private prop üzerinden yapmaya imkan sağlamış

https://plainenglish.io/blog/latest-es13-javascript-features

7. Class Static Block

Class içerisinde static fonksiyonlar ve değişkenler tanımlamaya izin vermişti Şimdi de istediğiniz gibi static block vs tanımlamaya izin vermiş.

Aşağıdaki örnek bu sayfadan alıntıdır; https://plainenglish.io/blog/latest-es13-javascript-features

class Dictionary {
  static words = ["yes", "no", "maybe"];
}

class Words extends Dictionary {
  static englishWords = [];
  static #localWord = "ok";
  // first static block
  static {
    // link by super to the  Dictionary class
    const words = super.words;
    this.englishWords.push(...words);
  }
  
  // second static block
  static {
    this.englishWords.push(this.#localWord);
  }
}

console.log(Words.englishWords);
//Output -> ["yes", "no", "maybe", "ok"]

8.hasOwn

Object.prototype.hasOwnProperty fonksiyonu vardı fakat bunu prototype üzerinden kullanılması öneriliyordu. Bunun yerine direk Object üzerinden kullanılabilen .hasOwn fonksiyonu geliştirildi.

const object = { name: "Mark" };
Object.hasOwn(object, "name"); // true

const object2 = Object.create({ name: "Roman" });
Object.hasOwn(object2, "name"); // false
Object.hasOwn(object2.__proto__, "name"); // true

const object3 = Object.create(null);
Object.hasOwn(object3, "name"); // false

9 Regexp Match Indices

Regexp match üzerinden sadece kelimler üzerinden çalışırken artık ekstra indeks verisinede ulaşmak mümkün. Aşağıda /g /dg ile çağırdığımızda ekstra indekslerin geldiğini görebilirsiniz.