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
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();

Telif Hakkı:
Problemi Şikayet Et!HAKKIMDA
Yazılım Uzmanlığı konusunda 11 yılı aşkın süredir Türkiye'de Cumhurbaşkanlığı olmak üzere Kurumlara ve Tüzel kişilere; Yön verme, Yücelik Sağlama ve Büyüme gereksinimlerinden doğan Yazılım ihtiyaclarına çözümler sunmaktayım.
<html>
<body>
<h5>
Yazılım
&
Teknoloji
</h5>
<p>
Dünyasına
Hoş Geldiniz.
</p>
</body>
</html>
Son Eklenen Konular
Nginx Nedir, Nasıl Çalışır, Kurulumu, Hata ve Çözümü
03 Haziran, 2022
Web Site | Web Tasarım | Web Yazılım
27 Nisan, 2022
Html URL ASCII Karakter kodları
04 Mart, 2022
Jquery Alert, Sweet alert, Dialog Kullanımı
03 Mart, 2022
Doğal Seo Çalışması Nasıl Yapılır?
19 Şubat, 2022
En Çok Okunanlar
Google api key nasıl alınır?
26 Eylül, 2013
Youtube Video'sunu Gif Yapma Gif'e Çevirme
17 Ağustos, 2013
linux çeşitleri nelerdir?
13 Ağustos, 2013
Ajax ile sayfa yenilenmeden resim yükleme nasıl yapılır?
04 Ekim, 2013
Php ile bot nasıl yapılır?
22 Eylül, 2013
İlgili İçerikler
-
08 Aralık, 2021 430
Vuejs 3 Routing İşlemleri Ve Router Kullanımı
-
06 Aralık, 2021 570
Vuejs 3 Kullanımı. Nasıl Kurulur, Vue 3 Gelen Yenilikleriyle Nasıl Proje Geliştirilir?
-
15 Ağustos, 2021 2748
Nuxt.js Nedir? Nuxt.js Nasıl Kurulur? Nuxt.js ile Vue.js Projesi Nasıl Geliştirilir?
-
24 Temmuz, 2021 912
Nodejs ReactJs Array functions Kullanım Yöntemleri
-
22 Temmuz, 2021 1137
React Nedir, Nasıl Kurulur, Reactjs Öğrenerek Proje Nasıl Geliştirilir?
-
01 Temmuz, 2021 2025
Nextjs kurulumu ve Nextjs ile React projesi nasıl yapılır?