[NODE JS] Destructuring ile Değişken Atama

[Silverhand]

Ayyıldız2 | 2008 TR Yapısı • 1-99 Orta Emek Destan • Oto Avsız • 10 Temmuz 21:00 HEMEN TIKLA!

[NODE JS] Destructuring ile Değişken Atama​

Selam arkadaşlar. Bugün ES6'nın en çok kullandığım özelliklerinden birinden bahsedeceğiz: destructuring. Destructuring sayesinde obje ve array'lerden değerleri çıkarıp değişkenlere atamak inanılmaz kolay hale geliyor. Bu özelliği öğrendikten sonra kod yazma tarzım tamamen değişti, çok daha temiz ve okunabilir kod yazmaya başladım.

Object Destructuring​

En sık kullandığım destructuring türü obje destructuring. Bir objenin property'lerini ayrı ayrı değişkenlere atamak eski yöntemle çok zahmetliydi. Her property için ayrı bir satır yazmanız gerekiyordu. Destructuring ile tek satırda hallediyor.

Tecrübeme göre destructuring'i en çok API response'larını parse ederken, fonksiyon parametrelerinde ve modül import'larında kullanıyorum. Özellikle fonksiyon parametrelerinde obje destructuring kullanmak kodu çok daha okunabilir yapıyor çünkü fonksiyonu çağıran kişi parametrelerin ne olduğunu açıkça görüyor.

// === OBJECT DESTRUCTURİNG ===

const kullanici = {
    isim: 'Ahmet',
    soyisim: 'Yılmaz',
    yas: 28,
    email: 'ahmet@example.com',
    adres: {
        sehir: 'İstanbul',
        ilce: 'Kadıköy',
        postaKodu: '34710'
    },
    hobiler: ['kodlama', 'yüzme', 'okuma'],
    aktif: true
};

// Eski yöntem
const isimEski = kullanici.isim;
const yasEski = kullanici.yas;

// Destructuring ile
const { isim, soyisim, yas, email } = kullanici;
console.log(isim, soyisim, yas); // Ahmet Yılmaz 28

// Farklı isimle atama (aliasing)
const { isim: ad, soyisim: soyad } = kullanici;
console.log(ad, soyad); // Ahmet Yılmaz

// Varsayılan değer atama
const { telefon = 'Belirtilmemiş', aktif = false } = kullanici;
console.log(telefon); // 'Belirtilmemiş' (property yok)
console.log(aktif);   // true (property var, varsayılan kullanılmaz)

// İç içe (nested) destructuring
const { adres: { sehir, ilce } } = kullanici;
console.log(sehir, ilce); // İstanbul Kadıköy

// Rest ile kalan property'leri toplama
const { isim: ad2, yas: yas2, ...kalanlar } = kullanici;
console.log(kalanlar); // { soyisim, email, adres, hobiler, aktif }

// Fonksiyon parametrelerinde destructuring
function kullaniciBilgisi({ isim, yas, email, adres: { sehir } = {} }) {
    console.log(`${isim} (${yas}) - ${sehir} - ${email}`);
}
kullaniciBilgisi(kullanici);

// Opsiyonel parametreler ile
function ayarla({
    host = 'localhost',
    port = 3000,
    debug = false,
    loglama = { seviye: 'info', dosya: 'app.log' }
} = {}) {
    console.log(`Sunucu: ${host}:${port}`);
    console.log(`Debug: ${debug}`);
    console.log(`Log seviyesi: ${loglama.seviye}`);
}

ayarla({ port: 8080, debug: true });
ayarla(); // Tüm varsayılanlar kullanılır

Array Destructuring​

Array destructuring de çok kullanışlı ama obje destructuring'e göre biraz daha az kullanıyorum. Array'lerde sıra önemli, hangi indeksteki değeri hangi değişkene atayacağınızı sıraya göre belirlersiniz. Swap işlemi ve fonksiyondan birden fazla değer döndürme gibi senaryolarda çok pratik.

Ha bu arada, array destructuring ile değişken swap yapmak en sevdiğim kullanımlardan biri. Geçici değişken falan gerekmiyor, tek satırda hallediyorsunuz.

// === ARRAY DESTRUCTURİNG ===

const renkler = ['kırmızı', 'yeşil', 'mavi', 'sarı', 'mor'];

// Temel kullanım
const [birinci, ikinci, ucuncu] = renkler;
console.log(birinci, ikinci, ucuncu); // kırmızı yeşil mavi

// Elemanları atlama
const [, , uc, , son] = renkler;
console.log(uc, son); // mavi mor

// Rest ile kalanları toplama
const [ilk, ...geriKalan] = renkler;
console.log(ilk);        // kırmızı
console.log(geriKalan);  // ['yeşil', 'mavi', 'sarı', 'mor']

// Varsayılan değer
const [a, b, c, d, e, f = 'turuncu'] = renkler;
console.log(f); // turuncu (6. eleman yok, varsayılan kullanıldı)

// Değişken swap - Çok pratik!
let x = 'birinci';
let y = 'ikinci';
console.log('Önce:', x, y);
[x, y] = [y, x];
console.log('Sonra:', x, y); // ikinci birinci

// Fonksiyondan birden fazla değer döndürme
function koordinatHesapla(aci, mesafe) {
    const radyan = (aci * Math.PI) / 180;
    const xKoord = Math.cos(radyan) * mesafe;
    const yKoord = Math.sin(radyan) * mesafe;
    return [xKoord, yKoord];
}

const [xPos, yPos] = koordinatHesapla(45, 100);
console.log(`X: ${xPos.toFixed(2)}, Y: ${yPos.toFixed(2)}`);

// String split ile destructuring
const tarih = '2026-07-12';
const [yil, ay, gun] = tarih.split('-');
console.log(`Gün: ${gun}, Ay: ${ay}, Yıl: ${yil}`);

// Regex match ile destructuring
const url = 'https://api.example.com:8080/users';
const eslesme = url.match(/^(https?):\/\/([^:\/]+):?(\d+)?\/(.*)/);
if (eslesme) {
    const [, protokol, host, port, yol] = eslesme;
    console.log(`Protokol: ${protokol}`);
    console.log(`Host: ${host}`);
    console.log(`Port: ${port || '80'}`);
    console.log(`Yol: ${yol}`);
}

// Karışık destructuring - gerçek dünya örneği
const apiYanit = {
    durum: 200,
    veri: {
        kullanicilar: [
            { id: 1, isim: 'Ahmet', roller: ['admin', 'user'] },
            { id: 2, isim: 'Ayşe', roller: ['user'] }
        ],
        toplam: 2,
        sayfa: 1
    },
    meta: {
        sure: '45ms',
        onbellek: true
    }
};

const {
    durum,
    veri: {
        kullanicilar: [ilkKullanici, ...digerKullanicilar],
        toplam
    },
    meta: { sure }
} = apiYanit;

console.log(`Durum: ${durum}`);
console.log(`İlk kullanıcı: ${ilkKullanici.isim}`);
console.log(`Toplam: ${toplam}`);
console.log(`Süre: ${sure}`);

Destructuring'i günlük kodda ne kadar çok kullanırsanız o kadar alışırsınız. Başta karmaşık görünebilir ama bir hafta yoğun kullandıktan sonra onsuz kod yazamaz hale gelirsiniz. Benden söylemesi, özellikle API response'larını parse ederken destructuring hayat kurtarıcı. Kolay gelsin.

 

[devemoji]

Paylaşım için teşekkür ederiz.