Javascript Harikaları-3 : Destructuring Assignment.
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, dizi
ile 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:
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:
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:
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:
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ırlarda
ihtiyaca 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 for
ile işlem yapıp istenilen değer için destructuring işlemi yapılabilir.
Yukarıdaki örnekte kisiler
dizisinde bulanan nesnelerin adi
özelliğine erişip ekrana yazdırılıyor.
Örnek-6: Nesnelerde destructuring işlemleri:
Dikkat: Nesnelerde, destructuring işlemi yapılırken eğer var, let, const
kullanı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:
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.
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:
Yukarıdaki örnekte yazar
nesnesinden adi
, kitapAdi
ve cevrildigiDiller
bilgileri 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 kitapAdi
olarak değiştiriliyor.
Örnek-10: İç içe nesnelerde destructuring işlemi:
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:
Yukarıdaki örnekte fonksiyona geçilen kisi
nesne parametresinde destructuring işlemi yapılıyor. 3. satırdaki emailBilgisi
fonksiyonuna kisi
nesnesi 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 adi
ve yas
özelliklerine destructuring uygulanıyor ve kisi
nesnesinde bulunan yas
özelliğinin adı yasi
olarak değiştiriliyor.
Kaynaklar:
Bir sonraki JavaScript harikasında görüşmek üzere.