Javascript Nesne (Object) Kullanımı
Hepinize merhaba dostlarım :). Bu yazımda sizlere javascript üzerinde nesne nasıl tanımlanır nesne öğelerine nasıl erişilir ve bu nesneler nasıl kullanılır bunlardan bahsedeceğim :). Kullanımı projeden projeye değişen objeler bize çoğu zaman fayda sağlar :) Nasıl mı ? Gelin hep beraber bu yazıda inceleyelim ama öncelikle objelerin ne olduğuna değinelim
Nesne (Object) Nedir ?
Dostlarım javascript dilinde objeler bir değişken türü olarak bilinir. Nasıl ki string de bir değişken integer da bir değişken ise obje de aynı şekilde bir değişkendir. Kullanımı dizilere benzer ama dizilerde mesela value değeri bir fonksiyon olamaz iken objelerde böyle bir katı kural yoktur :). Tanımlamarı key=>value şeklinde değil de key:value şeklindedir :). Kullanım şekli aşağıdadır dostlarım
<script>
var objemiz = {
degiskenimiz : degerimiz
}
</script>şeklinde yazılır dostlarım :). Aklınıza gelen soru şu oldu biliyorum :)
Hocam peki değeri ekrana bastırmak için nasıl yol izlemeliyiz
çözüm gayet basit dostlarım :). O çözüm de aşağıda :)
<script>
var result = objemiz.degiskenimiz;
console.log(result);
// Ekrana Değişkenimizin Değerini Yazar :)
</script>Örnek vermek gerekirse dostlarım gerçek hayattan bir örnek verelim :). Bir laptobu obje olarak varsayalım. Laptobun HDD, RAM, Klavye vs. donanımları ise bu objenin değişkenleri oluyor dostlarım :).
Artık örnek için sabırsızlandığınızı anlıyorum dostlarım :). Gelin gerçek hayattan bir örnek verelim. Objemiz ev olsun ve bu evin özelliklerini objemiz içerisine yazalım :).
<script>
var ev = {
oda_sayi : "3+1",
balkon : "var",
tip : "lüx",
lokasyon : "Konya",
yas : 5,
fiyat : "165.000 ₺"
}
</script>şeklinde kodlarımızı yazdık dostlarım :). Objemiz de gayet güzel bir ev olduğu için değerlerine ulaşmak istiyoruz :). Değerlere ulaşmak ise çok kolay dostlarım. Örnekte gösterildiğini görünce hemen mantığını kapacaksınız :)
<script>
var oda_sayi = ev.oda_sayi; // oda sayı değerine ulaştık
var tip = ev.tip; // tip değerine ulaştık
console.log("Ev Oda Sayısı: "+oda_sayi+", Ev Tipi: "+tip);
// Ekran Çıktısı: Ev Oda Sayısı: 3+1, Ev Tipi: lüx
</script>şeklinde bir kullanımı vardır dostlarım :).
Nesne (Object) İçerisindeki Methoda Erişme
Dostlarım objeler her zaman yukarıdaki ev objesi gibi olmaz. Bazen bu objeler içerisine method da alabilir. Mesela örnek vermek gerekirse bir matematik işlemi yapan objemiz olsun ve verilerimizi gerekli işlemlerden geçirip bize return etsin :). Örneğin güzel ve kullanışlı olduğunu gözlerinizden anlıyorum dostlarım :). O halde sözü daha fazla uzatmadan gelin hep beraber kodlayalım
<script>
var matematiksel_islem = {
topla : function(a,b){
return a + b;
},
cikar : function(a,b){
return a - b;
},
carp : function(a,b){
return a * b;
},
bol : function(a,b){
return a/b;
}
}
</script>şeklindeki bir yapıyı kurduk. En baştan da anlattığım gibi her zaman obje içerisindeki değer string veya integer veri tutmaz. Örnekte olduğu gibi method da tutabilir :). Aklınızda bir soru oluştu farkındayım dostlarım. Sorunuz ise şu
Obje içerisindeki değişken string veya integer iken basıp geçiyorduk kodu. Obje içerisindeki methodda bu nasıl işliyor ?
Çözüm gayet basit dostlarım. Neredeyse ev objesi örneğinden hiç farkı yok. Tek yapmamız gereken obje değişkeninin bir method olduğunu bilmek ve çağırırken parantez tanımlamak :). Bunu da aşağıdaki örnekteki gibi hızlıca gerçekleştirelim dostlarım. Örnek olarak çarpma işlemi yaptıralım
<script>
// dizi içerisindeki methoda erişirken () parantezlerini belirtmek zorundayız
var sonuc = matematiksel_islem.carp(3,7);
alert(sonuc);
// Ekran Çıktısı: 27
</script>burada süreç nasıl işliyor diye soracaksanız dostlarım ilk olarak matematiksel_islem objemiz üzerinden carp methoduna ilerledik. Uygulamamızda obje tanımladığımızda bu carp değişkeninin bir method gibi çalışmasını fonksiyon olarak yukarıdaki gibi belirttiğimiz için burada da method olarak kullanacağımızdan dolayı () parantezlerini koyduk. Hatırlarsanız zorunlu 2 parametre alıyordu. Biz de 3 ve 7 değerlerini gönderdik. Sonucu return etti ve var sonuc olarak belirttiğimiz sonuc değişkenine aktardı. En son alert(sonuc) yazarak ekranımıza 27 yani çarpım sonucunu yazdırdık dostlarım :)
Method Tanımlarken Uyulması Gereken İşlem
Dostlarım method tanımlamaya yukarıdaki yazıda değinmiştim biliyorsunuz. Bu method kullanımı kütüphaneyi direk dahil etmeyi kabul etmiyor. Mesela örnek vermek gerekirse String veya Number bir kütüphane olduğu için dostlarım objeye direk bunu atarsak javascript bize şunu diyor: "Dostum sen anlaşılan obje içerisinde method tanımlamaya çalışıyorsun. Ama dikkat et bir class tan nesne almışsın onun içerisindeki methoda erişmeden direk nesneyi dahil ediyorsun :). Lütfen methodu seç.". Uyarısını veriyor dostlarım :).
Örneği biraz geciktirdim dostlarım işin mantığını anlatayım diye yani uzun lafın kısası aşağıdaki gibi tanımlama yapmaya Javascript müsaade etmiyor
<script>
var obje = {
deger1 = new String(),
deger2 = new Number(),
deger3 = new Boolean()
}
</script>şeklinde kabul etmiyor dostlarım. Aşağıdaki gibi bir hata veriyor
Uncaught SyntaxError: Invalid shorthand property initializerEvet dostlarım bu yazımda dilim döndüğünce javascript üzerinde obje tanımından, obje içerisindeki değişkene nasıl erişeceğimizden ve obje içerisinde nasıl method tanımlanacağından bahsettim. Umarım faydalı olabilmişimdir. Başlarda karmaşık veya zor gelebilir. Tek yapmanız gereken ise "İstikrarlı ve Azimli çalışmak ve Bolca Pratik yapmak". Hayatınız boyunca bu dediğimi yaparsanız başarı sizin için kaçınılmaz olacaktır dostlarım :).
Hayallerinizi gerçekleştirmeniz ve güzel yerlere gelmeniz dileklerimle... İyi çalışmalar dilerim :)
Yazar Hakkında
Kendi Halinde Bir Backend Developer