JavaScript’te Object Kavramı — 3
Herkese merhaba, bu yazı JavaScript’te Object Kavramı 1 ve Object Kavramı 2 yazılarının devamı niteliğinde olacaktır. Buradaki kavramların daha iyi anlaşılması için önceki yazıları okumanızı tavsiye ederim.
JavaScript’te Object Kavramı — 1
JavaScript’te Object Kavramı — 2
Önceki yazılarda nesne kavramı hakkında yeterince konuştuğumuz için bu yazıda daha çok new object syntax üzerine yoğunlaşacağız.
1)Shorthand Properties (Shorthand Notation)
Bir nesne tanımlarken, eğer değişken ismi ile nesne özelliği adı aynıysa, özellikleri daha kısa bir şekilde tanımlayabilirsiniz. ES6 ile JavaScript diline eklenen bir özelliktir. Bizlere daha kısa ve okunaklı bir syntax sunar. Karşılaştırmalı olarak örneklerle açıklayalım;
Sol tarafaki görsel zaten daha öncelerden gördüğümüz bir yapı, object literal yardımıyla nesne oluşturduk. myObj objesindeki name property’si değişkenden gelen name olacak aynı şey age için de geçerli. Ekrana yazdırdığımızda Micheal ve 40 çıktısını alıyoruz, burada herhangi bir problem yok zaten. Ee yukarıda değişken ismi de name property ismi de name, bu tip durumlarda ES6 sağdaki gibi daha yalın bir syntax sunuyor. Madem objenin property isimleri ve yukarıdaki değişken isimleri aynı senin bunu iki kere yazmana gerek yok diyor. Tabi böyle gösterince biraz saçma durabilir ancak biz bu özelliği, bir web sayfasında kullanıcıdan gerekli bilgileri aldığımızı ve bu bilgileri backend’e göndererek veritabanında karşılık gelen kolonlara yazılması gibi düşünebiliriz.
2)Computed Property Name
Computed property name kullanarak bir nesne oluştururken, nesne özellik isimlerini değişkenlere veya dinamik ifadelerle belirleyebiliriz. ES6 ile gelmiş önemli bir özelliktir. Bu özellik sayesinde nesne özelliklerinin isimlini runtime’da belirleyebiliriz. Karşılaştırmalı bir örnekle açıklayalım;
Yukarıdaki örnekte sol tarafa baktığımızda ES5'te önce boş bir nesne oluşturuyoruz daha sonra bracket notation yardımıyla prop1'i myObj nesnesine property olarak atıyoruz. 7. satırda gördüğümüz gibi prop1'in içindeki name değeri myObj nesnesinin propertysi haline geliyor. Şimdi ES6 örneğini inceleyecek olursak buradaki önemli fark, boş bir nesne oluşturmuyotuz direkt nesneyi oluştururken prop1'in değerini myObj nesnesine property olarak atayabiliyoruz. 7. satıra baktığımızda ise herhangi bir fark olmadan aynı çıktıyı alıyoruz. Özetle ES5'te önce nesneyi oluşturmamız lazımdı ancak ES6'da nesneyi oluştururken bir değişkeni property olarak atayabiliyoruz. Computed property names, genelde framework ve kütüphanelerde sıklıkla kullanılır. Çünkü hazır kütüphaneler belirli özelliklere sahip nesneleri parametre olarak alırlar. Bu sayede uygulama davranışlarını çok daha esnek ve genişletebilir hale getirebiliriz.
3)Short Method Syntax
Short method syntax, bir nesne içindeki metodu tanımlarken geleneksel fonksiyon tanımlamadan daha kısa bir yol sunuyor bizlere. ES6 ile gelen bu özellik sayesinde metotları daha kısa ve okunaklı bir şekilde tanımlayabiliyoruz. Karşılaştırmalı olarak bir örnekle açıklayalım;
Yukarıdaki örneğe aktığımızda sol taraftaki ES5 örneği zaten bildiğimiz syntax’a sahip, function keywordü kullanarak fullName isminde bir fonksiyon oluşturuyoruz. (Fonksiyon bir nesne içinde tanımlandığında bunlara metot diyoruz.) Ancak sağ tarafta ES6 örneğine baktığımızda function keywordünden ve iki nokta üst üsteden kurtulup sadece fonksiyonun ismini veriyoruz. Bu sayede metotları daha kısa ve okunaklı bir şekilde tanımlayabiliyoruz.
4)Object Destructuring
Object destructuring, bir nesnenin özelliklerini ayrıştırarak bu özelliklere erişmeyi ve bu özelliklerin değerlerini farklı değişkenlere atamak için kullanırız. Örnek verecek olursak;
Yukarıdaki örneğe baktığımızda sol tarafta ES5 syntaxı görüyoruz. Bu zaten daha önceden de bildiğimiz geleneksel bir yapı. Basit bir şekilde açıklayacak olursak myVar1 değişkenine person nesnesindeki name propertysinin değerini atıyoruz, ikinci olarak myVar2 şekilinde bir değişken tanımayıp bu değişkene surname propertysindeki değeri atıyoruz. 12. ve 13. satırlara baktığımızda Micheal ve Scott değerlerini ekranda görüyoruz. Burada 3 değişken, 1 metot olmak üzere 4 propertymiz var. Peki bizim 100 tane propertymiz olsaydı? İşte burada yardımımıza object destructuring yöntemi yardımımıza yetişiyor. Şimdi sağ taraftaki ES6 örneğine bakacak olursak, 10. satırda önce let keywordü ile süslü parantezleri açıyoruz daha sonra içine önce objeden almak istediğimiz propertyi sonrasında değişkenin adını yazıyoruz. (atama olayının tam tersi gibi düşünebiliriz) Biz name propertysini myVar1 değişkenine, surname propertysini myVar2 değişkenine atmak istediğimiz için araya virgül koyarak person nesnesinden sadece almak istediğimiz (name, surname) propertyleri alıyoruz ve son olarak person objesinden alacağı için person’a eşitliyoruz. Daha sonra 11. ve 12. satırda ekrana yazdırdığımızda yine aynı çıktıyı alıyoruz. Yani ayrı ayrı değişken oluşturup nesnenin propertylerini tek tek almak yerine tek satırda nesnenin almak istediğimiz propertylerini kolaylıkla alabiliyoruz.
Buraya kadar her şey güzel, ancak yukarıdaki örnekteki gibi kalkıp name propertysini gidip myVar1 gibi saçma bir değişken ismine atamayız. Genelde gelen propertyi yine aynı isimde bir değişkene atarız. Yukarıdaki örnek üzerinden gidecek olursak;
Yukarıdaki örnekte 10. satıra baktığımızda nesnedeki name propertysini name değişkenine, surname propertysini surname değişkenine atıyoruz. Ancak burada property name ve değişken isimleri aynı olduğu için iki kere yazmamıza gerek yok. (shorthand properties örneği gibi) Özetle genelde göreceğimiz yapı şu şekildedir;
5)Spread Operator in Object Literals (…)
Spread Operator, genellikle bir nesneyi daha küçük parçalara ayırmak ya da bir başka nesneyle birleştirmek için kullandığımız bir yapıdır. Yan yana üç nokta ile kullanırız. Bir örnek verecek olursak;
Yukarıdaki örnekte gördüğümüz gibi person nesnesinin tamamını person2'ye kopyalıyoruz. 11. satırda ekrana bastığımızda ise beklediğimiz çıktıyı alıyoruz. Yukarıdaki tanımda nesneleri birleştirmek için de kullanıyoruz demiştik hemen buna da bir örnek verelim.
6)Rest Operator in Object Literals
Rest Operator, object destructuring yöntemiyle bir nesneden alınan propertylerden geriye kalanları başka bir nesne olarak alma işlemine denir. Rest operator de spread operator gibi yan yana üç nokta ile kullanılıyor. Örnekle daha iyi anlaşılacağını düşünüyorum.
Yukarıdaki örneğe bakacak olursak 10. satırda person objesinden name propertysini aldık ve 12. satırda ekrana bastırdık bu zaten beklediğimiz bir sonuç. 10. satırda name haricinde geriye kalan propertyleri rest sayesinde bir nesneye attık ve 13. satırda bu çıktıyı ekranda gösterdik.
7)Object Values — Object Entries
ES5'te bir nesneye ait olan key değerlerini bir array şeklinde dönebiliyorduk. Bu durumu bir örnekle gösterelim.
Yukarıda gördüğümüz gibi person nesnesine ait key bilgilerini bir array içinde string olarak gösterebiliyoruz. Bu zaten ES5'ten bildiğimiz bir şey. ES6 ile beraber benzer olarak artık yalnızca key bilgisini değil aynı zamanda value değerlerini de (string olanları) bir array içinde alabiliyoruz. Bunu da bir örnekle görelim.
Yukarıdaki örnekte de gördüğümüz gibi person nesnesine ait string valueları bir array içinde alabildik. Object entries ise key ve value çiftini ayrı ayrı arrayler içerisine koyuyor. Bunu da bir örnekle gösterelim
Görmüş olduğunuz gibi key value çiftini arraylerin içerisine dört tane ikili eleman şeklinde koyuyor.
Evet arkadaşlar elimden geldiği kadar sade bir şekilde genel olarak en yaygın kullanılan ve önemli olarak gördüğüm nesne syntaxları hakkında fikir vermeye çalıştım. Umarım faydalı olmuştur, iyi çalışmalar.
Referanslar;
1)Arin Yazılım
2)GeeksforGeeks
3)W3 Schools
