Bu yazıda JavaScript ile nesne oluşturma kavramına temel yönleri ile ele alacağız. JavaScript ile Nesne Yönelimli Programlama( Object Oriented Programming) için buradaki daha detaylı olan yazıyı incelemenizi tavsiye ederim.
JavaScriptte değişken tanımlama yazısında object konusuna değinmiştik. Bu yazıda nesnelere neden ihtiyaç duyduğumuzu biraz daha derinlemesine bakacağız.
Nesnelere Neden İhtiyaç Duyarız?
Nesne kavramını daha iyi anlamak için değişkenleri kullanarak bir personelin bilgilerini almaya çalışalım. Bir personelin ad, soyad, maaş, yaş, medeni durum ve bildiği diller gibi verileri olduğunu varsayalım. Bu bilgileri tutmak için aşağıdaki gibi değişkenlere ihtiyacımız olacaktır.
|
1 2 3 4 5 |
let ad = "Hayri" let soyad="KOÇ" let maas =8500 let medeniDurum = false let bildigiDiller = ["C#","PHP","C++","Python"] |
Peki ikinci bir kişi içinde değişkenlere ihtiyacımız olsa nasıl yol izlemeliyiz. Sorusu ortaya çıkacaktır. İşte bu aşamada nesne oluşturma kavramı ortaya çıkıyor. Nesne nasıl oluşturulur sorusuna cevap için okumaya devam edin.
İlginizi Çekebilir: JavaScript Dersleri
JavaScript Nesne Oluşturma
JavaScriptte nesne oluşturmak için birden fazla yöntem kullanılmaktadır. Burada en basit yöntemle ele alacağız.
JavaScriptte nesne oluşturmak için {} sembollerini kullanarak aşağıdaki gibi özellik ve değerlerini oluşturuyoruz. Her özellik ve değer arasında virgül sembolünü kullanmayı unutmayın.
Söz Dizimi:
|
1 2 3 4 5 |
{ ozellik1:"deger", ozellik2:"deger", .... } |
Bir yukarıdaki Personel bilgileri örneğini nesne kullanarak yeniden oluşturmak istersek yazmamız gereken javascript kodu şu şekilde olacaktır.
|
1 2 3 4 5 6 7 |
const personel = { ad : "Hayri", soyad:"KOÇ", maas :8500, medeniDurum : false, bildigiDiller : ["C#","PHP","C++","Python"] } |
JavaScript Nesneden Değer Okuma
Yukarıdaki gibi tanımlanan javaScript nesnesinin öğelerine erişmek için aşağıdaki gibi iki farklı yöntemle ulaşabiliriz.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
const personel = { ad : "Hayri", soyad:"KOÇ", maas :8500, medeniDurum : false, bildigiDiller : ["C#","PHP","C++","Python"] } console.log(personel.ad) //Hayri console.log(personel["soyad"])//KOÇ console.log(personel.bildigiDiller[1]) |
JavaScript Nesneye Özellik Ekleme
Bir nesneye özellik eklemek için aşağıdaki gibi nokta ile eklenecek özellik ve değeri yazılır.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
const personel = { ad : "Hayri", soyad:"KOÇ", maas :8500, medeniDurum : false, bildigiDiller : ["C#","PHP","C++","Python"] } //Özellik EKLE personel.eposta ="deneme@mail.com" console.log(personel.ad) //Hayri console.log(personel.eposta) //deneme@mail.com |
JavaScript Nesne Özelliğini Güncelleme
Nesnelerin özelliklerini güncellemek için nesne özelliği yazıldıktan sonra atama operatörü kullanılarak aşağıdaki gibi güncellenir.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
const personel = { ad : "Hayri", soyad:"KOÇ", maas :8500, medeniDurum : false, bildigiDiller : ["C#","PHP","C++","Python"] } //Özellik GÜNCELLE personel.maas = 12_000 console.log(personel.ad) //Hayri console.log(personel.maas) //12000 |
JavaScript Nesne Özelliğini Silme
Aşağıdaki iki yöntemle nesne özelliğini kaldırabilirsiniz. İlkinde özellik adı nokta ile belirtildi. İkincisiden ise dizideki anahtar değeri alınarak yapıldı. Özelliği kaldırmak içinde delete operatörü kullanıldı.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
const personel = { ad : "Hayri", soyad:"KOÇ", maas :8500, medeniDurum : false, bildigiDiller : ["C#","PHP","C++","Python"] } delete personel.maas delete personel["bildigiDiller"] console.log(personel) |
JavaScript Nesne içinde Fonksiyon Kullanma( Nesne Metotları)
Nesnelerin içinde fonksiyon tanımlaması yapabiliriz. Aşağıdaki örnekte adSoyad getir fonksiyonu oluşturulmuş ve personelin adı soyadı birleştirilmiş şekilde console ekranında yazdırılmıştır.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
const personel = { ad : "Hayri", soyad:"KOÇ", maas :8500, medeniDurum : false, bildigiDiller : ["C#","PHP","C++","Python"], adSoyad:function(){ let metin = this.ad + " " + this.soyad console.log(metin) } } personel.adSoyad() |
Add comment