JavaScript’te Object Kavramı — 1
Herkese merhaba, bugün sizlere object (nesne) kavramından bahsetmeye çalışacağım. Öncelikle nesnenin tanımını yaparak giriş yapalım. JavaScript’te nesne, name-value çiftlerinden oluşan bileşik bir veri tipidir. Nesneler JavaScript’te çok önemli bir yere sahiptir, primitive veri tipleri hariç hemen hemen her şey nesnedir.
Yukarıdaki tanımı tekrar ele alacak olursak isim (name) — değer (value) çiftlerinden oluşur demiştik. İsimlere baktığımızda klasik (name, surname, age vs.) ancak değerlere baktığımızda bu değer bir primitif ifade olabilir, array de olabilir, fonksiyon da olabilir ve son olarak başka bir nesne de olabilir. İlk başta tanım gereği name-value çifti dedik bunu biraz daha kavramsallaştırmak gerekirse bu namelere biz property diyoruz. Son olarak bu propertylerden fonksiyon olanlara genelde metot diyoruz.
Peki biz JavaScript’te neden objeye ihtiyaç duyarız ?
Biz sadece JavaScript’te değil herhangi bir programlama dilinde de belirli verilerin bir arada bulunmasını isteriz. Çünkü bu sayede benzer türde verilere erişmeyi kolaylaştırır, kodun daha okunaklı ve anlaşılır olmasına yardımcı olur ayrıca nesne yönelimli programlamayı daha iyi anlamamıza olanak tanır. Örneğin bir web sayfasında form doldurduğumuzu düşünelim şimdilik arka tarafta (backend) ne olduğuna çok girmeden bir veritabanına yazdırıldığını düşünelim. İşte bu formdan aldığımız verileri veritabanına alakasız bir şekilde yazmak yerine birbirine ilişkili şekilde bir nesne içinde tutarak yazmak isteriz.
Nesne Oluşturma Yöntemleri
1)Object Literal
JavaScript dilinde nesne tanımlamak için kullanılan en yaygın yöntemlerden biridir. Bir nesnenin property ve valuelarını süslü parantezler kullanarak tanımlama anlamına gelir. Örnek bir object
Literal ifadesini biraz daha açalım. Object Literal yöntemiyle bir nesneyi oluştururken aynı zamanda o nesneye ait değerleri de veriyoruz yani direkt ilk baştan belirtiyoruz. Object Literal ile nesne oluşturmanın en belirgin yönü budur. Daha sonra bu konuya tekrar değineceğiz.
Nesne İçine Erişim
1)Dot Notation
Nesne özelliklerine erişmek veya nesne üzerinde işlem yapmak için kullanılan bir notasyon veya yazım biçimidir. Yani bir nesneden property okumak ya da assign etmek istediğiniz zaman nokta gösterimini kullanabiliriz. Örnekle daha iyi anlaşılacağını düşünüyorum.
Yukarıdaki örneğe baktığımız zaman önce person nesnesi oluşturduk daha sonra oluşturduğumuz person nesnesi üzerinden nokta yardımıyla property ve değerlere ulaştık.
2)Bracket Notation
Bir nesnenin özelliğine erişmek için köşeli parantezler içinde string yardımıyla özellik adını kullanma yöntemidir.
Yukarıdaki örnekte fullName metodunu çalıştırırken köşeli parantezin dışında fonksiyonu çalıştırdığımıza dikkat edelim.
Nesneye Property Ekleme
JavaScript’te bir nesneye yeni bir property eklemek oldukça basittir. Bunu direkt kod üzerinden göstermek istiyorum.
Yukarıdaki örnekte gördüğümüz gibi person nesnesine job adında bir property ekliyoruz. Bu yeni property artık person nesnesinin bir parçasıdır ve değeri Engineer olarak atanmıştır.
Evet arkadaşlar buraya kadar neden nesneye ihtiyaç duyduğumuzu gördük. Nesne İçine Erişim ve Nesneye Property Ekleme konularını da aradan çıkardıktan sonra Nesne Oluşturma Yöntemlerine kaldığımız yerden devam edebiliriz. Object Literal yönteminden bahsetmiştik zaten, yukarıdaki örneğe bakacak olursak person için bir nesne oluşturduk ilerleyen zamanlarda farklı farklı nesneler oluşturmak istediğimizde yine aynı şeyleri yapacağız ve bu durumda kod tekrarı yapmış oluruz. Bu yüzden constructor fonksiyonu yardımıyla nesne oluşturma yöntemini biraz inceleyelim
2)Constructor Fonksiyonu Yardımıyla Nesne Oluşturmak
Constructor fonksiyonu direkt örnek üzerinden açıklamanın daha iyi olacağını düşünüyorum. Yukarıda Object Literal ile oluşturduğumuz nesneyi şimdi constructor fonksiyonu ile oluşturacağız. Detayların daha iyi anlaşılması için constructor fonksiyonu uzun yoldan yazacağız.
Şimdi yukarıdaki örneği biraz inceleyelim. Biz ilk olarak Person isminde bir constructor fonksiyon tanımladık. (Constructor fonksiyonlar genelde büyük harfle başlar.) Bu fonksiyon name, surname ve age şeklinde üç parametre alıyor. Bu fonksiyonun içinde obj isminde boş bir nesne oluşturuyoruz. Daha sonra aldığımız parametreleri bu fonksiyona property olarak atıyoruz. Son olarak fullName isminde bir property’e fonksiyonu atadık. Bunların sonunda da oluşturduğumuz nesneyi return ediyoruz. Bu şekilde bize nesne dönen bir constructor fonksiyon oluşturduk. Son olarak Person constructor fonksiyonu yardımıyla yeni bir person nesnesi oluşturup bunu person1 değişkenine atıyoruz. Bunun bize avantajı, biz artık kolaylıkla constructor fonksiyonu yardımıyla nesneleri hızlı ve kolay bir şekilde oluşturabiliriz.
Şimdi yukarıdaki örneği biraz daha inceleyip detaya inecek olursak;
Biz bir nesne oluşturacağımızı zaten constructor olduğu için biliyoruz o yüzden ayrıca bir nesne (obj) oluşturmaya gerek yok. Bir nesne döneceğimizi de biliyoruz return’e de gerek yok. Eğer bu şekilde kaydedersek doğal olarak obj is not defined hatası alırız. Yani obj’nin neye refer ettiğini bilmiyor. O nedenle burada yapmamız gereken hangi nesneyi belirtmek istiyorsak o nesneyi yazacağız işte burada da this keywordü bizim tam olarak işimizi görüyor. Şimdi yukarıda anlattıklarımı bir örnek ile gösterirsek daha iyi anlaşılacağını düşünüyorum.
Yukarıdaki örneği inceleyecek olursak 3. satırda ekrana this’i yazdırdık ve bize boş bir person nesnesini gösteriyor. Daha sonra parametreleri aldıktan sonra 10. satırda this’i tekrar yazdırdığımızda ise artık person1'e refer ediyor. Yani başta boş bir person nesnesiyken daha sonra parametreden gelen değerleri almış person nesnesini gösteriyor. Aynı şekilde 15. satırda tekrar bir nesne oluşturduğumuzda ise bu sefer this, person2 nesnesini refer ediyor. Yani this keywordü, o an ki nesneyi gösteriyor ve bize generic bir yapı sunuyor gibi düşünebiliriz. Özetle this, belirli bir nesneyi temsil eden bir referans sağlar ve bu sayede o nesnenin özelliklerine erişebilir ve onları değiştirebiliriz. İngilizce ifade edecek olursak this, current objecti referans verir. Yani o an hangi nesneyi oluşturuyorsak onu gösterir. 14. satırda person1, 15. satırda ise person2 nesnesini gösterir. (This’i başka bir yazıda tekrar ele alacağım için şimdilik yeterli olduğunu düşünüyorum.) Constructor yardımıyla nesne oluşturmanın en sade şeklini şöyle düşünebiliriz.
Hazır yeri gelmişken biraz da new keywordünden bahsedelim. New keywordü ile bir constructor fonksiyonu çağrıldığında JavaScript derleyici yeni bir tane boş bir nesne oluşturur ve buradaki this artık yeni nesneye referans verir. (10. satırda person1, 11. satırda person2 nesnesini refer eder) Aynı zamanda new keywordü Person fonksiyonun bir constructor fonksiyon olduğunu ifade eder. Son olarak bir return ifadesi kullanılmazsa otomatik olarak oluşturulan nesne (this ile temsil edilen nesne) döndürülür. Şimdi bir de Object Constructor yöntemiyle nesne oluşturmayı görelim.
3)Object Constructor
Object Constructor yöntemi, yukarıda gördüğümüz constructor yönteminden türetilmiştir. Fark, JavaScript’te build-in olarak bulunan Object Constructor fonksiyonunu kullanırız. Hemen bir örnek verelim.
Yukarıdaki örnekten de anlaşılacağı üzere kullanımı gayet basit. Burada önemli olan detay, this’in o an ki current objecti (person1) refer etmesidir. Yani o an üzerine işlem yapılan nesne hangisiyse onu göstermesidir.
Son olarak JavaScript’te nesne oluşturulurken kullanılan diğer bir yöntem ise Object Create metodudur.
4)Object Create
Object Create yöntemi, yeni bir nesne oluştururken var olan bir nesneyi kullanmak şeklinde gibi düşünebiliriz. Yani bir nesneyi başka bir nesnenin prototipi olarak kullanmamıza olanak tanır. Hemen bir örnek verelim;
Object.createTanımda da dediğimiz gibi yeni bir nesne oluştururken eski nesneyi kullanıyoruz. 10. satıra bakacak olursak Object.create’e parametre olarak oluşturduğumuz person nesnesini veriyoruz. Daha sonra micheal nesnesine gerekli değerleri veriyoruz. 16. satıra bakacak olursak fullName metodunu çağırdığımızda Micheal Scott değerini bize döndürdü. Ama biz micheal nesnesine fullName metodunu atamadık bu nasıl oluyor? Biz micheal nesnesini person nesnesinden oluşturduğumuz için direkt fullName metoduna ulaşabiliyor. Aralarında bir inheritance (kalıtım) var ancak bu konuya şimdilik değinmeyeceğim.
Son olarak başka programlama dillerinden gelen arkadaşlar için karışık gibi gelebilir. Özellikle nesne yönelimli programlama dillerinde class diye bir kavram gördük. Biz nesneleri classlardan instance alarak oluşturuyoruz. Ancak JavaScript’te neden yok? Aslında var, ancak JavaScript’teki classlara neden ihtiyaç duyduğumuzu, var olan bu yöntemlerin veya prototype’ın neden yeterli olmadığını ya da class yöntemlerinin avantajını görmek için bu konuları iyi öğrenmemiz gerekiyor.
Referanslar;
1.Arin Yazılım
2.MDN Web Docs
3.W3 Schools
