JavaScript destructuring nedir?

Mehmet · Dün 21:08 da

JavaScript destructuring nedir?

JavaScript destructuring, dizi veya nesnelerin içindeki değerleri tek tek erişim ifadeleri yazmadan değişkenlere ayırma sözdizimidir. Dizi için köşeli parantez, nesne için süslü parantez kullanılır. Özellikle fonksiyon parametrelerini, API yanıtlarını ve ayar nesnelerini daha okunabilir biçimde kullanmayı sağlar.

Dizi destructuring nasıl çalışır?

Dizide atama konuma göre yapılır; ilk değişken ilk elemana, ikinci değişken ikinci elemana karşılık gelir.

Kod:

const renkler = ["kırmızı", "yeşil", "mavi"];
const [birinci, ikinci, üçüncü] = renkler;

console.log(birinci); // kırmızı
console.log(ikinci);  // yeşil
console.log(üçüncü);  // mavi

Bir öğeyi atlamak için ilgili konuma virgül koyabilirsiniz. Kalan öğeleri almak için rest sözdizimi (...) kullanılır:

Kod:

const sayilar = [10, 20, 30, 40];
const [ilk, , üçüncü, ...kalanlar] = sayilar;

console.log(ilk);       // 10
console.log(üçüncü);    // 30
console.log(kalanlar);  // [40]

Dizide karşılık gelen eleman yoksa değer undefined olur. Varsayılan değer tanımlayarak bunu önleyebilirsiniz:

Kod:

const [ad = "Bilinmiyor"] = [];
console.log(ad); // Bilinmiyor

Nesne destructuring nasıl çalışır?

Nesnelerde eşleştirme konuma göre değil, özellik adına göre yapılır. Değişken adını farklı seçmek için iki nokta kullanılır:

Kod:

const kullanici = {
  ad: "Deniz",
  rol: "editör",
  aktif: true
};

const { ad, rol: kullaniciRolu } = kullanici;

console.log(ad);            // Deniz
console.log(kullaniciRolu); // editör

Özellik yoksa varsayılan değer kullanılabilir. Rest sözdizimi ise seçilmeyen özellikleri yeni bir nesnede toplar:

Kod:

const hesap = {
  id: 7,
  ad: "Deniz",
  eposta: "[email protected]"
};

const { id, ...profil } = hesap;

console.log(id);     // 7
console.log(profil); // { ad: "Deniz", eposta: "[email protected]" }

Aşağıdaki tablo, hangi durumda hangi sözdiziminin tercih edileceğini özetler:

İhtiyaç	Sözdizimi	Eşleştirme biçimi
Dizinin ilk elemanlarını almak	`const [a, b] = dizi`	Konuma göre
Belirli nesne özelliklerini almak	`const { ad } = nesne`	Özellik adına göre
Kalan değerleri toplamak	`...kalanlar`	Artakalan öğe veya özellikler

Bu ayrım önemlidir: dizi destructuring'de değişkenlerin sırası değişirse alınan değer de değişir; nesne destructuring'de sıra önemli değildir, özellik adı önemlidir.

Fonksiyonlarda kullanım

Destructuring, fonksiyona gönderilen nesnenin yalnızca gereken özelliklerini doğrudan parametre olarak almayı sağlar:

Kod:

function selamla({ ad, rol = "üye" }) {
  return `${ad} (${rol})`;
}

console.log(selamla({ ad: "Deniz" }));
// Deniz (üye)

Fonksiyonun parametresi hiç gönderilmeyebiliyorsa, dış nesne için de varsayılan değer vermek gerekir:

Kod:

function ayarlariOku({ tema = "açık" } = {}) {
  return tema;
}

console.log(ayarlariOku()); // açık

Uygularken dikkat edilecek noktalar

Verinin dizi mi nesne mi olduğunu belirleyin. Dizi için [], nesne için {} kullanın.
Nesnede değişken adını değiştirecekseniz özellik: yeniAd biçimini kullanın; const { yeniAd } özelliği otomatik olarak bulmaz.
Eksik verinin kabul edilebilir olduğu durumlarda varsayılan değer ekleyin. Ancak null, varsayılan değeri tetiklemez; varsayılan yalnızca değer undefined olduğunda kullanılır.
Dışarıdan gelen verinin kesin yapısı bilinmiyorsa destructuring'den önce uygun doğrulama yapın. Yanlış veri şekli, özellikle iç içe destructuring sırasında hata oluşturabilir.
Mevcut değişkenlere nesne destructuring ataması yaparken ifade başındaki süslü parantezin blok sanılmaması için ({ ad } = kullanici); yazın. Dizi atamasında [a, b] = deger; için bu parantez gerekliliği yoktur. Değişkenleri önceden let ile tanımlayın; const bağını yeniden atayamazsınız.

Eksik dış veri için varsayılan tek başına yetmez

{ tema = "açık" } = {} biçimindeki parametre varsayılanı, argüman gönderilmediğinde veya undefined olduğunda çalışır; null gönderildiğinde destructuring hata verir. Dizi kalıbı ise yalnız dizilerde değil, string gibi iterable değerlerde de çalışır. Sıradan bir nesnenin otomatik olarak iterable olduğunu varsaymayın. Yukarıdaki örnekler ayrı kod parçalarıdır; aynı dosyada adları tekrar const ile bildirmeyin.

Sık sorulan sorular

Destructuring ile orijinal nesne veya dizi değişir mi?

Hayır. Destructuring yalnızca değerleri değişkenlere bağlar; kaynak dizi veya nesne doğrudan değiştirilmez. Ancak alınan değer bir nesne ya da dizi referansıysa, o iç değerde yapılan değişiklik kaynak yapıyla paylaşılabilir.

Destructuring ile spread arasındaki fark nedir?

Destructuring mevcut yapıdan değerleri ayırır. Spread sözdizimi ise değerleri başka bir diziye, nesneye veya fonksiyon çağrısına yaymak için kullanılır. Destructuring kalıbındaki ...kalanlar rest’tir; kalan değerleri toplar. Spread ise başka bir nesne/dizi veya çağrı içine değer yayar. Görünüşleri aynı olsa da sözdizimindeki konumları ve görevleri farklıdır.

JavaScript destructuring nedir?

Mehmet