JavaScript’te Destructuring Assignment

eminbasbayan

4 dk okuma

JavaScript destructuring gösterimi, dizi ve obje elemanlarını ayırma ve değişkenlere atama örneği.

🔍 Büyütmek için tıklayın

İçindekiler

Bu yazıda neler var?

JavaScript, verileri işlemede çok güçlü bir dildir ve bazen uzun yazımlar yerine kısa ve temiz kodlarla aynı işlemleri yapabilmek çok işimizi kolaylaştırır. Bu yazıda, JavaScript’te destructuring özelliğinden nasıl yararlanabileceğimizi, özellikle dizi destructuring (array destructuring) ve obje destructuring (object destructuring) yöntemlerini ayrıntılı bir şekilde açıklayacağız. Bu özellikler, dizilerden veya objelerden değerleri alıp doğrudan değişkenlere atamak için kullanılır ve yazdığımız kodları daha anlaşılır, daha temiz ve kısa hale getirir.

Destructuring Nedir?

Destructuring, bir dizi veya objedeki elemanları başka değişkenlere çıkartmak için kullanılan bir yöntemdir. Bu özellik, uzun uzun dizi veya obje elemanlarını tek tek referans almayı gerektirmeden, hepsini tek seferde çıkarıp atamamıza olanak tanır. Yani, veriyi “paketinden” çıkarıp, istediğimiz şekilde “ayrı ayrı” alırız. Bunu örneklerle daha iyi anlayacağız.

Dizi Destructuring (Array Destructuring)

Dizi Elemanlarını Ayırma

Diyelim ki bir dizimiz var ve bu dizi öğrencilerin sınav notlarını içeriyor:

const notlar = [85, 90, 78, 92, 88];

Eğer bu diziden sadece ilk iki sınav notunu almak istiyorsak, normalde şu şekilde yaparız:

const birinciNot = notlar[0];
const ikinciNot = notlar[1];

Ancak destructuring ile bu işlemi çok daha kısa bir şekilde yapabiliriz:

const [birinciNot, ikinciNot] = notlar;

Bu kod, dizinin ilk iki elemanını sırasıyla birinciNot ve ikinciNot değişkenlerine atar. Bu şekilde, her bir elemanı manuel olarak tek tek almak yerine, kısa ve temiz bir şekilde diziyi doğrudan parçalara ayırmış olduk.

Sıra Önemlidir

Destructuring yaparken, elemanların sırası oldukça önemlidir. Dizi elemanları, sırasıyla değişkenlere atanır. Yani dizinin ilk elemanı ilk değişkene, ikinci eleman ise ikinci değişkene atanır. Örneğin:

const [ilk, ikinci, ucuncu] = [5, 10, 15];
console.log(ilk); // 5
console.log(ikinci); // 10
console.log(ucuncu); // 15

Eğer sıralama karışırsa, atanan değerler de karışır. Bu yüzden dizinin elemanlarını doğru sırada aldığınızdan emin olmalısınız.

Dizinin Değişmeden Kalması

Destructuring işlemiyle dizinin kendisini değiştirmiyoruz. Sadece dizinin içindeki değerleri farklı değişkenlere aktarıyoruz. Yani dizinin elemanlarını alıp başka bir değişkenle kopyaladığımızda, dizinin kendisi hala aynı kalır. Örneğin:

const ogrenciler = ["Ali", "Ayşe", "Mehmet"];
const [ilkOgrenci, ikinciOgrenci] = ogrenciler;
console.log(ogrenciler); // ["Ali", "Ayşe", "Mehmet"]

Burada ogrenciler dizisinin kendisi değişmeden kalır, sadece diziden bazı değerler alınarak farklı değişkenlere aktarılır.

Obje Destructuring (Object Destructuring)

Dizilerde olduğu gibi, objelerden de değerleri kolayca çıkartabiliriz. Ancak dizilerde sıralama önemliyken, objelerde isim eşleşmesi (property name matching) önemlidir.

Diyelim ki elimizde bir öğrenci nesnesi (object) var:

const ogrenci = {
  ad: "Zeynep",
  yas: 22,
  bolum: "Bilgisayar Mühendisliği"
};

Normalde bu değerleri almak için şu şekilde yazarız:

const ad = ogrenci.ad;
const yas = ogrenci.yas;
const bolum = ogrenci.bolum;

Ancak obje destructuring ile bu işlemi çok daha kısa yapabiliriz:

const { ad, yas, bolum } = ogrenci;

Bu kod, ogrenci nesnesinin içindeki ad, yas ve bolum değerlerini aynı isimlerle yeni değişkenlere aktarır.

Farklı İsimle Değer Alma

Eğer obje içindeki property adlarıyla aynı isimde değişken kullanmak istemiyorsak, destructuring sırasında farklı isimler verebiliriz. Örneğin:

const { ad: isim, yas: ogrenciYasi } = ogrenci;
console.log(isim); // "Zeynep"
console.log(ogrenciYasi); // 22

Burada ad property'si isim adlı değişkene, yas property'si ise ogrenciYasi adlı değişkene atanmıştır.

Varsayılan (Default) Değer Atama

Obje içinde olmayan bir property’yi destructure etmeye çalışırsak, JavaScript undefined döner. Bunu önlemek için varsayılan değer (default value) atayabiliriz:

const { ad, yas, universite = "Bursa Uludağ Üniversitesi" } = ogrenci;
console.log(universite); // "Bursa Uludağ Üniversitesi"

Eğer ogrenci objesinde universite property’si bulunmuyorsa, belirtilen varsayılan değer kullanılır.

İç İçe (Nested) Obje Destructuring

Bir obje içinde başka bir obje varsa, onun içindeki değerlere de destructuring ile kolayca ulaşabiliriz:

const kullanici = {
  isim: "Emir",
  adres: {
    sehir: "İzmir",
    postaKodu: 35000
  }
};

const {
  adres: { sehir, postaKodu }
} = kullanici;

console.log(sehir); // "İzmir"
console.log(postaKodu); // 35000

Burada adres objesinin içindeki sehir ve postaKodu doğrudan dışarı çıkarılmıştır.

Destructuring’in Avantajları

Daha Temiz Kod: Hem dizilerde hem objelerde daha kısa ve anlaşılır kod yazmamızı sağlar.
Daha Az Hata: Her bir değişkenin hangi değeri aldığı açıkça görülür.
Okunabilirlik: Kodun amacı ilk bakışta anlaşılır hale gelir.
Kolay Entegrasyon: API’lardan veya JSON verilerinden gelen objelerle çalışırken özellikle çok işe yarar.