ES6+ Güncellemesi, JavaScript programlama dilinin son sürümüdür Bu güncelleme, geliştiricilerin kodlama işlemlerini kolaylaştıran yeni özellikler ve fonksiyonlar içerir ES6+ ile daha hızlı, verimli ve okunaklı kod yazabilirsiniz Hemen daha fazla bilgi edinin ve geliştirme sürecinizi iyileştirmeye başlayın

ES6+ güncellemesi, JavaScript programlama dilinde birçok yeni özelliğin eklenmesiyle ortaya çıkan bir güncellemedir. Bu güncelleme sayesinde daha temiz, daha okunabilir ve daha sürdürülebilir kodlar yazabilmek mümkündür.

Bu güncellemeyle birlikte gelen özelliklerden bazıları şunlardır:

• Let ve const değişkenleri: Block scope özelliği sayesinde, değişkenlerin tanımlandığı blok içinde kalması sağlanır.
• Arrow fonksiyonlar: Kısa sözdizimi sayesinde, daha kısa ve okunaklı fonksiyonlar yazmak mümkündür. Aynı zamanda "this" değişkeninin kapsamı değiştirilerek daha rahat kullanım sağlanır.
• Spread ve rest operatörleri: Dizileri veya nesneleri daha kısa ve okunaklı bir şekilde kullanmanızı sağlar.
• Destructuring: Dizileri veya nesneleri daha kolay şekilde parçalayarak kullanmanızı sağlar.
• Modüller: Kodlarınızı daha düzenli bir şekilde organize ederek daha kolay bir şekilde işlem yapmanızı sağlar.
• Promise ve async/await yapıları: Asenkron bir şekilde çalışan kodlarınızı daha düzenli ve kolay bir şekilde yazmanızı sağlar.

ES6+ güncellemesi sayesinde daha okunaklı, daha sürdürülebilir ve daha temiz kod yazmanız mümkündür. Bu güncelleme sayesinde birçok sorunun da önüne geçilmiştir.

Let ve Const Değişkenleri

ES6+ güncellemesi ile birlikte let ve const değişkenleri tanıtılmıştır. Bu yeni tip değişkenler var olan var anahtar kelimesinin alternatifi olarak ortaya çıkmıştır. Bu sayede, değişkenlerin etki alanı belirlenirken daha esnek ve güçlü bir yapı sunulmuştur.

let değişkeni, önce tanımlandığında blok içerisinde kullanılabilmekte ve ardından blok dışından erişilmemektedir. Bu sayede bir kod bloğu içerisindeki değişken isimleri diğer kod bloklarındaki isimlerle karışmamaktadır. const değişkeni ise sabit bir değişkendir, yani bir kez tanımlandıktan sonra değeri değiştirilemez. Kullanımıyla, programcılar kodlarını daha okunaklı, güvenli ve düzenli bir hale getirebilmekte ve hataların önüne geçebilmektedir.

Aşağıdaki tablo, let ve const değişkenleri arasındaki farkları göstermektedir:

Bu tablo sayesinde let ve const değişkenleri arasındaki farklılıklar daha net bir şekilde anlaşılabilir. Yeni özellikleri sayesinde, programcılar kod yazımında daha güvenli ve esnek bir yapı sunulmuştur.

Arrow Fonksiyonlar

ES6+ güncellemesi ile gelen önemli özelliklerden biri de arrow fonksiyonlarıdır. Bu fonksiyonlar, daha kısa ve okunaklı bir kod yazmanıza olanak sağlar. Ayrıca, this değişkeni ile ilgili yaşanan problemleri ortadan kaldırır.

Arrow fonksiyonları, function anahtar kelimesi yerine => işaretiyle tanımlanır. Normal fonksiyonlarda olduğu gibi argümanlar parantez içinde, fonksiyon gövdesi ise süslü parantez içinde yer alır. birden fazla ifade içeren fonksiyonlar ise süslü parantezler içinde yazılır.

function hello(name) {
    console.log("Merhaba, " + name + "!");
}

const hello = (name) => {
     console.log("Merhaba, " + name + "!");
}

Arrow fonksiyonları, eski yöntemlere göre daha okunaklıdır. Kodunuzun daha kısa ve anlaşılır olmasını sağlayabilirsiniz. Bu fonksiyonların en büyük artısı, fonksiyonun içinde bulunulan kapsam dışındaki this ifadesine ulaşmalarıdır. Normal fonksiyonlarda, this ifadesi her zaman farklı bir değerle ilişkilendirilir ve bu da hatalara yol açabilir. Fakat arrow fonksiyonlarda, this değişkenin değeri fonksiyona kapsayan değerin this değeriyle aynı olur.

Bir başka kullanımı ise arrow fonksiyonlarının kısa sözdizimini sağlamasıdır. Eğer fonksiyonun tek bir ifadesi varsa süslü parantezler kullanmanız gerekli değildir.

function square(x) {
    return x * x;
}

const square = x => x * x;

Sonuç olarak arrow fonksiyonları, kodunuzun daha okunaklı ve kısa olmasını sağlayan önemli bir özelliktir. Ayrıca, this değişkeniyle ilgili oluşabilecek problemleri ortadan kaldırır.

Parametre Olarak Diziler

ES6+ güncellemesi, JavaScript dilinde birçok yeni özellik ve geliştirmeye sahiptir. İlk olarak, "let" ve "const" değişkenleriyle tanışabiliriz. Bu değişkenler "var" değişkeninden farklıdır çünkü var değişkeni işlev tanımlaması ile bağlantılıdır, let ve const ise blok kapsamına sahiptir. Bu sayede, let ve const değişkenlerinin kullanımı daha güvenlidir.

Arrow fonksiyonları da ES6+ güncellemesi ile birlikte gelen önemli yenilikler arasında yer alır. Arrow fonksiyonları, function ifadelerine alternatif olarak kullanılır ve kısa olmaları ile bilinirler. Daha okunaklı bir şekilde kod yazmayı sağlayan arrow fonksiyonları, başka bir fonksiyon tarafından çağrıldığında geri dönüş için kullanılan bir anahtar kelime olan "return" ü kullanmak yerine özel bir ok işareti içerirler. Ayrıca, parametre olarak diziler de kullanılabilir. Bu sayede daha az kod yazmak mümkündür.

Destructuring, karmaşık atama işlemlerine son veren bir özelliktir. Bu özellik sayesinde, nesneler ve dizilerdeki öğelere erişmek ve bunları atamak daha kolay bir hale gelir. Dizilerde destructuring kullanımı örnek olarak aşağıdaki tabloda verilmiştir:

Yukarıdaki örnek kodda, myArray adlı bir dizi oluşturulur ve bu dizi öğeleri a, b ve c değişkenlerine atılır. Bu işlem, destructuring kullanımı ile oldukça kolay ve okunaklı bir şekilde gerçekleştirilir.

ES6+ güncellemesi ile birlikte gelen bir diğer özellik ise Promise ve async/await yapısıdır. Bu yapılar, işlem sonucunu beklemek için kodun beklemesine gerek kalmadan daha düzenli kod yazmamıza olanak sağlar. Örneğin, async/await ile bir asenkron işlemi senkronize hale getirebilir ve sonucunu daha kolay bir şekilde elde edebilirsiniz. Promise yapısı hakkında daha fazla bilgi ve örnekler için ayrıntılı bir şekilde inceleyebilirsiniz.

Kısa Fonksiyon Sözdizimi

ES6+ güncellemesi ile birlikte JavaScript dilinde kullanılan arrow fonksiyonlarda kısa fonksiyon sözdizimi kullanımı da mümkün hale geldi. Kısa fonksiyon sözdizimi, fonksiyonların daha basit ve kısa bir şekilde tanımlanabilmesini sağlar. Bu sayede kodun okunabilirliği artar ve daha az kod yazmak mümkün olur.

Kısa fonksiyon sözdizimi, arrow fonksiyonlarında kullanılır. Fonksiyon isminden sonra açılış ve kapama parantezleri gerektirmez. Fonksiyonun içinde tek bir işlem varsa süslü paranteze gerek yoktur ve işlem sonucunu otomatik olarak döndürür. Örneğin:

```const numbers = [1, 2, 3, 4];

// Normal Arrow Fonksiyon Sözdizimiconst doubled1 = numbers.map((number) => { return number * 2;});

// Kısa Fonksiyon Sözdizimiconst doubled2 = numbers.map(number => number * 2);```

Yukarıdaki örnekte `map` fonksiyonu kullanılarak bir dizi içindeki sayılar 2 ile çarpılmış ve yeni bir dizi oluşturulmuştur. İlk örnekte normal arrow fonksiyon sözdizimi kullanılmışken, ikinci örnekte kısa fonksiyon sözdizimi kullanılarak daha az kod yazılmıştır.

Kısa fonksiyon sözdizimi, bir veya daha fazla parametre kullanıldığında da kullanılabilir. Birden fazla parametre kullanıldığında, parametreler virgülle ayrılır.

```// Kısa Fonksiyon Sözdizimi ile birden fazla parametre kullanımıconst sum = (num1, num2) => num1 + num2;

console.log(sum(5, 10)); // 15```

Bu şekilde birden fazla parametre kullanırken bile kod daha kısa ve okunabilir hale getirilir. Kısa fonksiyon sözdizimi, JavaScript kodunu daha az yazarak daha etkili hale getiren önemli bir özelliktir.

Spread ve Rest Operatörleri

ES6+ güncellemesi ile birlikte JavaScript geliştiricileri, yeni operatörler kullanarak kodlarını daha verimli hale getirebilmektedirler. Bu operatörlerden bazıları spread ve rest operatörleridir.

Spread operatörü, dizi ya da nesnelere ait elemanları ayırmak için kullanılan bir operatördür. Dizi içerisindeki elemanları çoğaltmanın, birleştirmenin ve farklı dizilere dahil etmenin yanı sıra nesnelerde de kullanılabilir. Spread operatörü için üç nokta işareti '...' kullanılır. Örnek olarak, bir dizinin elemanlarını farklı bir diziye dahil etmek için şu şekilde kullanılabilir:

```let arr1 = [1, 2, 3];let arr2 = [...arr1, 4, 5, 6];

console.log(arr2);// output: [1, 2, 3, 4, 5, 6]```

Rest operatörü ise tam tersi şekilde kullanılır. Birden fazla parametre alması gereken bir fonksiyon oluştururken, rest operatörü yardımıyla parametreleri bir dizi içinde toplayabiliriz. Ayrıca dizilerde de kullanılabilir, fakat spread operatörüne göre daha fazla kullanılma alanı bulunmaktadır. Rest operatörü için de yine üç nokta işareti '...' kullanılır. Örnek olarak, bir fonksiyon içinde rest operatörü kullanarak birden fazla parametre alabilirsiniz:

```function sum(...numbers) { return numbers.reduce((prev, curr) => prev + curr);}

console.log(sum(1, 2, 3));// output: 6```

Bu örneklerde görüldüğü gibi, spread ve rest operatörleri sayesinde kodlar daha okunaklı ve hızlı bir şekilde yazılabilir. Bu nedenle, JavaScript geliştiricilerinin bu operatörleri öğrenmesi ve kullanması önemlidir.

Spread Operatörü

ES6+ güncellemesi ile birlikte spread operatörü de hayatımıza girdi. Spread operatörü, bir dizi ya da nesnenin elemanlarını ayrıştırarak (ayrı ayrı elemanlarına ayırarak) yeni bir dizi ya da nesne oluşturmak için kullanılır. Bu işlem, klonlama işleminin daha hızlı ve daha efektif olmasını sağlar.

Spread operatörü üç nokta (...) karakteri ile gösterilir. Dizi üzerinde kullanıldığında, tüm elemanlar tek tek sıralanarak yeni bir dizi oluşturulur. Fonksiyonlarda kullanıldığında, fonksiyonun parametreleri içindeki elemanları ayırmak için kullanılır.

Örneğin, bir dizi içindeki elemanları ayrıştırmak için spread operatörü kullanabiliriz:

const eskiDizi = [1, 2, 3];const yeniDizi = [...eskiDizi, 4, 5, 6];console.log(yeniDizi); // [1, 2, 3, 4, 5, 6]

Yukarıdaki örnekte, eskiDizi'nin tüm elemanları spread operatörü ile yeni bir dizi içinde tekrar sıralanarak yeniDizi oluşturuldu. Aynı şekilde, fonksiyonlarda da kullanabiliriz:

function topla(a, b, c) {  return a + b + c;}const dizi = [1, 2, 3];console.log(topla(...dizi)); // 6

Yukarıdaki örnekte, spread operatörü ile dizi elemanları fonksiyon parametreleri içinde ayrıştırılmış ve topla fonksiyonu çağrılarak sonuç elde edilmiştir. Spread operatörü sayesinde, kodumuz daha okunaklı ve anlaşılır hale gelir, ayrıca kodumuzda azaltma yaparak hataları önleyebiliriz.

Rest Operatörü

Rest operatörü, ES6+ güncellemesi ile gelen yeni bir özelliktir. Rest operatörü, bir fonksiyona gönderilen parametrelerden fazla olanları bir dizi içinde toplamaya yarar. Rest operatörü, üç nokta (...) sembolü ile gösterilir.

Rest operatörü, bir fonksiyona gönderilen parametrelerin sayısının önceden bilinmediği durumlarda kullanışlıdır. Böyle durumlarda, fonksiyon tanımında rest parametresi kullanılarak belirsiz sayıda parametre alınabilir. Rest operatörü aynı zamanda, destructuring özelliği gibi nesne ya da dizilerden de yararlanılabilir.

Rest operatörünün bir diğer faydası, fonksiyonların daha okunaklı olmasına yardımcı olmasıdır. Normalde fonksiyonlar, birkaç parametre içerdiğinde okunması zor olabilir, ancak rest operatörü kullanılarak parametrelerin toplu halde bir dizi içinde gösterilmesi daha anlaşılır bir hale getirir.

Örneğin, aşağıdaki örnek fonksiyonda rest operatörü kullanılarak gönderilen tüm parametreler bir dizi içinde toplanmıştır:

```function topla(...sayilar) { let toplam = 0; for(let i = 0; i < sayilar.length; i++){ toplam += sayilar[i]; } return toplam;}

topla(1, 2, 3, 4, 5); //15```

Bu örnek fonksiyon, toplama işlemi için gönderilen tüm parametreleri bir dizi içinde toplamaktadır. Rest operatörü, bu gibi durumlarda fonksiyonların daha etkili bir şekilde kullanılmasını sağlar.

Rest operatörü, kod yazarken daha esnek bir yaklaşım sunar ve önemli bir kolaylık sağlar. Fonksiyonlara gönderilen değişken sayısını önceden belirtmemize gerek yoktur, bu da esnek ve kolay bir kodlama yapmamıza olanak tanır.

Destructuring

Destructuring, ES6+ güncellemesiyle birlikte kullanılmaya başlanan önemli bir özelliktir. Bu özellik ile bir dizinin ya da nesnenin elemanlarına kolayca erişim sağlayabilirsiniz.

Destructuring özelliği kullanarak önce bir dizideki elemanları değişkenlere atayabilirsiniz. Örneğin, bir sayılar dizimiz olsun ve bu dizinin ilk iki elemanını değişkenlere atamak isteyelim. Bunun için aşağıdaki kodu kullanabiliriz:

```const sayilar = [1, 2, 3, 4, 5];const [ilkSayi, ikinciSayi] = sayilar;console.log(ilkSayi); // 1console.log(ikinciSayi); // 2```

Nesle içinde Destructuring yapabilmek için ise aşağıdaki örneği takip edebilirsiniz:

```const birNesne = { ad: 'Elif', soyad: 'Yıldız', yas: 28};

const {ad, soyad, yas} = birNesne;console.log(ad); // Elifconsole.log(soyad); // Yıldızconsole.log(yas); // 28```

Destructuring işlemi, kodun okunabilirliğini arttırırken aynı zamanda yazının boyutunu da kısaltır. Bu sebeple, bu özelliğin kullanımı önemlidir.

Dizilerde Destructuring

Diziler, bir dizi veriyi tutmak için oldukça yaygın kullanılan bir veri tipidir. ES6+ güncellemesiyle birlikte, destructuring yapısı sayesinde dizilerdeki verileri kolaylıkla değişkenlere atayabiliriz. Destructuring yapısı, bir dizi verinin elemanlarını ayırmamıza ve farklı değişkenlere atamamıza olanak tanır.

Destructuring yapısı, özellikle büyük boyutlu dizilerde ve nesnelerde oldukça kullanışlıdır. Dizilerde destructuring yapısı kullanarak, dizideki elemanları farklı değişkenlere atamak mümkündür. Bu sayede, kodun daha okunaklı ve anlaşılır hale gelmesi sağlanır.

Destructuring yapısını kullanarak bir dizi elemanını farklı değişkenlere atamak oldukça basittir. Örneğin, aşağıdaki kod bloğunda bir dizi tanımlanmıştır:

```const sayilar = [1, 2, 3];```

Bu dizideki elemanları farklı değişkenlere atamak için destructuring yapısını kullanabiliriz:

```const [birinci, ikinci, ucuncu] = sayilar;```

Yukarıdaki örnekte, sayilar dizisindeki elemanlar sırasıyla birinci, ikinci ve ucuncu değişkenlerine atanmıştır. Böylece, artık bu değişkenleri kullanarak, dizinin elemanlarına erişebilir ve üzerlerinde işlemler yapabiliriz.

Dizilerde destructuring yapısını kullanırken, atama işlemlerinde değişken isimleri dizinin eleman sayısına eşit olmalıdır. Aksi takdirde, hata alacağız. Ayrıca, dizinin elemanlarını ayrıştırırken, atama işlemlerinde farklı isimler de kullanabiliriz.

```const sayilar = [1, 2, 3];const [bir, iki, uc] = sayilar;console.log(bir); // 1console.log(iki); // 2console.log(uc); // 3```

Destructuring yapısını kullanmak, kodu daha anlaşılır hale getirmenin yanı sıra, kodu daha kısa ve öz hale getirir. Bu sayede, kodun bakımı ve geliştirilmesi de daha kolay hale gelir.

Nesnelerde Destructuring

Destructuring, sadece dizilerde değil, nesnelerde de kullanılabilir. Nesnelerde destructuring yaparken değişkenler nesnedeki özelliklerle aynı isimde atanır.

Örnek olarak,

const city = {  name: 'Istanbul',  population: '15 million',  attractions: ['Hagia Sophia', 'Bosphorus'],};const {name, population} = city;console.log(name); // Istanbulconsole.log(population); // 15 million

Istanbul15 million

Bu kod bloğunda, 'city' nesnesinin 'name' ve 'population' özellikleri, 'name' ve 'population' değişkenlerine atanır. Aynı zamanda, bu özelliklere bu şekilde erişilebilir. Bu sayede, daha kısa ve okunaklı kod yazmak mümkün olur.

Daha fazla sayıda özellik varsa, destructuring süslü parantez '}' içinde yapılabilir.

• const city = {  name: 'Istanbul',  population: '15 million',  attractions: ['Hagia Sophia', 'Bosphorus'],};const {name, population, attractions} = city;console.log(name); // Istanbulconsole.log(population); // 15 millionconsole.log(attractions); // ["Hagia Sophia", "Bosphorus"]

Bu kod bloğunda, 'name', 'population' ve 'attractions' özellikleri, 'name', 'population' ve 'attractions' değişkenleri ile destructuring yapıldı.

Modüller

Modüller, kodunuzu küçük, yönetilebilir ve tekrar kullanılabilir parçalara bölen bir yapıdır. ES6, modüllerin JavaScript'te standart hale gelmesini sağlamıştır. Modüller, birbirleriyle ilgili kodları gruplandırmanıza ve başka modüllerle bir araya getirmenize olanak tanır.

Modülün içeriği, export ve import anahtar sözcükleri aracılığıyla diğer modüllerle paylaşılabilir. Export anahtar kelimesi, modülden dışarıya çıkarmak istediğiniz kodları belirlemenizi sağlar. Import anahtar kelimesi, belirli modülleri ve orada tanımlanan kodları içe aktarmanızı sağlar.

Örneğin, bir projede birkaç farklı JavaScript dosyası kullanıyorsanız, bu dosyaları modüller olarak düzenlemeniz kodunuzu daha yönetilebilir hale getirecektir. Bu modülleri bir araya getirmek için import işlevini kullanabilir ve bir modüldeki kodu diğer modüller ile paylaşmak için ise export yöntemlerini kullanabilirsiniz.

Modüller aynı zamanda kapsam yönetimi sağlar. Bir kod bloğu içinde tanımlanan değişkenler sadece o kod bloğu içinde erişilebilirken, modül düzeyinde tanımlanan değişkenler tüm modül içinde erişilebilir. Bu, modülünüzün daha organize, hata ayıklanabilir ve sürdürülebilir olmasını sağlar.

Modüllerin kullanımı ile ilgili birkaç örnek vermek gerekirse; bir projede veri işleme işlevlerini içeren bir modül oluşturabilirsiniz, ve bu modülü, farklı sayfalarda veya bileşenlerde kullanabilmeniz için export işlemleri ile diğer kodlara da aktarabilirsiniz. Bu sayede yazılımınızın daha işlevsel olmasını sağlayabilirsiniz. Ayrıca, modüllerin birleştirilmesi ve dağıtımı da oldukça kolaydır, böylece projenizdeki modülleri yeniden kullanarak kod tekrarını önleyebilir ve geliştirme sürecinizi hızlandırabilirsiniz.

Named Export ve Default Export

ES6+ güncellemesi ile birlikte JavaScript dilindeki en önemli yeniliklerden biri de modüllerdir. Bu yeni özellik sayesinde projelerimizi daha modüler hale getirebiliyoruz. Ancak bu özelliği kullanırken dikkat etmemiz gereken iki export yöntemi var: Named Export ve Default Export.

Named Export, bir modül içerisinde birden fazla fonksiyon ya da nesne bulunması durumunda, bu fonksiyon ve nesnelerin herbirini ayrı ayrı dışarı aktarmaya yarayan bir yöntemdir. Yani, modülün içerisindeki farklı fonksiyonları ya da nesneleri farklı isimler altında dışarıya aktarıyoruz. Örneğin:

```javascriptexport function sum(num1, num2) { return num1 + num2;}

export function multiply(num1, num2) { return num1 * num2;}```

Bu şekilde tanımladığımız fonksiyonları başka bir dosyada şöyle kullanabiliriz:

```javascriptimport { sum, multiply } from './math.js';

console.log(sum(2, 3)); // 5console.log(multiply(2, 3)); // 6```

Default Export ise, bir modül içerisinde sadece bir adet fonksiyon ya da nesne bulunması durumunda, bu fonksiyonu ya da nesneyi varsayılan olarak dışarı aktarmamıza yarayan bir yöntemdir. Yani, bir modül içerisinde sadece bir tane fonksiyon ya da nesne varsa, onu direkt olarak dışarıya aktarmak için kullanıyoruz. Örneğin:

```javascriptexport default function sayHi(name) { console.log(`Merhaba, ben ${name}!`);}```

Bu şekilde bir fonksiyonu, başka bir dosyada şöyle kullanabiliriz:

```javascriptimport sayHi from './greetings.js';

sayHi('Ali'); // Merhaba, ben Ali!```

Tabii, aynı dosyada hem Named Export hem de Default Export kullanmak mümkün değildir. Bir modül içerisinde yalnızca bir adet Default Export kullanabilirsiniz.

Sonuç olarak, modüllerin kullanımı, özellikle daha büyük projelerde oldukça önemlidir ve bu projeleri daha modüler ve yönetilebilir hale getirebilir. Ancak, modüllerin export yöntemlerini doğru bir şekilde kullanmak da aynı derecede önemlidir.

Promise ve Async/Await Yapıları

ES6+ ile birlikte gelen Promise ve Async/Await yapıları, asenkron işlemlerin yönetilmesinde büyük kolaylık sağlar. Promise yapısı, asenkron işlemleri takip etme ve yönetme imkanı verirken, Async/Await yapısı, Promise yapılarının daha okunaklı bir şekilde kullanılabilmesini sağlar.

Promise Yapısı: Promise yapısı, bir işlemin başarılı olması durumunda bir değer döndürürken hata oluşması durumunda da hatayı döndürür. İşlemin tamamlanmasını bekler ve sonucu döndürür. Promise yapısı 3 durumda kullanılır:

• Resolved: İşlem başarılı bir şekilde tamamlandı.
• Rejected: İşlem hatalı bir şekilde sonlandı.
• Pending: İşlem hala tamamlanmadı.

Async/Await Yapısı: Async ve await ifadeleri, Promise yapılarının kullanımına kolaylık sağlayan bir yapıdır. Await ifadesi, yalnızca Promise yapısına sahip fonksiyonlarda kullanılabilir. Bu sayede, işlem sonucunun tamamlanmasını bekleyebilir, sonucu alarak istenilen eylemi gerçekleştirebiliriz. Async fonksiyonları ise Promise yapısını daha okunaklı bir şekilde kullanabilmemizi sağlar.

Bu yapılar sayesinde asenkron işlemler daha rahat bir şekilde yönetilebilir. Özellikle birden fazla asenkron işlemin bir arada kullanımı gerektiği durumlarda oldukça işlevsel bir yapıya sahiptir.

Promise Yapısı

Promise yapısı, ES6+ güncellemesiyle birlikte gelen önemli özelliklerden biridir. Promise yapısı, asenkron işlemlerin daha iyi ve daha okunaklı bir şekilde yönetilmesini sağlamak için tasarlanmıştır.

Promise yapısı, bir işlem sonucunu almak için oluşturulan bir objedir. Bu obje, bir işlemin başarılı bir şekilde tamamlanması veya bir hatayla karşılaşılması durumunda ilgili sonuçları almamızı sağlar. Bu sayede, daha önce kullanılan callback fonksiyonlarından daha iyi bir şekilde hata yönetimi yapabiliyor ve veriyi daha sade bir şekilde kullanabiliyoruz.

Promise yapısının oluşturulması için üç farklı durum mevcuttur: - Pending (Bekleme): Promise henüz tamamlanmamıştır.- Fulfilled (Tamamlandı): Promise başarıyla tamamlanmıştır.- Rejected (Hata): Promise bir hatayla karşılaşmıştır.

Promise yapısının kullanımı, aşağıdaki örnekte daha iyi anlaşılacaktır:

```javascriptconst islemYap = (a, b) => { return new Promise((resolve, reject) => { if(isNaN(a) || isNaN(b)){ reject('Lütfen sayı giriniz.'); }else{ resolve(a + b); } });}

islemYap(4,2) .then((result) => { console.log('İşlem sonucu: ', result); }) .catch((error) => { console.error('Hata: ', error); });```

Yukarıdaki örnekte, `islemYap` fonksiyonu iki parametre alarak bir Promise objesi döndürmektedir. Eğer girilen parametreler sayı değilse, fonksiyon hata fırlatacaktır. Eğer sayılar girilmişse, fonksiyon sayıları toplayacak ve sonucu Promise objesi olarak döndürecektir.

`islemYap` fonksiyonunun kullanımı esnasında, `.then` fonksiyonu başarılı bir şekilde sonuçlanan işlem sonucunu döndürürken, `.catch` fonksiyonu hata durumlarını ele alır ve ekrana hata mesajını yazdırmaktadır.

Bu sayede, işlemlerimizi daha iyi ve daha anlaşılır bir şekilde yönetebiliriz.

Async/Await Yapısı

Async/Await yapısı, JavaScript'te asenkron işlemleri gerçekleştirmek için kullanılan bir yapıdır. Bu yapı sayesinde, kod bloklarının yürütülmesi sırasında beklenen bir işlem olduğu takdirde, diğer işlemler devam edebilir. Bu özellik, özellikle uygulamaların hız ve performans açısından iyileştirilmesine yardımcı olur.

Async/await yapısı, daha önce kullanılan Promise yapısına alternatif olarak sunulmuştur. Async/await kullanımı, Promise'ten daha kolay ve okunaklıdır. Bu yapı, JavaScript kodlarının daha sade ve anlaşılır olmasını sağlar. Özetle, Async/await yapısı, Promise yapısının geliştirilmiş ve kullanımı kolay hali olarak düşünülebilir.

Async/await yapısında, bir async fonksiyonu await anahtar kelimesi ile çağırmak mümkündür. Bu sayede, async fonksiyonun tamamlanması beklenir ve sonuç değeri ile ilgili işlemler gerçekleştirilir. Örneğin, bir web sayfasından veri çekmek istediğimizde, wait kullanarak sayfanın yüklenmesini bekleyebilir ve verileri kullanabiliriz.

Aşağıdaki örnekte, bir async fonksiyonun örneği verilmiştir:

async function veriCek() { const response = await fetch('veri.json'); const veri = await response.json(); return veri;}

Bu kod bloğunda, veri.json dosyasından veriler çekilir ve response değişkenine atanır. Ardından, response.json() metodu kullanılarak alınan veriler veri değişkenine atanır. Fonksiyon, son olarak veri değişkenini döndürür.

Async/await yapısı, Promise yapısına göre daha okunaklı ve kullanımı kolaydır. Bu yapı, JavaScript'te asenkron işlemler için tercih edilen bir yöntem haline gelmiştir.