crazy_coder
Moderatör
- Katılım
- 20 Şub 2026
- Mesajlar
- 204
- Tepkime puanı
- 0
- Puanları
- 16
1. Obje Destructuring (Nesne Parçalama)
Bir objenin içindeki özellikleri, anahtar isimlerini kullanarak doğrudan değişkenlere atayabiliriz. Bu, özellikle API'den gelen karmaşık kullanıcı verilerinde hayat kurtarır.
JavaScript:
const kullanıcı = {
id: 1,
ad: "Can",
soyad: "Yılmaz",
meslek: "Geliştirici"
};
// Eski Yöntem:
// const ad = kullanıcı.ad;
// const meslek = kullanıcı.meslek;
// Modern Destructuring Yöntemi:
const { ad, meslek } = kullanıcı;
console.log(ad); // Can
console.log(meslek); // Geliştirici
[]Farklı İsimle Atama: Eğer objedeki anahtar ismiyle değil de kendi belirlediğiniz bir isimle değişken oluşturmak isterseniz : kullanabilirsiniz.
[]Varsayılan Değer: Eğer objede o özellik yoksa hata almak yerine varsayılan bir değer atayabilirsiniz.
JavaScript:
const { ad: kullaniciAdi, yas = 25 } = kullanıcı;
console.log(kullaniciAdi); // Can
console.log(yas); // 25 (Objede olmadığı için varsayılan değer geldi)2. Dizi Destructuring (Dizi Parçalama)
Dizilerde parçalama işlemi elemanların sırasına (index) göre yapılır. Köşeli parantez [] kullanarak elemanları değişkenlere dağıtabiliriz.
JavaScript:
const renkler = ["Kırmızı", "Mavi", "Yeşil", "Sarı"];
// İlk iki rengi alalım
const [birinci, ikinci] = renkler;
console.log(birinci); // Kırmızı
console.log(ikinci); // Mavi
// Bazı elemanları atlamak isterseniz boşluk bırakabilirsiniz:
const [ilk, , ucuncu] = renkler;
console.log(ucuncu); // Yeşil3. Spread (...) Operatörü ile Destructuring
Verileri parçalarken "geriye kalan her şeyi bir yere topla" demek istiyorsak üç nokta ... (Rest operatörü) kullanırız.
JavaScript:
const sayilar = [1, 2, 3, 4, 5];
const [bas, ...kalanlar] = sayilar;
console.log(bas); // 1
console.log(kalanlar); // [2, 3, 4, 5] (Yeni bir dizi olarak döner)4. Fonksiyon Parametrelerinde Destructuring
Bu yöntem, büyük objeleri fonksiyonlara gönderirken sadece ihtiyacımız olan kısımları içeri almak için mükemmeldir. Modern frameworklerde (React gibi) en çok bu yapıyı görürsünüz.
JavaScript:
const urun = {
baslik: "Laptop",
fiyat: 15000,
stok: 20
};
// Objenin tamamını değil, sadece baslik ve fiyatı içeri alıyoruz
function urunOzet({ baslik, fiyat }) {
console.log(${baslik} ürünü ${fiyat} TL fiyata sahiptir.);
}
urunOzet(urun);Pratik Bir İpucu: Değişkenlerin Yerini Değiştirmek
Destructuring ile geçici bir değişken (temp) kullanmadan iki değişkenin değerini takas edebilirsiniz:
JavaScript:
let a = 1;
let b = 2;
[a, b] = [b, a];
console.log(a); // 2
console.log(b); // 1Sonuç
Destructuring, kodunuzu daha az satırla, daha okunabilir ve daha modern hale getiren bir araçtır. Bir kez alıştıktan sonra eski usul tek tek atama yapmak size çok zahmetli gelecektir. Veri yapılarını parçalayarak sadece ihtiyacınız olana odaklanın!