ES11 nedir? ECMAScript 2020 nedir?

Bu yazıda ECMAScript 2020 olarak da bilinen ES11 ile birlikte gelen yenilikleri inceliyoruz.


ES11 nedir? ECMAScript 2020 nedir?

ECMAscript, k/ecmascript-nedir-ecmascript-ne-degildir-bilinmesi-gerekenlerısa adıyla ES, Ecma-International tarafından ECMA-262 dokümanında yayınlanan ve her yıl yenilenen JavaScript standartıdır. Asıl amacı javascript için bir standart geliştirerek tüm tarayıcılarda çalışabilen kodlar yazılmasına olanak vermektir. (Ah neydi o Internet Explorer günleri, her browsera ayrı kod yazardık) Bununla birlikte Node.Js gibi sunucu tabanlı motorlarda ECMAScript’le uyum göstermektedir.

Aslında ES6, ES7ES11, ES12 gibi farklı versiyonlar yok. ECMAScript her sürümde üstüne koyarak ilerliyor. Her sürüm bir önceki sürümü kapsarken yenilikleri de beraberinde getiriyor. Bazı iş ilanlarında “ES6+ bilmelisiniz” şeklinde verilen şart bu açıdan oldukça garip. Sadece ES6 bilmenizi isteseler, “sonrasını bilmeseniz de olur, bize ES6 lazım” şeklinde açıklanabilir, fakat ES6+ ne demek ben anlamıyorum. 🙂 ( Es.Next yazsalar daha doğru olacak)

ES11 (ESCMAScript 2020) Haziran 2020’de yayınlanan 11. ECMAScript sürümüdür.

ES 11 ile yeni neler geldi?

ES11 ile birlikte Javascript’e aşağıdaki yenilikler geldi.

  • Exporting modules
  • Optional chaining
  • Nullish Coalescing Operator
  • Promise.Allsettled
  • matchAll

Exporting modules

ES11’le birlikte modülleri importa benzer şekilde export edebiliyoruz.

export * as MyComponent from './Component.js'

Optional Chaining

Optional chaining bir nesnenin alt nesneleri için mantıksal ifadeler kullanmadan, varsa değerini, yoksa undefined değerini atamamıza yardımcı oluyor.

let building = { room1: { window1 : { color : red } } };

yukarıdaki gibi bir nesnemiz olsun.

Bu nesnedeki bir değer, örneğin building.room2.window1.color şeklinde ulaşmaya çalışırsak 'TypeError: Cannot read property 'color' of undefined şeklinde bir hatayla karşılaşırız. ES11 öncesi bunu önlemek için de genellikle aşağıdaki gibi bir kod yazardık.

if ( (building)
    && (building.room2)
        && (building.room2.window1)
            && (building.room2.window1.color) {
                console.log("The color of the windows is "+ building.room2.windows1.color)
            }
    else {
       console.log("Window, Room or building not found")
    }

Yazması ve okuması oldukça güç bir kod değil mi? ES11 ile birlikt ebu kodu aşağıdaki gibi yazabiliriz.

let color = building?.room2?.window1?.color;
if (color) {
   console.log("The color of the windows is "+ building.room2.windows1.color)
} else {
   console.log("Window, Room or building not found")
}

Nullish Coalescing Operator

ES11 öncesinde mantıksal ifadelerde null, undefined, NaN, fales ve hatta 0 deperleri false değerine karşılık geliyordu. ES11 ile birlikte eklenen ?? operatörü ile sadece “null” veya “undefined” değerlerini false olarak nitelendirebiliyoruz.

let name = undefined || "John Doe"
let name = NaN || "John Doe"
let name = 0 || "John Doe"

// Bunların tümünde name değişkeni "John Doe" değerini alır.



let name = undefined ?? "John Doe"
let name = null ?? "John Doe"
let name = NaN ?? "John Doe"
let name = 0 ?? "John Doe"

/*
 * İlk ikisinde sağ operatörün sağ tarafı yani "John Doe" alınırken. 3 ve 4. satırlarda sol
 * taraf true kabul edilerek name değişkenine NaN ve 0 değerleri atanır.
*/

Promise.AllSettled

Promise.AllSettled özelliği bir dizideki tüm array’lerin çözümlenmesini bekleyen koşullu bir çalıştırma yapmanızı sağlar.

const promisesArray = [
    Promise.resolve(firstPromise),
    Promise.resolve(secvondPromise)
]

Promise.AllSettled(promisesArray).then ((result) => {
   // Tüm promiseler çözümlendikten sonra çalışacak kod
})

ES12 ile birlikt egelen Promise.Any metodunu da incelemenizi öneririm.

matchAll

matchAll metodu bir string içerisinde yapacağınız regex aramalarını detaylandırmanızı sağlayan bir metod. Örnek kod ve çıktısı ile daha iyi anlaşılacaktır.

const regex = /[1-3]/g;
const year = '1983';
for (const match of year.matchAll(regex)) {
   console.log(match)
}

/*  Bu kodun çıktısı aşağıdaki gibi olacaktır
 *
 *  ['1', index: 0, input: '1983', groups: undefined]
 *  ['3', index: 3, input: '1983', groups: undefined]
 *
*/
Bu Yazıda Yapılan Değişiklikler
  • 11.05.2022: Yazı özeti düzenlendi.

Bir soru, öneri ya da yorumunuz mu var?

Evren Bal

Ben Evren BAL

1996'dan beri ‘Internet canlısıyım!’

Evren Bal Hakkında daha fazla bilgi.

Tanışmak isterseniz hemen sosyal medyadan iletişime geçebilirsiniz.

Bana Ulaşın

Bana Ulaşın

  • Bir sorunuz mu var?
  • Yazıda bir hata mı farkettiniz?
  • Sayfa ile ilgili bir öneriniz mi var?
  • Yazmamı önereceğiniz bir konu mu var?

Lütfen iletişim formunu kullanarak veya sosyal medya hesaplarımdan bana ulaşın.

Digital Ocean Logo

VPS sunucusu denemek ister misiniz?

Digital Ocean'a referans bağlantımdan kayıt olarak yeni oluşturacağınız hesabınızı 60 gün geçerli 100$ kredi ile açabilirsiniz. Bu miktar yüksek performanslı VPS'leri bile denemeniz için yeterlidir.

Yapacağınız onca kurulumun boşa gitmemesi için benim tavsiyem uzun vadede kullanabileceğiniz özellik ve maliyetlerde bir sunucu oluşturmanızdır.

Ücretsiz 100$ kredi bağlantısı

60 günlük denemeniz sonunda eğer devam etmek istemezseniz hiç bir ücret ödemeyeceksiniz. Hizmeti kullanmaya devam etmek isterseniz harcamanız 25$'a ulaştığında benim hesabıma da 25$ kredi yüklenecektir.

Diğer bir deyişle, siz 100$ ücretsiz krediyi her halükarda kazanırken, daha sonra ücretli devam etmeye karar verirseniz ben de 25$ kredi kazanacağım.

Copyright © 2022 - Evren BAL