ECMAScript 6 – Destructuring

Merhaba,

Elimizdeki nesneleri yahut dizileri var olan mevcut yapılarından daha küçük parçalara ayırmak isteyebiliriz. ECMAScript 6 ile gelen Destructuring özelliği bu isteğimize karşılık olarak nesneleri ya da dizileri parçalayabilmekte ve bu işlem neticesinde işimize yarayan parçalardan istediğimizi çekip kullanma özgürlüğünü bizlere tanımaktadır.

Şimdi gelin Destructuring özelliğini nesneler ve diziler için ayrı ayrı ele alalım.

Objeler İçin Destructuring

let personel = {
    Adi: "Gençay",
    Soyadi: "Yıldız"
};

Yukarıdaki nesneyi ele alırsak eğer; nesne içerisindeki “Adi” ve “Soyadi” propertylerini farklı parçalarda elde etmek için Destructuring özelliğinden önce aşağıdaki gibi çalışmaktaydık.

let Adi = personel.Adi, Soyadi = personel.Soyadi;
console.log(Adi, Soyadi);

Destructuring özelliği ise bu işlemi daha pratik ve kullanılabilir bir hale getirmektedir;

let { Adi, Soyadi } = personel;
console.log(Adi, Soyadi);

Yukarıdaki kod bloğunu incelerseniz eğer “personel” nesnesini parçalayacak yapımız “let { Adi, Soyadi }” şeklinde tanımlanmaktadır. Burada dikkat edilmesi gereken husus, Destructuring özelliği uygulanan değişkendeki property isimleriyle, nesnedeki property isimleri birebir aynı olmak zorundadır.

Eğer ki, tanımlanan değişkenlere farklı isim vermek istiyorsanız aşağıdaki gibi bir çalışma gerçekleştirilmesi gerekmektedir.

let { Adi: adi, Soyadi: soyadi } = personel;
console.log(adi, soyadi);

Burada gördüğünüz üzere değişkenlere bir nevi alias atama işlemi gerçekleştirilmiştir. Tabi bu aliaslar atandıkları değişkenlerin fiziksel isimlerini ezeceklerinden dolayı kullanılamaz hale getirmektedirler.

İç Objeler İçin Destructuring

Elimizde aşağıdaki gibi nesnemiz olduğunu düşünelim;

let personel = {
    Adi: "Gençay",
    Soyadi: "Yıldız",
    Memleket: {
        Il: "Artvin",
        Ilce: "Arhavi"
    }
};

Nesne içerisindeki “Memleket” nesnesini parçalamak için aşağıdaki gibi bir çalışma gerçekleştirilmesi gerekmektedir;

let { Memleket: { Il, Ilce } } = personel;
console.log(Il, Ilce);

İşte bu kadar basit. Diğer propertyleride parçalayalım diyorsanız eğer;

let { Memleket: { Il, Ilce }, Adi, Soyadi } = personel;
console.log(Il, Ilce, Adi, Soyadi);

buyrun sizi kırmamış olalım.
Hatta bu çalışmayı alias ile zenginleştirmekte benden olsun 🙂

let { Memleket: { Il: il, Ilce: Ilce }, Adi: adi, Soyadi: soyadi } = personel;
console.log(il, Ilce, adi, soyadi);

Diziler İçin Destructuring

let personeller = ["Ali", "Veli", "Hilmi"];

Elimizde yukarıdaki gibi bir dizi olduğunu varsayalım. Normal şartlarda verileri elde etmek için aşağıdaki gibi indexer temelli bir çalışma sergiliyorduk.

let p1 = personeller[0];
let p2 = personeller[1];
let p3 = personeller[2];
console.log(p1, p2, p3);

Destructuring ile bu işlemi daha pratik bir şekilde yaparsak eğer;

let [p1, p2, p3] = personeller;
console.log(p1, p2, p3);

şeklinde çalışmamız yeterli olacaktır. Burada dikkat edilmesi gereken husus, dizilerde Destructuring uyguluyorsak eğer parçaları oluşturan değişkenlerin syntax yapısında köşeli parantez kullanılmalıdır.

İç İçe Diziler İçin Destructuring

Eğer ki elimizdeki dizi aşağıdaki gibi içerisinde başka bir dizi barındırıyorsa;

let personeller = ["Ali", "Veli", "Hilmi", [1, 2, 3]];

ve Destructuring ile alt dizideki değerleride elde etmek istiyorsanız aşağıdaki gibi çalışmanız yeterli olacaktır.

let [p1, p2, p3, [a1, a2, a3]] = personeller;
console.log(p1, p2, p3, a1, a2, a3);

Sonraki yazılarımda görüşmek üzere…
İyi çalışmalar…