ES6 Nedir? ECMAScript 2015 Nedir?

Sayfayı kopyala
ECMAScript (kısaca ES), Ecma International tarafından standartlaştırılmış ve JavaScript'in çekirdek kurallarını belirleyen bir dildir. ES6, JavaScript tarihindeki en büyük, en devrimsel güncellemeleri barındıran dönüm noktasıdır.
💡 Özet (TL;DR):
- ES6 Nedir?: Haziran 2015'te yayınlanan 6. ECMAScript sürümüdür. ECMAScript 2015 olarak da bilinir.
- Kilit Yenilikler:
let/const, Arrow Functions, Template Literals, Promises, Classes, Rest/Spread (...), Destructuring ve Generators.- Motto: Modern JavaScript'in doğuşu: Güvenli değişkenler, temiz asenkron akışlar ve yerleşik sınıf yapıları.
ES6 Sürümüyle Gelen Yenilikler
ES6, JavaScript'e hem yeni yazım kolaylıkları (syntactic sugar) hem de asenkron programlama ve nesne yönelimli programlama için yerleşik altyapılar kazandırmıştır.
1. Let & Const (Blok Kapsamı)
ES5'e kadar JavaScript'te sadece global kapsam (scope) ve fonksiyon kapsamı (var ile tanımlanan değişkenler) bulunuyordu. ES6 ile birlikte süslü parantezler {} arasında geçerli olan blok kapsamı (block scope) hayatımıza girdi.
var b = 10;
function myFunction() {
let c = 20;
console.log('değer 1:', c); // 20
if (b === 10 && c === 20) {
let d = 30;
console.log("değer 2:", d); // 30
}
console.log("değer 1", c); // 20
// console.log("değer 2", d); // Hata fırlatır! d sadece if bloğunda geçerlidir.
}
myFunction();
const da let ile benzer şekilde blok kapsamına sahiptir. Ancak const ile tanımlanan değişkenlere tanımlandığı an değer atanmalıdır ve bu değer daha sonra yeniden atanamaz (re-assigned):
const PI = 3.14159;
// PI = 3; // Hata: Assignment to constant variable.
var vs let vs const Karşılaştırması
| Özellik | var | let | const |
|---|---|---|---|
| Kapsam (Scope) | Fonksiyon Kapsamı (Function) | Blok Kapsamı (Block) | Blok Kapsamı (Block) |
| Yeniden Değer Atama | Serbest | Serbest | Yasak |
| Hoisting Tepkisi | undefined olarak tanımlanır | Hata verir (Temporal Dead Zone) | Hata verir (Temporal Dead Zone) |
2. For...Of Döngüsü
for...of döngüsü, bir array veya iterable nesnenin elemanları üzerinde doğrudan değerler üzerinden dönebilmemizi sağlar. for...in döngüsü sadece indeksleri dönerken, for...of doğrudan elemanın kendisini sunar:
const arr = ["A", "B", "C"];
// for...in kullanımı (İndeks döner)
for (let i in arr) {
console.log(arr[i]); // A, B, C
}
// for...of kullanımı (Doğrudan değer döner)
for (const value of arr) {
console.log(value); // A, B, C
}
3. Rest Operatörü (...)
Bir fonksiyon parametresinden önce ... koyarsanız, gönderilen argümanların geri kalanını tek bir dizi (array) altında toplar:
function format(pattern, ...params) {
return { pattern, params };
}
console.log(format("test", 1, 2, 3));
// Çıktı: { pattern: "test", params: [ 1, 2, 3 ] }
4. Spread (Dağıtma) Operatörü (...)
Syntax olarak Rest operatörüyle tamamen aynı olsa da işlevi tam tersidir. Bir diziyi veya nesneyi tekil elemanlarına ayırarak kopyalar veya birleştirir:
let arr1 = [1, 2, 3];
let arr2 = [4, 5];
let newArr = [...arr1, ...arr2]; // [1, 2, 3, 4, 5]
console.log(Math.max(...arr1)); // Math.max(1, 2, 3) olarak çalışır ve 3 döner
5. Varsayılan Parametreler (Default Parameters)
ES6 öncesinde fonksiyonlara gönderilmeyen isteğe bağlı parametreler için fonksiyon içinde undefined kontrolleri yapılıyordu. Artık doğrudan fonksiyon imzasında varsayılan değer atanabiliyor:
function greet(name, message = "Merhaba") {
console.log(`${message}, ${name}`);
}
greet("Evren"); // Merhaba, Evren
greet("Evren", "Günaydın"); // Günaydın, Evren
6. Destructuring (Seçmeli Atama)
Bir array veya object (nesne) içerisindeki alanları tek hamlede çıkartıp değişkenlere atamamızı sağlar:
// Array Destructuring
const arr = [1, 2];
const [x, y] = arr; // x = 1, y = 2
// Object Destructuring
const user = { name: "Ahmet", age: 30 };
const { name, age } = user; // name = "Ahmet", age = 30
7. Template Literals (Şablon Dizgileri)
Ters tırnak (backtick ` `) işareti kullanarak string ifadelerin içerisine değişkenleri ${degisken} biçiminde gömmemizi sağlar ve çok satırlı metin yazımını kolaylaştırır:
let a = 1, b = 2;
console.log(`a'nın değeri: ${a}, b'nin değeri: ${b}`);
// Çıktı: a'nın değeri: 1, b'nin değeri: 2
8. Arrow Functions (Ok Fonksiyonları)
Ok fonksiyonları (=>), fonksiyon tanımlamayı kısaltmasının yanında asıl önemli farkını this bağlamında (context) gösterir. Ok fonksiyonlarının kendi this bağlamı yoktur; tanımlandıkları lexical scope'taki this değerini miras alırlar.
const multiply = (x, y) => x * y;
console.log(multiply(3, 5)); // 15
9. Promises (Sözler)
Asenkron işlemleri yönetmek için eskiden kullanılan callback cehennemini (callback hell) engellemek amacıyla gelen yerleşik asenkron çözüm modelidir:
function asyncFunc() {
return new Promise((resolve, reject) => {
let success = true;
if (success) {
resolve("Veri başarıyla geldi.");
} else {
reject("Hata oluştu.");
}
});
}
asyncFunc()
.then(result => console.log(result))
.catch(error => console.error(error));
10. Sınıflar (Classes)
ES6 öncesinde prototip tabanlı (Object.prototype) miras alma yöntemleriyle simüle edilen nesne yönelimli programlama, artık resmi class anahtar kelimesiyle standart bir yapıya kavuşmuştur:
class Point {
constructor(x, y) {
this.x = x;
this.y = y;
}
toString() {
return `(${this.x}, ${this.y})`;
}
}
class ColorPoint extends Point {
constructor(x, y, color) {
super(x, y); // Üst sınıfın kurucusunu çağırır
this.color = color;
}
toString() {
return `${super.toString()} rengi: ${this.color}`;
}
}
const cp = new ColorPoint(25, 8, "yeşil");
console.log(cp.toString()); // (25, 8) rengi: yeşil
11. Generators (Üreticiler)
Generator fonksiyonlar, çalışması istenildiği an durdurulabilen (yield) ve daha sonra kaldığı yerden devam ettirilebilen özel fonksiyonlardır. function* ifadesiyle tanımlanırlar:
function* genFunc() {
console.log('Birinci');
yield 1;
console.log('İkinci');
yield 2;
}
const genObj = genFunc();
console.log(genObj.next()); // "Birinci" yazar, { value: 1, done: false } döner.
console.log(genObj.next()); // "İkinci" yazar, { value: 2, done: false } döner.
12. Map ve Set Veri Yapıları
- Map: Herhangi bir veri tipinde (nesne dahil) anahtar-değer (key-value) çiftleri saklamamızı sağlar.
- Set: Sadece benzersiz (unique) değerleri saklayan bir koleksiyon yapısıdır.
// Map Örneği
const myMap = new Map();
myMap.set("name", "Evren");
// Set Örneği
const mySet = new Set([1, 2, 2, 3]); // Tekrarlanan 2 elenir.
console.log(mySet.size); // 3
13. Proxy & Reflect
- Proxy: Bir nesnenin temel işlemlerine (okuma, yazma, silme) araya girerek müdahale etmemizi sağlayan bir sarmalayıcıdır.
- Reflect: JavaScript nesne operasyonlarını (property okuma, tanımlama vb.) fonksiyonel olarak çağırmamızı sağlayan yerleşik API'dir.
const target = { name: "Evren" };
const handler = {
get: function(target, prop) {
return prop in target ? target[prop] : "Böyle bir alan yok";
}
};
const proxy = new Proxy(target, handler);
console.log(proxy.age); // Çıktı: "Böyle bir alan yok"
Sıkça Sorulan Sorular (FAQ)
Arrow function ile normal fonksiyon arasındaki farklar nelerdir?
- this Bağlamı: Normal fonksiyonlar çağrıldıkları yere göre kendi
thisbağlamlarını oluşturur. Arrow function'lar ise kendithisbağlamına sahip değildir, lexicalthiskullanırlar. - constructor: Arrow function'lar yapıcı metot (
new) olarak kullanılamazlar. - arguments: Arrow function'ların içinde yerleşik
argumentsnesnesi bulunmaz.
const ile tanımlanan bir nesne (Object) değiştirilebilir mi?
Evet. const ataması, nesnenin bellekteki referansının değiştirilemeyeceğini belirtir. Nesnenin içindeki özellikleri eklemek, silmek veya değiştirmek tamamen serbesttir:
const user = { name: "Can" };
user.name = "Ali"; // Geçerli işlem!
// user = { name: "Ali" }; // TypeError! (Yeni referans atanamaz)
Rest ve Spread arasındaki fark nedir?
Aynı sembol (...) kullanılsa da görevleri zıttır:
- Rest: Dağınık verileri bir dizi haline getirir (Toplama işlemi - örn: fonksiyon parametreleri).
- Spread: Bir diziyi ya da nesneyi öğelerine ayırır (Dağıtma işlemi - örn: kopyalama, parametre açma).
Bu Yazıda Yapılan Değişiklikler
- 20.06.2026: Yazı genel olarak modernize edildi. Template literals tırnak hatası, Math.max ve çarpım sonucu gibi kod mantığı hataları giderildi. let/const tablosu ile FAQ bölümü eklendi.
- 11.05.2022: Yazı özeti düzenlendi. İç yazılara linkleme yapıldı.
