Photo by John Salzarulo on Unsplash

KISACA JS

2021 yılında ES12 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 ES12 gelen yeni özellikleri analiz edeceğiz.

Frontend Development With JS
3 min readFeb 5, 2023

--

ES12 2021 yılında JavaScript diline getirilen yenilik ve özellikler;

  • Numeric Separators
  • String.prototype.replaceAll
  • Promise.any() and AggregateError
  • Logical Assignment Operators
  • Private Class Methods and Accessors

1. Numeric Separators ( _ )

Sayısal değerleri _ underscore ile daha okunabilir hale getirmeyi sağlayan bir özellikKa

Örneğin aşağıdaki rakamları inceleyelim. Sağ tarafta comment sonrası yazdığım rakamlar daha okunabilir.

const a=1000000000000; // 1,000,000,000,000
const b=1019436871.42 // 1,019,436,871.42

,. kullanımı dillere göre farklılık gösterebiliyor. Biz burada sadece rakamları formatlamak istediğimiz için aşağıdaki şekilde gösterim kod içerisindeki rakamların daha rahat okunabilmesini sağlıyor.

1_000_000_000_000
1_019_436_871.42

Tüm bunlar ile birlikte farklı numara tanımlamalarında da bu ayraçları kullanabilirsiniz.

let binary = 0b1010_0001_1000_0101; //
let hex= 0xA0_B0_C0;
let bigInt= 9_223_372_036_854_775_807n

2. String.prototype.replaceAll

String prototype yıllarca kendimiz replaceAll eklemiştik

String.prototype.replaceAll = function (search, replacement) {
var target = this;
return target.split(search).join(replacement);
};

artık bu kod JS default olarak gelecek. Bu sayede kodun içerisinde değiştirmek istediğiniz kelimlerin hepsini bulup değiştirme imkanı sunuyor.

ve sonuç

This is a jest program which contains jest code

3. Logical Assignment Operators

Bu kısımda bir değeri atama yaparken öncesinde bir if controlü yapıp değerin durumuna göre atama yaptığımız operatörlerdir

  • Logical And Assignment
  • Logical Or Assignment
  • Nullish coalescing operator.

Logical And Assignment (&&=)

Mantıksal And Atamasında x değeri zaten önceden true bir değerse üzerine atama gerçekleştirir. Aksi halde atama yapmaz.

//x &&= y;
//if x is true, then the value of y is assigned to x

//Example
let x =10, y =20;
x &&= y;
console.log(x); // 20

x = undefined;
x &&= y;
console.log(x); // undefined

Logical Or Assignment (||=)

Mantıksal Or Atamasında x değeri zaten önceden false bir değerse üzerine atama gerçekleştirir. Aksi halde atama yapmaz.


//x ||= y;
//if x is false, then the value of y is assigned to x

//Example
let x ='', y ="x is empty";
x ||= y;
console.log(x); // x is empty

x = 'asdf';
x ||= y;
console.log(x); //asdf

Nullish coalescing operator (??=)

Mantısal Nullish coalescing ise sadece null ve undefined olma durumunda bir atama gerçekleştirir.

let a ;
a = a ?? 10;
console.log(a)

// using shorthand assignment
let x;
x ??= 100;
console.log(x); //100

// only for null and undefined the right-side operand is assigned.
let emptyStr = '';
emptyStr ??= "Empty";
console.log(emptyStr); //''

4. Promise.any() and AggregateError

Birden fazla promise beraber işlemeye çalıştığımıda bunlardan en az bir tanesi resolve olması durumunu göre resolve dönen Promise cagrısıdır.

const promises = [
new Promise((resolve, reject) => setTimeout(reject, 20, '1st')),
new Promise((resolve, reject) => setTimeout(resolve, 500, 'last')),
new Promise((resolve,reject) => setTimeout(resolve, 200, '2nd'))
];

Promise.any(promises)
.then(v => console.log(v))
.catch(e =>console.log(e));

AggregateError, Promise.any sonucunda oluşan hata durumunda birden fazla hatayı bir array içerisinde AggregateError olarak döndürür.

5. Private Class Methods and Accessors

ES11 ‘de Class property değerlerine gelen private yeteneği aynı şekilde metodlarda da uygulanabilir hale gelmiştir. aşağıdaki kodda getToken private bir method olarak tanımlandığı için sadece sınıf içerisindeki metodlardan kullanılabilir.

class Auth {
#getToken() {
return "12345678";
}
isAuth() {
return this.#getToken();
}
}

Aynı şekilde getter ve setter fonksiyonlarıda tanımlamaya imkan tanır.

Okumaya Devam Et 😃

Bu yazının devamı veya yazı grubundaki diğer yazılara erişmek için bu linke tıklayabilirsiniz.

--

--