JavaScript öğrenme serüveninizde değişkenler, fonksiyonlar, döngüler ve DOM manipülasyonu gibi temel yapı taşlarını geride bıraktınız. Ancak bugün internetteki modern projelere, açık kaynak kodlu kütüphanelere veya React, Vue gibi popüler framework’lere baktığınızda =>, ..., ?., ?? gibi ilk başta yabancı gelebilecek semboller ve kısa yazımlar görebilirsiniz. İşte bu gizemli yapıların tamamı, Modern JavaScript veya genel adıyla ES6+ özellikleridir.
Bu kapsamlı ve SEO uyumlu rehberde, bir zamanlar statik olan web sayfalarına hayat veren JavaScript’in geçirdiği devrimi, kodunuzu nasıl daha kısa, okunabilir ve güçlü hale getireceğinizi bol örneklerle öğreneceğiz.
ECMAScript (ES) Nedir ve ES6 Neden Bu Kadar Önemli?
JavaScript’in tarihi 1995 yılına, Netscape Communications şirketine dayanır. Dilin standartlarını ve kurallarını belirleyen uluslararası kuruma ise Ecma International adı verilir; bu nedenle JavaScript’in resmi standart adı ECMAScript (ES) olarak geçer.
2015 yılına gelindiğinde, JavaScript’in mimarisinde 1997’den o güne kadar yapılmış en devasa ve en radikal güncelleme yayınlandı: ECMAScript 6 (ES6 veya ES2015). Sınıflar (Classes), modüller ve modern sözdizimleri (syntax) gibi pek çok yeniliği barındıran bu sürüm, JavaScript geliştiricileri için o kadar büyük bir dönüm noktası oldu ki, bu tarihten sonra dile eklenen tüm yenilikler yazılım dünyasında kısaca “ES6+” (ES6 ve Sonrası) olarak anılmaya başlandı.
Şimdi bu modern özelliklerin en önemlilerini ve hayatımızı nasıl kolaylaştırdıklarını örneklerle pekiştirelim.
1. Temel ES6 Devrimleri
ES6 ile hayatımıza giren ve kod yazımımızı kökünden değiştiren başlıca özellikler şunlardır:
Değişken Tanımlama: let ve const
Geçmişte JavaScript’te sadece var kelimesi vardı ve bu, kapsam (scope) hatalarına yol açabiliyordu. ES6 ile blok kapsamlı (block-scoped) let ve değeri sonradan değiştirilemeyen sabitler için const hayatımıza girdi. Not: Bu konuyu önceki rehberlerimizde detaylıca incelemiştik.
Ok Fonksiyonları (Arrow Functions)
Geleneksel function kelimesi yerine => (ok) işareti kullanarak fonksiyon yazmamızı sağlayan daha kısa bir sözdizimidir. Özellikle başka fonksiyonlara parametre (callback) gönderirken kodun okunabilirliğini muazzam ölçüde artırır.
Eski Yöntem:
var topla = function(a, b) {
return a + b;
};
Modern ES6+ Yöntemi:
const topla = (a, b) => a + b;
Eğer fonksiyonunuz tek bir işlem yapıp onu döndürüyorsa (return), süslü parantezleri ve return kelimesini yazmanıza bile gerek yoktur.
Şablon Dizgileri (Template Literals)
Geçmişte metinlerle değişkenleri birleştirmek için sürekli + (artı) işareti ve tırnaklar kullanmak zorundaydık. ES6 ile gelen Backtick (`) (ters tırnak) karakterleri sayesinde değişkenleri metnin içine doğrudan ${degisken} formatında gömebiliyoruz.
Eski Yöntem:
var isim = "Ahmet";
var mesaj = "Merhaba " + isim + ", sisteme hoş geldin!";
Modern ES6+ Yöntemi:
const isim = "Ahmet";
const mesaj = `Merhaba ${isim}, sisteme hoş geldin!`; // Çok daha temiz!
Yapı Bozumu (Destructuring)
Bir obje (Object) veya dizi (Array) içindeki verileri dışarı çekip ayrı değişkenlere atamak ES6’nın en şık özelliklerinden biridir.
const kullanici = { ad: "Zeynep", yas: 28, meslek: "Mühendis" };
// Eski yöntem
// const ad = kullanici.ad;
// const yas = kullanici.yas;
// Modern Destructuring Yöntemi
const { ad, yas } = kullanici;
console.log(ad); // Çıktı: Zeynep
Spread ve Rest Operatörleri (...)
Üç nokta (...) kullanarak dizileri veya objeleri kopyalayabilir, genişletebilir veya birleştirebiliriz.
const dizi1 =;
const dizi2 = [...dizi1, 4, 5]; // dizi1'in elemanlarını dizi2'ye "yayar"
console.log(dizi2); // Çıktı:
2. ES6 Sonrasında Gelen Harika Özellikler (ES7 – ES2024)
JavaScript her yıl Haziran ayında yeni bir ECMAScript standardı ile güncellenir. ES6’nın üzerine inşa edilen bu yenilikler, yazılımcıların daha güvenli ve modern kod yazmasını sağlar.
Async / Await (ES8 – 2017)
Önceki konumuzda bahsettiğimiz “Promises” yapısını çok daha anlaşılır hale getiren bir devrimdir. Karmaşık ve iç içe geçmiş (callback hell) asenkron işlemleri, sanki normal senkron kodmuş gibi satır satır yukarıdan aşağıya doğru okumamızı sağlar.
// Sunucudan veri çekme örneği
async function veriGetir() {
try {
const yanit = await fetch('https://api.ornek.com/veri');
const veri = await yanit.json();
console.log(veri);
} catch (hata) {
console.log("Bir hata oluştu", hata);
}
}
İsteğe Bağlı Zincirleme: Optional Chaining ?. (ES11 – 2020)
JavaScript’teki en meşhur hatalardan biri “Cannot read property of undefined” (tanımsız bir nesnenin özelliği okunamıyor) hatasıdır. İç içe geçmiş objelerde, olmayan bir veriye ulaşmaya çalıştığınızda kodunuz çöker. ?. operatörü, özelliğin var olup olmadığını kontrol eder, yoksa kodun çökmesi yerine sadece undefined döndürür.
const kullanici = { ad: "Emre", iletisim: { email: "[email protected]" } };
// Adresi olmadığı için hata verebilir:
// console.log(kullanici.adres.sehir); // Çöker!
// İsteğe Bağlı Zincirleme ile güvenli erişim:
console.log(kullanici.adres?.sehir); // Çökmek yerine 'undefined' yazar.
Boşluk Birleştirme: Nullish Coalescing ?? (ES11 – 2020)
Bir değişkene varsayılan (default) değer atamak için eskiden mantıksal OR (||) kullanırdık. Ancak || operatörü 0 veya false gibi aslında geçerli olan (falsy) değerleri de yok sayardı. ?? operatörü ise sadece ve sadece değer gerçekten null veya undefined ise devreye girer.
const girilenSayi = 0;
const sonucEski = girilenSayi || 10; // Sonuç 10 olur, çünkü 0'ı boş sanır.
const sonucYeni = girilenSayi ?? 10; // Sonuç 0 olur. Güvenli!
Devasa Sayılar: BigInt (ES11 – 2020)
JavaScript’in geleneksel Number veri tipi devasa sayılarda hassasiyetini kaybeder. Yeni BigInt tipi (sayının sonuna n harfi eklenerek oluşturulur), kriptografi ve bilimsel hesaplamalar gibi büyük sayısal verilerde taşma (overflow) yaşanmadan matematiksel işlemler yapmamızı sağlar.
Modern ve Kopyalayan Dizi Metotları (ES2023 – ES2024)
Tarihsel olarak JavaScript’te sort(), reverse(), splice() gibi metotlar orijinal diziyi kalıcı olarak değiştirirdi (mutasyon). Modern JavaScript’te verilerin orijinal halini korumak en iyi pratiklerden biridir. ES2023 ile gelen toSorted(), toReversed() ve toSpliced() metotları orijinal diziyi bozmadan size tamamen yeni, sıralanmış veya değiştirilmiş bir dizi kopyası verir.
Ayrıca ES2022’de gelen findLast() ve findLastIndex() metotları sayesinde, dizileri tersine çevirmek zorunda kalmadan aramaya dizinin en sonundan başlayabilirsiniz.
Geleceğe Bakış: Sırada Ne Var?
JavaScript durmaksızın gelişmeye devam ediyor. ES2025 ve ES2026 yılları için beklenen en büyük yeniliklerin başında, yıllardır JavaScript geliştiricilerinin kanayan yarası olan sorunlu yerleşik Date objesini tamamen değiştirmeyi hedefleyen Temporal API geliyor. Sektörde saat dilimlerini ve tarih hesaplamalarını düzeltmesi planlanan bu API, modern JavaScript’in “piller dahil” (batteries-included) bir dile dönüşmesinin en güzel örneği olacak.
Sonuç
JavaScript’in ES6 ile başlayan ve 2025 vizyonuna kadar devam eden “ES6+” devrimi, dili hantal ve hata yapmaya açık bir yapıdan çıkarıp; güçlü, modüler, hataya yer bırakmayan (güvenli) bir mühendislik platformuna dönüştürmüştür. Başlangıçta bu semboller (??, ?., =>) gözünüze kod karmaşası gibi gelse de, mantığını kavradığınızda ve kendi projelerinizde uygulamaya başladığınızda, yüzlerce satır sürecek işlemleri tek satırda ne kadar zarif bir şekilde çözdüğünüzü göreceksiniz. Kendi yazdığınız daha önceki JavaScript kodlarınızı açıp, onları let, const, Arrow Functions ve Destructuring kullanarak modernize etmeyi deneyerek mükemmel bir antrenman yapabilirsiniz!
