Ecmascript6 Nedir, Nasıl Kullanılır?

Merhabalar, Ecmascript6 ile javascript yazım kuralları, temiz ve sade kod nasıl yazılır , Asenkron yazılım dilinde promise ve async await yapıları ile senkron işlem sırası kontrolünü yapmayı ve ecmascript6 dair tüm detayları sizler için derledim.

• İçindekiler
• Ecmascript6 Nedir?
• Değişkenler: var,let,const ve farkları
• Template Literal
• Destructing Kullanımı
• Spread Operatör
• Arrow functions
• Promise Yapısı
• Async / Await
  • Async / Await Hata Yakalama

Ecmascript6 Nedir?

Javascriptin yazım kurallarını belirleyen yapı diyebiliriz. ECMAScript veya ES, Ecma International tarafından ECMA-262 ve ISO/IEC 16262 standartlarıyla standartlaştırılmış, markalaşmış bir betik dili spesifikasyonudur. Şu anda kendisini izleyen Javascript tabanlı olarak geliştirilmiştir. Yaygın olarak Dünya Çapında Ağ (www) için istemci taraflı betik dili olarak kullanılır. ECMAScript’in diğer uygulamaları JSCript ve ActionScript’tir. Tarihçesine ve tüm diğer kaynaklara wikipedia üzerinden erişebilirsiniz. Kaynakça: https://tr.wikipedia.org/wiki/ECMAScript

ECMAScipt6 neden kullanmamız gerektiğini ise daha düzenli, sade ve temiz kod olarak bahsedebiliriz.

Değişkenler: var,let,const ve farkları

Javascript'te ecmascript6 ile en baştaki ozelliklerden biriside değişken tanımlama bildiğiniz üzere değişken tanımlamayı var ile yapıyorduk. Şimdi let ve const keywordleri ile tanımlama yaparak kullanıyoruz.

Aradaki farkları nelerdir derseniz var ile tanımlanan değerin scope değerini genel tanım olarak yorumlandığı için her yerde kullanılabiliyor ama const ve let hangi işlem içinde kullanılırsa orada ki değeri baz alır başka bir yerde o değeri taşımaz. Yani sayfa içinde var a=5; diye tanımlanan a değişkeni her yerde 5 olarak işlem gorür. let ve const ta ise sadece işlem içindeki verilen değeri baz alır karmaşaa yol açmaz. Özellikle dongulerde fonksiyonlar içinde let ve const kullanmanızı tavsiye ederim. Kullanımı ise:

    var zi       = 5;
    let pi       = 3; //let değiştirilebilir değişkendir.
    pi           = 7; //pi yukardaki değerini 7 olarak değiştirebiliriz.
    const barkod = "Xy16zf32"; //const sabit değişken sayfa içinde barkod tek sefer kullanabilirsiniz.

    var zi = 8;//var ile sayfa icinde aynı isimde (zi) birden fazla kullanabilirsiniz ama karişikliğa yol açar.
    //let pi = 6;// yukarıda pi değişkeni oluşturulduğu için aynı isimde kullanamazsınız bu hata yapmanizi engeller. let ve const bu yüzden ecmascript6 ile hayatımıza girmiştir.
    console.log(zi + " " +pi);

    const degerler = { name: 'ismail', surname:'gültekin' };
    console.log(degerler);
  

Template Literal

Template Literal ecmascript6 ile gelen bir özellik birleştirme operatörüne gerek kalmadan ${name} olarak kullanabiliyoruz.

    const name = "ismail";
    const surname = "gültekin";

    //console.log('Benim Adım: '+name+' Soyadım '+surname);//Eski Kullanım
    console.log(`benim adım ${name}, soyadım ${surname}`);
  

Destructing Kullanımı

Destructing ecmascript6 ile gelen daha az satır sadeleştirilmiş kod yazımı ile büyük kolaylık sağlar.

    const degerler = {
        deger1: 'deger1',
        deger2: 'deger2',
        deger3: {
            isim: 'ismail'
        }
    };

    //const deger1 = degerler.deger1;//Eski kullanım
    //const deger2 = degerler.deger2;//Eski kullanım

    const { deger1, deger2, deger3 } = degerler;//Yeni kullanim

    console.log(deger1, deger2, deger3);
    //Ekran çıktısı: deger1 deger2 { isim: 'ismail' }
  

Spread Operatör

Array içindeki değerleri yazdırmak için ecmascript6 ile spread Operator yazım kolaylığı array adının başina ... getirmek yeterli

    const arr = ['a','b','c','d'];
    const [deger1, ...rest] = arr;

    console.log(...rest);
    //ekrana çıktı: b c d
  

Arrow functions

ECMAScipt6 ile fonksiyon yazımı sadeleştirilmiş ve satır sayısı ile kod yapısı daha okunur hale getirilmiştir.

      var fonksiyonum   = function(sayi1){//Eski kullanım
        return sayi1 + 5;
      }
      const fonksiyonum = sayi1 => sayi1 + 5;//Yeni kullanım

      console.log(fonksiyonum(12));
      //Ekrana 17 yazacaktır.
  

Promise Yapısı

Javascript'te ECMAScipt6 ile gelen yazım moderniliğinde temiz kod yazmak istiyorsanız bakacağınız konu Promise'tir. Javascript asenkron bir yazılım dili olduğunu belirtmiştik işlemleri sıraya koymadan çalışır fakat bizim işlem önceliklerimiz var ise callbackler ile bu tamamlandığında şunu çalıştır gibi olayları belirleyebiliyorduk.

Promise callback function olarak aldığı 2 tane parametre var resolve, reject işler yolunda giderse resolve, bir sıkıntı var reject kullanıyoruz.

    /*//Eski kullanım
      const asenkronFonksiyon = function (sayi, callback) {
          const sonuc = sayi + 2;
          callback(sonuc);
      };

      asenkronFonksiyon(2, function (sonuc) {
          console.log(sonuc);
          asenkronFonksiyon(4, function (sonuc) {
              console.log(sonuc);
              asenkronFonksiyon(6, function (sonuc) {
                  console.log(sonuc);
                  asenkronFonksiyon(8, function (sonuc) {
                      console.log(sonuc);
                  })
              })
          })
      });
    */

    //Yeni Kullanım
    const asenkronFonksiyon = (sayi) => {
      return new Promise( (resolve, reject) => {
          if(sayi === 4)
            resolve('Her şey Yolundadır!');//then data parametresi olarak karşılayacağız
          else
            reject('Bir sorun var!');
      });
    }

    asenkronFonksiyon(4)
      .then( (data) => {
        console.log(data);
        return 1;//Alttaki then veri olarak karşılıyoruz
      })
      .then( (veri) => {
        console.log(veri);
        return 2;//Alttaki then veria olarak karşılayacağız
      })
      .then( (veria) =>{
        console.log(veria);
        return 3;
      })
      .catch((error)=>{//Hata alındığında çalışır
        console.log(error);
      });
  

Async / Await

async çalışabilmeniz için fonksiyon olarak async tanımlamanız gerekiyor. Mantığı işlem sırası belirterek çalışabilmenizi sağlıyor. Javascript asenkron bir dil ve işlem sırası olmadan tüm işlemler aynı anda çalışabilir demiştikya burada Async fonksiyonunda await keywordü ile kontrolünü ve işlem sırasını biz belirleyebiliyoruz.

async await yapısında bir işlem bitmeden diğer işleme geçme yapmaz asenkron olan javascript dilinde bu önemli bir özellik callback, promise ile de bu işlemi yapabiliriz ama en temiz kod ve çalışma mantığı async await yapısıdır.

      const user = { id: 10, name: 'ismail' };
      const friends = [ { id: 11, name: 'kenan' }, { id: 12, name: 'murat' } ];

      const getUser = () => {
        return new Promise((resolve, reject)=>{
          resolve(user);
        })
      }

      const getFriends = (userId) => {
          return new Promise((resolve,reject) => {
              resolve(friends);
          })
      }

      //async await yapısı
      async function asenkronAkis(){
        const user    = await getUser();
        const friends = await getFriends(user.id);
        console.log(user);
        console.log(friends);
      }

      asenkronAkis();
    

Async / Await Hata Yakalama

Async / Await sıralı işlemler yapısında hata yakalama bir sorun olduğunda try,catch(error) metotlarını kullanarak yapabiliriz. Yukarıdaki örnek üzerinden gitmek gerekirse kullanımı şu şekildedir.

    async function asenkronAkis(){
      try{
        const user    = await getUser();
        const friends = await getFriends(user.id);
        console.log(user);
        console.log(friends);
      }catch(error){
        console.log(error);
      }

    }

    asenkronAkis();