#4 Destructuring Kavramı

Ecmascript6 ile karşımıza çıkan yeni özelliklerden bir tanesi de Destructuring kavramıdır. Destructuring dizilerden, nesnelerden veya objelerden elde edilen değerlerin parçalanılarak farklı değişkenlere kolayca aktarılmasını sağlar.

3 elamanlı bir dizideki değerleri destructuring kavramı ile farklı değişkenlere aktarımı şu şekildedir:

[x,y,z] = [10,100,1000];

console.log(x);
console.log(y);
console.log(z);

//Console: 10
//         100
//         1000

Rest parametresi içeren bir parçalama işlemi:

[a, b, ...rest] = [12, 45, 47, 78, 112,155,178];
console.log(a); 
console.log(b); 
console.log(rest);
//Console: 12
//         45
//         [ 47, 78, 112, 155, 178 ]

Destructuring kavramı ile tanışmadan önce dizilerdeki değişkenlerin nasıl farklı değişkenlere dağıtıldığını bir örnek üzerinden inceleyelim:

let futbolcuBilgisi = ["Merih","Demiral",21];
let name = futbolcuBilgisi[0];
let surname = futbolcuBilgisi[1];
let age = futbolcuBilgisi[2];
console.log(name,surname,age)
//Console: Merih Demiral 21

Şimdi de aynı işlemi destructuring özelliği uygulayarak yeniden yazalım:

let futbolcuBilgisi = ["Merih","Demiral",21];
let [name,surname,age] = futbolcuBilgisi;
console.log(name,surname,age)
//Console: Merih Demiral 21

Diziler üzerinde olduğu gibi aynı kavram objeler üzerinde de geçerlidir:

let futbolcuBilgisi = {name:"Çağlar", surname:"Söyüncü", age:23};
let {name,surname,age} = futbolcuBilgisi;
console.log(name,surname,age)
//Console: Çağlar Söyüncü 23

Destructuring işlemi yapılırken atanacak değişkenlere varsayılan değer atanabilir. Eğer o değişkene değer atanmadığı zaman default değer geçerli olur. Eğer bir değer atanmışsa ise atanan değer default değeri ezer:

let futbolcuBilgisi = {name:"Cengiz", surname:"Ünder"};
let {name,surname,age="Belirtilmemiş"} = futbolcuBilgisi;
console.log(name,surname,age)
//Console: Cengiz Ünder Belirtilmemiş

Değişken atamaları yaparken eğer bir değeri atlamak istiyorsak “,” ibaresini kullanarak o değeri boş sayabiliriz:

// Başta ve sonda 2 kere "," kullarak o değerleri atlamış ve ortadaki değeri almış olduk.
let futbolcuİsimleri = ["Yusuf","Cengiz","Merih","Cenk","Ozan"];
let [,,name,,] = futbolcuİsimleri;
console.log(name)
//Console: Merih

Daha fazlası için: - Destructuring assignment - JavaScript | MDN