JavaScript Nesneler ve Nesne Tabanlı Programlama

JavaScript nesneler konusunu daha iyi anlayabilmek için konumuza geçmeden önce gerçek hayattan örnekler vermek istiyorum.

İlk olarak bir arabayı düşünelim. Herhangi bir arabanın birçok özelliği vardır. Örneğin;

Arabanın markası
Arabanın modeli
Arabanın rengi vb.

Özellikleri bu şekilde istediğiniz kadar çoğaltabilirsiniz. Her araba için bu özelliklerin her birinin bir karşılığı yani bir değeri vardır. Örneğin;

A arabasının:

Markası : Volvo
Modeli : S40
Rengi : Kırmızı

B arabasının:

Markası : Hyundai
Modeli : i20
Rengi : Siyah

olabilir. Vermiş olduğumuz örnekte arabayı bir nesne olarak kabul edebiliriz. Tüm arabalarda ortak olan özelliklere (marka, model, renk vb.) ise property diyoruz.

Peki nesne kavramının bize avantajları nelerdir? Nesneleri neden kullanıyoruz? diye sorabilirsiniz.

Yine yukarıdaki araba örneğimizden devam edelim. Örneğin 100 farklı araba ile ilgili işlem yapacağız diyelim. Bu 100 araba ile ilgili her işlemde arabanın özelliklerini ayrı ayrı tanımlamak hem zaman kaybına hem de kod tekrarına neden olacaktır.

Bunun yerine bir defa araba nesnesini oluşturup tüm arabalarda ortak olan özellikleri bir property olarak tanımlasak ve her araba ile ilgili yapacağımız işlemlerde oluşturduğumuz araba nesnesinin bir kopyasını alsak nasıl olur?

İşte nesneleri bu nedenden dolayı kullanıyoruz.

Şimdi JavaScript’te nesnelerin nasıl oluşturulduğuna ve bu nesnelere nasıl erişebildiğimize bakalım.

JavaScript Nesne Oluşturma

Nesneler de değişkenler gibidir ancak içerisinde birçok değer içerebilir. Örneğin bir araba nesnesi oluşturalım.

<script>
var araba = {
model:"Volvo", 
model:"S40", 
renk:"Siyah"
};
</script>

var araba = {

model:"Volvo",

model:"S40",

renk:"Siyah"

};

</script>

⇒ JavaScript de nesneleri oluştururken ilk olarak var anahtar kelimesini yazıyoruz.

⇒ Sonrasında nesneye vermek istediğimiz ismi yazıyoruz.

⇒ Eşittir (=) operatörünü yazdıktan sonra süslü parantezler içerisine özellik : “değer” şeklinde yazıp herbirinin arasına virgül (,) koyarak tamamlıyoruz.

Şimdi de bir kişi nesnesi oluşturalım.

<script>
var kisi = {
adi:"Ahmet", 
soyadi:"Aslan", 
yas:24, 
memleket:"İzmir", 
meslek:"Öğretmen"
};
</script>

var kisi = {

adi:"Ahmet",

soyadi:"Aslan",

yas:24,

memleket:"İzmir",

meslek:"Öğretmen"

};

</script>

Oluşturduğumuz nesnelerin özelliklerine 2 farklı şekilde erişebiliriz.

1 – nesneAdi.ozellikAdi

2 – nesneAdi[“ozellikAdi”]

Örneğin kişi nesnesinin adi özelliğinin değerini 2 farklı şekilde console ekranına yazdıralım.

<script>
var kisi = {
adi:"Ahmet", 
soyadi:"Aslan", 
yas:24, 
memleket:"İzmir", 
meslek:"Öğretmen"
};
console.log(kisi.adi);
console.log(kisi["adi"]);
</script>

var kisi = {

adi:"Ahmet",

soyadi:"Aslan",

yas:24,

memleket:"İzmir",

meslek:"Öğretmen"

};

console.log(kisi.adi);

console.log(kisi["adi"]);

</script>

Çıktısı : Ahmet

İki şekilde de console ekranına aynı sonuç yazılacaktır.

Nesnelerin içerisinde fonksiyonlarımızı da yazabiliriz. Örneğin;

<script>
var kisi = {
adi:"Ahmet", 
soyadi:"Aslan", 
adiSoyadi : function() {
return this.adi + " " + this.soyadi;
}
};
</script>

var kisi = {

adi:"Ahmet",

soyadi:"Aslan",

adiSoyadi : function() {

return this.adi + " " + this.soyadi;

}

};

</script>

Önemli : Buradaki this anahtar kelimesi kisi nesnesini temsil ediyor. Yani şu 2 kullanım arasında hiçbir fark bulunmuyor.

1 – kisi.adi

2 – this.adi

Nesnelerin içerisinde bulunan fonksiyonlara şu şekilde erişebiliyoruz.

⇒ nesneAdi.fonksiyonAdi()

Yukarıdaki örneğimizde bulunan fonksiyona erişip sonucu console ekranına yazdıralım.

<script>
var kisi = {
adi:"Ahmet", 
soyadi:"Aslan", 
adiSoyadi : function() {
return this.adi + " " + this.soyadi;
}
};
console.log(kisi.adiSoyadi());
</script>

var kisi = {

adi:"Ahmet",

soyadi:"Aslan",

adiSoyadi : function() {

return this.adi + " " + this.soyadi;

}

};

console.log(kisi.adiSoyadi());

</script>

Çıktısı : Ahmet Aslan

Son olarak şunu belirtmek istiyorum.

JavaScript de string, number ve boolean veri türündeki değişkenleri new anahtar kelimesi ile oluşturursak bu değişkenler nesne olarak kabul edilir. Örneğin;

<script>
var x = new String();
var y = new Number();
var z = new Boolean();
</script>

var x = new String();

var y = new Number();

var z = new Boolean();

</script>

Fakat bu şekilde bir kullanım tavsiye edilmez. Çünkü hem kodlarınız karmaşık hale gelecektir hem de kodlarınızın çalıştırılma hızı yavaşlayacaktır.

Umarım “JavaScript Nesneler ve Nesne Tabanlı Programlama” başlıklı yazım sizin için faydalı olmuştur.

Şu yazılar da ilginizi çekebilir.

JavaScript Fonksiyonlar – Fonksiyon Tanımlama ve Kullanımı

JavaScript Arrow Fonksiyonu Nedir? Nasıl Kullanılır?

Yeni bir yazımda görüşmek üzere.

JavaScript Nesneler ve Nesne Tabanlı Programlama

JavaScript Nesne Oluşturma

Yazar Hakkında

2 Yorum

Yorum Yazın

JavaScript Nesne Oluşturma

Benzer Yazılar

Yazar Hakkında

2 Yorum

Yorum Yazın