ES8 Nedir? ECMAScript 2017 Nedir?

💡 Özet (TL;DR):
Nedir: Haziran 2017'de yayınlanan ve JavaScript ekosistemine asenkron programlamayı kökten kolaylaştıran async/await başta olmak üzere birçok pratik metot kazandıran ECMAScript sürümüdür.
Öne Çıkan Yenilikler:
Async/Await: Promise tabanlı asenkron kodları senkron gibi yazmayı sağlar.
Object.entries() / Object.values(): Nesneleri anahtar-değer veya sadece değer dizilerine dönüştürür.
String padding (padStart/padEnd): Metinlerin başına veya sonuna tamamlama karakterleri ekler.
Trailing Commas: Fonksiyon parametre ve çağrılarının sonunda virgül bırakılmasına izin verir.

ES8 (ECMAScript 2017), Haziran 2017'de yayınlanan 8. ECMAScript sürümüdür.

ES8 ile Gelen Yenilikler

ES8 ile birlikte JavaScript'e aşağıdaki yenilikler gelmiştir:

String.prototype.padStart
String.prototype.padEnd
Object.entries
Object.values
Object.getOwnPropertyDescriptors
Trailing commas (Sondaki virgüller)
async/await

ES8 Yenilikleri Hızlı Referans Tablosu

Özellik	Kullanım Amacı	Örnek Çıktı
`padStart(len, char)`	Metni belirtilen uzunluğa ulaşana kadar baştan karakterle doldurur.	`'5'.padStart(3, '0')` ➡️ `'005'`
`padEnd(len, char)`	Metni belirtilen uzunluğa ulaşana kadar sondan karakterle doldurur.	`'abc'.padEnd(6, '.')` ➡️ `'abc...'`
`Object.entries(obj)`	Nesneyi `[anahtar, değer]` çiftlerinden oluşan diziye dönüştürür.	`[['id', 1], ['name', 'john']]`
`Object.values(obj)`	Nesnenin sadece değerlerini dizi olarak döndürür.	`['Blue', 'Orange', 'Yellow']`
`async/await`	Asenkron kodların okunabilirliğini artırır, callback zincirlerini önler.	`const result = await fetch(...)`

padStart()

padStart(), stringlerin başına istediğiniz karakteri belirli bir uzunluğa tamamlayacak şekilde ekler. padStart() metodu iki parametre alır; ilki istenen uzunluk, ikincisi ise eklenecek karakter/stringdir.

let amount = '5';
console.log(amount.padStart(3, '0')); // 005

padEnd()

padStart() ile benzer şekilde ve parametrelerle çalışan padEnd(), belirtilen metni stringin sonuna ekler.

let str = 'abc';
console.log(str.padEnd(6, '.')); // abc...

Object.entries()

Object.entries() metodu, kendisine verilen bir nesneyi anahtar-değer ikilileri şeklinde dizilere (array) dönüştürür.

const student = { id: 1, name: "john" };
const studentArray = Object.entries(student); 

console.log(studentArray); // [ [ 'id', 1 ], [ 'name', 'john' ] ]

ES10 ile birlikte gelen Object.fromEntries() metodu ise bu işlemin tam tersini gerçekleştirerek dizilerden tekrar nesne üretir.

Object.getOwnPropertyDescriptors()

Bir nesnenin tüm kendi nitelik tanımlayıcılarını (property descriptors) içeren bir nesne döndürür. Eğer nesnenin herhangi bir tanımlı niteliği yoksa boş bir nesne döndürür.

const object1 = {
  property1: 42
};

const descriptors1 = Object.getOwnPropertyDescriptors(object1);

console.log(descriptors1.property1.writable);     // true
console.log(descriptors1.property1.value);        // 42
console.log(descriptors1);
/*
Çıktı:
{
  property1: { value: 42, writable: true, enumerable: true, configurable: true }
}
*/

Object.values()

Bir nesnenin sadece değerlerini (values) bir dizi (array) olarak döndürür.

const colors = { B: 'Blue', OR: "Orange", YE: "Yellow", PI: "Pink" };
console.log(Object.values(colors)); // ['Blue', 'Orange', 'Yellow', 'Pink']

Trailing Commas (Sondaki Parametre Virgülleri)

ES5'e kadar bir dizi ya da nesnenin sonundaki virgül hata veriyordu. Bu durum ES5 ile hata olmaktan çıksa da fonksiyon tanımları ve fonksiyon çağrılarında parametreleri virgülle bitiremiyorduk. ES8 ile birlikte fonksiyon tanımları ve çağrılarında da trailing comma kullanımının önü açılmış oldu:

// Fonksiyon tanımında son parametreden sonra virgül kullanımı
function sendMessage(message, email1, email2,) {
  // ...
}

// Fonksiyon çağrısında son parametreden sonra virgül kullanımı
sendMessage("Merhaba", "test1@mail.com", "test2@mail.com",);

Async/Await

Eskiden çağırdığımız asenkron fonksiyonlarda, belirli olaylar gerçekleştiğinde çalıştırılmak üzere callback fonksiyonları göndermek zorundaydık. ES8 ile birlikte gelen async/await yapısı, asenkron işlemler için çok daha kullanışlı, temiz ve okunabilir bir çözüm getirdi.

async function anahtar kelimeleri ile tanımladığımız fonksiyonlar bir AsyncFunction nesnesi döndürür. Bu şekilde tanımlanmış bir fonksiyon çağrıldığında bir Promise döndürür. Bir asenkron fonksiyon değer döndüreceği zaman bu Promise çözülür (resolve). Eğer bir hata gerçekleşirse Promise reddedilir (reject).

Asenkron bir fonksiyon await tanımlaması içerebilir. Bu tanım, fonksiyonun çalışmasını durdurur ve Promise'in yanıt döndürmesini bekler. Yanıt alınınca asenkron fonksiyonun çalışmasına devam edilir.

function resolveAfter2Seconds() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve('çözüldü');
    }, 2000);
  });
}

// Fonksiyonu asenkron olarak tanımlıyoruz.
async function asyncCall() {
  console.log("Promise'i çağırıyoruz");
  // Promise tamamlanıp değer döndürülene kadar duraklar ve değer dönünce result sabitine atar.
  const result = await resolveAfter2Seconds();
  console.log(result);
  // beklenen çıktı: "çözüldü"
}

asyncCall();

// Kaynak: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function

Bu Yazıda Yapılan Değişiklikler

11.05.2022: Yazı özeti düzenlendi.
21.06.2026: Kod örneklerindeki çalışma zamanı hataları giderildi, yazım hataları düzeltildi, TL;DR özet ve metot karşılaştırma tablosu eklendi.