JavaScript ES2020 Yeni Özellikleri

JavaScript ES2020 versiyonundaki yer alan yeni propozallar sonunda kesinleşti, birlikte basit örneklerle bakalım.

Maalesef “private class properties” propozalı hala 3. aşamada ve görünüşe göre ES11 (ES2020)’nin bir parçası olmayacaktır.

Propozal Listesi:
1. BigInt
2. Optional Chaining
3. String matchAll
4. Dynamic Import
5. Promise allSettled
6. Nullish Coalescing
7. globalThis

BigInt

Şimdiye kadar bir değerde tutabileceğiniz en büyük integer 9007199254740991'idi, ordan sonra biraz tuhaf davranışlara şahit olabiliyorduk:

const max = Number.MAX_SAFE_INTEGER;
console.log(max);  // 9007199254740991
console.log(max + 1); // 9007199254740992 
console.log(max + 2); // 9007199254740992 
console.log(max + 3); // 9007199254740994 
console.log(Math.pow(2, 53) == Math.pow(2, 53) + 1); // true

ES2020 BigInt sayesinde artık daha fazla sayıları işleyebiliriz, büyük verilerde, veri işlemede yararlı olacaktır. sayının sonuna ’n’ eklemeniz yeterlidir.

const bigNum = 100000000000000000000000000000n; 
console.log(bigNum * 2n); // 200000000000000000000000000000n

Optional Chaining

Optional chaining operatörü "?.” zincirdeki property’lerin özellikle geçerli olup olmadığını kontrol etmeden, zincirin dibindeki property’nin değerini gönül rahatlığıyla okumamıza izin veriyor. Normal nokta zincirleme operatörü “.” gibi çalışır, fakat, eğer zincirde bir nullish (null veya undefined) üye varsa, hata vermektense, bütün expression undefined dönüyor. fonksiyon çağrılarıyla kullanınca, fonksiyon mevcüt değilse, undefined döner.

— MDN çeviri

Örneklere baklım:

if (a && a.b && a.b.c) a.b.c(); // ne kadar da çirkin

ES2020'deki ve çoktan TypeScript’te olan Optional Chaining ile bu işlemi daha da kolaylaştırabiliriz:

const adventurer = {
  name: 'Alice',
  cat: {
    name: 'Dinah'
  }
};
const dogName = adventurer.dog.name;
// error ve program durdurulması
const dogName = adventurer.dog?.name;
console.log(dogName);
// undefined
console.log(adventurer.olmayanMetod?.())
// undefined

Puf noktalarımız:

// bracket accessor
let nestedProp = obj?.['propName'];
// sakın sol tarafta kullanim deme
object?.property = 1; // Uncaught SyntaxError
// array accessor
let arrayItem = a.arr?.[42];
// önemli not: short-circuit olduğunu unutmayın
// undefined döndüğü yerden sonrası çalışmaz
let potentiallyNullObj = null;
let x = 0;
let prop = potentiallyNullObj?.[x++];
console.log(x); // hala 0

String matchAll

Benim gibi RegEx sevenler için çok mutlu edici bir özellik. “.match” metodunun bi tık daha detaylısı, iterator dönüyor ve g flag olmazsa exception atar.

let regexp = /t(e)(st(\d?))/g;
let str = 'test1test2';
// to array (belki Array.from daha iyi olabilir)
let array = [...str.matchAll(regexp)];
console.log(array[0]);
// Array ["test1", "e", "st1", "1"]
console.log(array[1]);
// Array ["test2", "e", "st2", "2"]

Dynamic Import

Kod çalışırken başka bir modulu import yapmamızı sağlar. böylece gerekmeyen kodu yüklememiş oluruz.

...
const belkikullanmam = await import('./belkikullanmam.js');
console.log(belkikullanmam.fonksiyonum(5, 10));
...

Promise allSettled

Promise.allSettled metodu, promislerden oluşan bir array alıp, ve hepsi bitince resolve olur, içindeki promislerin nası bitmesi önemli değil, resolve veya reject, önemli olan bitmeleri.

race ve all önceden vardı, şimdi ise aartık "tüm promisleri çalıştır, sonuçları umrumda değil" de JavaScript’e geldi.

const promise1 = Promise.resolve(3);
const promise2 = new Promise((resolve, reject) => setTimeout(reject, 100, 'foo'));
const promises = [promise1, promise2];
Promise.allSettled(promises).
  then((results) => results.forEach((result) =>  console.log(result.status)));
// "fulfilled"
// "rejected"

Nullish Coalescing

Önceki derslerimizde || operatörüne baktık, sol taraf falsy olursa sağ tarafı döner.

// foo.bar faulsy ise 'default' gelsin
const a = foo.bar || 'default';

ama böylece foo.bar false veya 0 olsa da, yine ‘default’ dönecek. Nullish Coalescing ile bunu çözebiliriz, Nullish Coalescing, sadece sol taraf nullish (null veya undefined) ise, sağ tarafı döner.

const foo = 0 || 42;
console.log(foo);
// 42
const baz = 0 ?? 42;
console.log(baz);
// 0
const a = null ?? 'default';
console.log(a);
// "default"
// optional chaining ile default value vermek
const b = a.b?.c?.d ?? 'default value';
// güzel bişey dimi?

globalThis

Node, browser ve web-workers’te cross-platform JS kod yazarken global objeye ulaşmak zor olabilir. tarayıcılarda window, Node’da global, ve web-workerlar için self . başka runtimelarda da farklı olabilir.

ES2020 globalThis herzaman global objeyi referans eder, bütün ortamlarda window, global ve self yerine bunu kullanabilirsiniz.

// tarayıcılar için
globalThis.setTimeout === window.setTimeout // true

Bu yeni özellikler hakkında ne düşünüyorsunuz? umarım faydalı bir yazı olmuştur, bu bilgiyi arkadaşlarınızla da paylaşabilirsiniz.