Javascript Harikaları-3 : Destructuring Assignment.

By Tahir Kardak On Jun 24, 2019

Merhaba bu yazımda Javascritpt’in diğer bir güzelliği olan Destructuring Assignment’tan bahsedeceğim. JavaScript için yazmış olduğum önceki yazılarda kendisinden zaman zaman bahsetmiştim. Bu yazıda kendisi hakkında detaylı bilgi vermeye çalışacağım.

Küçük bir hatırlatma: Nesne ile object’i, diziile array’yi ve özellik ile de object içindeki property’yi kastettim.

Destructuring Assignment; elimizde var olan nesne veya dizi gibi yapı(lar)dan(bu yapılar çok büyük olabilir); küçük parça(lar) ayırmak için kullanılır. Destructuring assignment işlemi değer atama işlemi gibi yapılır. Kaynak nesne veya diziden alınmak istenen değer(ler) eşitliğin sol tarafına yazılır.

Örnek-1: Dizilerde destructuring işlemleri:



var bir, iki, digerSayilar;
[bir,iki] =[1,2];
console.log (bir);
console.log(iki);

[bir,iki,...digerSayilar] = [1,2,3,4,5,6];
console.log(digerSayilar);

var bir, iki, digerSayilar;

[bir,iki] =[1,2];

console.log (bir);

console.log(iki);

[bir,iki,...digerSayilar] = [1,2,3,4,5,6];

console.log(digerSayilar);

Yukarıdaki örnekte 6. satırda spread syntax (…) kullanılmıştır. “Spread Syntax nedir?” diyorsanız burayı tıklayınız. Bu sayede ilk iki atamadan sonra kalan değerler diğerSayilar değişkenine atanmıştır. Eğer spread operatör (…) kullanılmasaydı; sadece digerSayılar şeklinde yazılsaydı, değişkenin değeri 3 olacaktı.

Örnek-2: Varsayılan değer atama işlemi:



var  bir,iki;
[bir= 3, iki =2] =[1];
console.log(bir);
console.log(iki)

var bir,iki;

[bir= 3, iki =2] =[1];

console.log(bir);

console.log(iki)

Destructuring işlemi yapılırken bir değişkenine varsayılan olarak 3 değeri, iki değişkenine varsayılan olarak 2 değeri atanmıştır(2. satır). Atama işlemi yapılan dizide bir tane değer olduğundan sadece bir değişkenin değeri değişmiştir. iki değişkenine herhangi bir atama yapılmamıştır. Ama varsayılan değer olarak 2 verildiğinden konsola 2 değeri yazılmıştır. Eğer bu işlem yapılmasaydı iki değişkeninin değer undefined olacaktı.

Örnek-3: Değişkenlerin değerlerinin birbiri ile yer değiştirilmesi işlemi:



// değer değiştirme işlemi
var bir=2, iki=1; 
 
[bir,iki]=[iki,bir];

console.log(`bir değişkeninin yeni değeri: ${bir}`);
console.log(`iki değişkeninin yeni değeri: ${iki}`);

// değer değiştirme işlemi

var bir=2, iki=1;

[bir,iki]=[iki,bir];

console.log(`bir değişkeninin yeni değeri: ${bir}`);

console.log(`iki değişkeninin yeni değeri: ${iki}`);

Yukarıdaki örnekte değişkenlerin değerleri bir birlerine atanıyor. Dikkat edilmesi gereken husus işlemler yapılırken [] kullanılmalı. Eğer {}kullanılırsa herhangi bir değişiklik olmaz.

Örnek-4: Dizi dönen fonksiyonlar için destructuring işlemi:



function dizi(){
return [1,2,3]
};

// fonksiyondan dönen dizinin ilk elamanı değişkene atandı
var [a] = dizi();
console.log(a);



// fonksiyondan dönen dizinin ilk iki elamanlar değişkenlere atandı
var [b,c]=dizi();
console.log(b);
console.log(c);

// fonksiyondan dönen dizinin tüm  elamanları değişkenlere atandı
var [d,e,f]=dizi();
console.log(d);
console.log(e);
console.log(f);


// fonksiyondan dönen dizinin birinci ve üçüncü değişkenlere atandı
var [x,,y]=dizi();

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

function dizi(){

return [1,2,3]

};

// fonksiyondan dönen dizinin ilk elamanı değişkene atandı

var [a] = dizi();

console.log(a);

// fonksiyondan dönen dizinin ilk iki elamanlar değişkenlere atandı

var [b,c]=dizi();

console.log(b);

console.log(c);

// fonksiyondan dönen dizinin tüm elamanları değişkenlere atandı

var [d,e,f]=dizi();

console.log(d);

console.log(e);

console.log(f);

// fonksiyondan dönen dizinin birinci ve üçüncü değişkenlere atandı

var [x,,y]=dizi();

console.log(x);

console.log(y);

Yukarıdaki örnekte dizi() fonksiyonu üç boyutlu bir dizi dönmektedir. 6. satırda dizinin birinci değeri bir değişkene atanıyor. Diğer değerlere destructuring ile atama yapılmıyor. Benzer şekilde 12 ve 17. satırlardaihtiyaca göre atama yapılıyor. 24. satırda ise fonksiyondan dönen dizinin sadece 1. ve 3. elemanı değişkenlere atanıyor. Bu işlemi yaparken dizinin ikinci elemanına karşılık gelen değer için değişken belirtilmiyor ve ,,şeklinde işlem yapılarak değişken boş bırakılıyor.

Örnek-5: Dizi içindeki nesnelere forile işlem yapıp istenilen değer için destructuring işlemi yapılabilir.



const kisiler = [
  { id: 1, adi: 'Ayşe'},
  { id: 2, adi: 'Fatma'},
  { id: 3, adi: 'Ali'}
];

const [,, { adi }] = kisiler;

console.log(adi)

const kisiler = [

{ id: 1, adi: 'Ayşe'},

{ id: 2, adi: 'Fatma'},

{ id: 3, adi: 'Ali'}

];

const [,, { adi }] = kisiler;

console.log(adi)

Yukarıdaki örnekte kisiler dizisinde bulanan nesnelerin adi özelliğine erişip ekrana yazdırılıyor.

Örnek-6: Nesnelerde destructuring işlemleri:



({ bir, iki } = { bir: 1, iki: 2 })
console.log (bir);
console.log(iki);
// destructuring işleminde; değişkenlerin isimleri uyuşmaz ise destructuring işlemi yapılmaz
({ uc, dort } = { uc: 3, bes: 5 })
console.log(uc);
console.log('dört değişkenin değeri:'+ dort);  // undefined 
// console.log(bes);  // hata
// atama yapılan değişkenlerin isimleri uyuşursa yazıldığı sıra önemli değil.
({ bes, alti } = { alti: 6, bes: 5 })
console.log(bes);
console.log(alti);
// varsayılan değer
({ yedi=0, sekiz } = { yedi: 7 })
console.log(yedi)

({ bir, iki } = { bir: 1, iki: 2 })

console.log (bir);

console.log(iki);

// destructuring işleminde; değişkenlerin isimleri uyuşmaz ise destructuring işlemi yapılmaz

({ uc, dort } = { uc: 3, bes: 5 })

console.log(uc);

console.log('dört değişkenin değeri:'+ dort); // undefined

// console.log(bes); // hata

// atama yapılan değişkenlerin isimleri uyuşursa yazıldığı sıra önemli değil.

({ bes, alti } = { alti: 6, bes: 5 })

console.log(bes);

console.log(alti);

// varsayılan değer

({ yedi=0, sekiz } = { yedi: 7 })

console.log(yedi)

Dikkat: Nesnelerde, destructuring işlemi yapılırken eğer var, let, constkullanılmayacaksa; işlemler parantez içinde yapılmalı ({bir} = {bir:1,iki:2}). Eğer parantez kullanılmazsa; kod hatalı olacaktır.

Yukarıdaki örnekte 5. satırda olduğu gibi eğer özellik ve değişken isimleri uyuşmazsa atama işlemi yapılmaz. Değişken ve özellik isimleri aynı olduğunda atama işleminde sıra önemli değil(10.satır). Atama işlemi yapılan değişken varsayılan bir değer atanabilir(14. satır).

Örnek-7: Nesne dönen fonksiyonlar için destructuring işlemi:



function nesne(){
return {bir:1,iki:2,uc:3};
};

var {bir}= nesne();
console.log(bir)
var {iki,uc}= nesne();
console.log(iki);
console.log(uc);

function nesne(){

return {bir:1,iki:2,uc:3};

};

var {bir}= nesne();

console.log(bir)

var {iki,uc}= nesne();

console.log(iki);

console.log(uc);

Yukarıdaki örnekte nesne() fonksiyonundan dönen, nesneye ait özellikler değişkenlere atanıyor. Burada dikkat edilecek husus; atama yapılan değişkenin ismi, fonksiyondan dönen nesnenin özelliği ile aynı olmalı. Aksi durumda kod hatalı olacaktır.

Örnek-8: Nesnede destructuring işlemi yapılırken özelliğin ismi değiştirilebilir ve varsayılan bir değer atanabilir. İsim değiştirme işleminden nesne etkilenmez.



var sayilar = {bir: 1, iki : 2, uc :3};
({ bir: one= 0, iki: two, uc}=sayilar);
console.log(one);
console.log(two);
console.log(uc);

console.log(bir); // hataa

var sayilar = {bir: 1, iki : 2, uc :3};

({ bir: one= 0, iki: two, uc}=sayilar);

console.log(one);

console.log(two);

console.log(uc);

console.log(bir); // hataa

Yukarıdaki örnekte, nesnelerde destructruring işlemi yaparken değişkenin ismi değiştirilebilir. 2. satırda bir özelliğinin ismi one yapıldı ve varsayılan değer olarak 0 değeri atandı. iki özelliğinin ismi two yapıldı, ucözelliğinin ismi değiştirilmedi. Örnekteki 7. satır hatalıdır.

Örnek-9: Karışık(iç içe nesne veya diziler) nesnelerde destructuring işlemi:



var yazar={ adi:"Ahmet Ümit", 
            kitapSayisi:5, 
            kitaplari: [{adi: "Patasana",sayfaSayisi:500, cevrildigiDiller:{dil1:"turkçe",dil2:"ingilizce"}}]
            }
let { adi: yazarAdi,  // değişkenin adı değiştirildi
      kitaplari :[
                  {
                     adi: kitapAdi, // değişkenin adı değiştirildi,
                     cevrildigiDiller: {dil1, dil2}
                  }
                 ] 
    }= yazar;
console.log(yazarAdi);
console.log(kitapAdi);
console.log(dil1);
console.log(dil2);

var yazar={ adi:"Ahmet Ümit",

kitapSayisi:5,

kitaplari: [{adi: "Patasana",sayfaSayisi:500, cevrildigiDiller:{dil1:"turkçe",dil2:"ingilizce"}}]

}

let { adi: yazarAdi, // değişkenin adı değiştirildi

kitaplari :[

{

adi: kitapAdi, // değişkenin adı değiştirildi,

cevrildigiDiller: {dil1, dil2}

}

]

}= yazar;

console.log(yazarAdi);

console.log(kitapAdi);

console.log(dil1);

console.log(dil2);

Yukarıdaki örnekte yazar nesnesinden adi, kitapAdi ve cevrildigiDillerbilgileri için destructuring yapılıyor. 5. satırda adi özelliği yazarAdi olarak değiştiriliyor. 8. satırdaki kitaplari dizisinde bulunan adi özelliği kitapAdiolarak değiştiriliyor.

Örnek-10: İç içe nesnelerde destructuring işlemi:



var kisiler= [
{adi:"Ahmet", yas: 25, okuduguOkullar:{ilkOkul:"Refet Bele i.o", lise:"deneme"}},
{adi:"Ayse", yas: 34, okuduguOkullar:{ilkOkul:"Ankara İ.o", universite:"univ"}},
]

for (var {adi, okuduguOkullar: {ilkOkul: ilkOgrenim}} of kisiler) {
  console.log('Adi: ' + adi + ', ilkOgrenim: ' + ilkOgrenim);
}

var kisiler= [

{adi:"Ahmet", yas: 25, okuduguOkullar:{ilkOkul:"Refet Bele i.o", lise:"deneme"}},

{adi:"Ayse", yas: 34, okuduguOkullar:{ilkOkul:"Ankara İ.o", universite:"univ"}},

]

for (var {adi, okuduguOkullar: {ilkOkul: ilkOgrenim}} of kisiler) {

console.log('Adi: ' + adi + ', ilkOgrenim: ' + ilkOgrenim);

}

Yukarıdaki örnekte dizi olan kisiler üzerinde for (6.satır) kullanılarak destructuring işlemi yapılıyor. ilkOkul özelliğinin ismi ilkOgrenim olarak değiştiriliyor.

Örnek-11: Fonksiyon parametreleri için destructuring işlemleri:



var kisi= {adi: "Ahmet", yas:35, email:"crazyboy_01_92@hotmail.com"};

function emailBilgisi({email}){
return email;
}

console.log(emailBilgisi(kisi));

function adiVeYasGoster({adi,yas: yasi}){
return `${adi}'in yaşı ${yasi}`;
}

console.log(adiVeYasGoster(kisi));

var kisi= {adi: "Ahmet", yas:35, email:"[email protected]"};

function emailBilgisi({email}){

return email;

}

console.log(emailBilgisi(kisi));

function adiVeYasGoster({adi,yas: yasi}){

return `${adi}'in yaşı ${yasi}`;

}

console.log(adiVeYasGoster(kisi));

Yukarıdaki örnekte fonksiyona geçilen kisi nesne parametresinde destructuring işlemi yapılıyor. 3. satırdaki emailBilgisi fonksiyonuna kisinesnesi parametre olarak veriliyor. Fonksiyonun parametresi {email}şeklinde olduğundan kisi nesnesinden email özelliğine destructuring işlemi yapılıyor. 9. satırdaki adiVeYasGoster fonksiyonunun parametresi {adi, yas:yasi} şeklinde olduğundan, fonksiyona geçilen kisi nesnesinden adive yas özelliklerine destructuring uygulanıyor ve kisi nesnesinde bulunan yas özelliğinin adı yasi olarak değiştiriliyor.

Kaynaklar:

Destructuring assignment-developer.mozilla.org

Bir sonraki JavaScript harikasında görüşmek üzere.

es6 JavaScript