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, 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:
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 forile 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.
