JS ANTALYA


ES2019


Yenilikleri

ES2019
Nedir ?


Mehmet Köse

Bildiğiniz gibi Javascript versiyonları Ecmascript (ECMA-262 olarak bilinir) spesifikasyonu ile belirleniyor, devamlı geliştiriliyor ve her sene yeni versiyon alarak iterate oluyor.

Bu Senenin Yenilikleri


Array.flat()

Array objesi artık flat methodunu destekliyor. Yani iç içe geçmiş arrayleri düzleştirebileceğiz.

Yalnız methodun derinlik bilgisini parametre olarak aldığını unutmayın. Default değer 1 Yani eğer default bir şey vermezseniz 1 kademe derinliğe inip, array'i düzleştiriyor.


              const arr1 = [1, 2, [3, 4]];
              arr1.flat(); // [1, 2, 3, 4]
          

Fakat tabiki de kaç kademe derinliğe inileceğini söyleyebiliyorsunuz


              const arr2 = [1, 2, [3, 4, [5, 6]]];
              arr2.flat(2); // [1, 2, 3, 4, 5, 6]
              
          

Veya elinizde böyle bir bilgi yoksa, sonsuz sayıda düzleştirme yap da diyebilirsiniz. Array büyükse performansın sürüneceğinden emin olabiliriz. Yine de 3. parti paketler kullanmaktan iyidir tabiki native bir özellik kullanmak. Severiz.


              const arr3 = [1, 2, [3, 4, [5, 6, [7, 8]]]];
              arr3.flat(Infinity); // [1, 2, 3, 4, 5, 6, 7, 8]
              
          

Ufak bir detay: Eğer array'inizin içinde boş bir eleman varsa flat bunu yok edecektir.


              const arr4 = [1, 2, , 4, 5];
              arr4.flat(); // [1, 2, 4, 5]
          

Array.flatMap()

Bu method da adından anlaşılabileceği gibi, flat ve map'i birleştirmiş. Temelde, verilen iterable1 kademe düzleştirip elemanlarla bir işlem yapıp, sonucu yine array olarak döndüren bir çözüm. Yine bunu da methodları hooklayarak yapabilirdik aslında ama, 2 özelliği birleştirerek native bir çözüm sunmaları güzel olmuş. Büyük miktarda verinin stream edildiği ve işlendiği senaryolarda kullanışlı olacaktır.


              const arr1 = [1, 2, 3];

              arr1.map(x => [x * 4]); // [[4], [8], [12]]
              arr1.flatMap(x => [x * 4]); // [4, 8, 12]
          

Gerçek hayattan güzel bir kullanım örneği


              const sentence = ["This is a", "regular", "sentence"];

              sentence.map(x => x.split(" ")); // [["This","is","a"],["regular"],["sentence"]]
              sentence.flatMap(x => x.split(" ")); // ["This","is","a","regular", "sentence"]
          

String.trimStart() ve String.trimEnd()

Trim zaten elimizde olan bir özellikti, bu arkadaşlar da her iki taraftan değil de, tercih edilen taraftan boşluk karakterini traşlamayı sağlıyor


              const test = " hello ";

              test.trim(); // "hello";
              test.trimStart(); // "hello ";
              test.trimEnd(); // " hello";
          

Object.fromEntries

Şimdi bu basit gibi gözükebilir ama bence oldukça faydalı bir özellik. Özellikle program akışı sırasında map/reduce/filter gibi güzellikleri kullanmak için veriyi array'e çevirmek veya array'de tutmak, ama günün sonunda display ederken de objeye çevirmek isteyebiliyoruz. Bu tarz ihtiyaçlar için çok güzel bir özellik. Temelde, array içindeki ikili arrayleri objeye çevirmeye yarıyor.


            // mesela şunun gibi bir şeyi
            const array = [["prop1", 2], ["prop2", 10], ["prop3", 25]]
            // bu şekilde objeye çevirebiliyoruz
            const newObj = Object.fromEntries(array);
            // {prop1: 2, prop2: 10, prop3: 25}
          

Optional Catch Binding

Açıkcası böyle bir kullanım zaten var sanıyordum, yeni gelmiş. Catch error objesi almak zorunda değil.


              try {
                //...
              } catch (er) {
                //handle error with parameter er
              }
              
              try {
                //...
              } catch {
                //handle error without parameter
              }
          

Symbol.description

Symbol objesi read-only description property'e kavuşmuş.


              const testSymbol = Symbol("Desc");

              testSymbol.description; // "Desc"
          

Function.toString()

Fonksiyonlar toString methoduyla tanımlandığı gibi gerçek kodu döndürüyor string olarak.

How cool is that! huh?


              function /* foo comment */ foo() {}

              foo.toString(); // "function foo() {}"
          

JSON.parse() improvements

Syntax bölümleyicisi (\u2028) ve (\u2029) sembolleriyle daha iyi çalışıp SyntaxError'e sebeb olmuyormuş. Bu konu hakkında fazla deneyimim yok. Ama kulağa güzel geliyor :)

Kaynaklar: