JavaScript Nesneler (Objects)

Normalde JavaScript Nesneleri, her nesne yönelimli programlama dilinde yer alır. JavaScript, için nesneler bir istisna değildir.

Nesne Yönelimli Programlama (NYP) mantıksal işlemlerden ziyade, nesnelere (object) ve nesneler üzerinde işlemlere odaklanan programlama dili modelidir. NYP’de programlar, nesnelerin birbirileriyle etkileşime geçmeleri sağlanmasıyla tasarlanır. Java, C++, C#, Python, PHP, JavaScript, Ruby, Perl, Objective-C gibi diller başlıca nesne yönelimli programlama dilleridir. Bir dilin Nesne yönelimli dil olduğu söyleniyorsa, aşağıdaki gibi NYP dört temel koşulu karşılamalıdır:

• Inheritance (Kalıtım): Kalıtım, mevcut bir sınıfın özellikleri ve özellikleriyle yeni bir sınıf oluşturma sürecidir.
• Polymorphism (Çok Biçimlilik): Miras yoluyla temel bir sınıftan başka bir sınıf türetilebilir.
• Encapsulation (Kapsülleme): Kapsülleme, verileri dış dünyadaki son kullanıcıya erişimini kısıtlımak. Verileri ve kodu dış müdahalelerden korur.
• Abstraction (Soyutlama): Soyutlama, temel özelliklerin gösterilmesi ve uygulama detaylarının son kullanıcıya gizlenmesi işlemidir.

JavaScript, nesne tabanlı bir dildir ve JavaScript'te neredeyse her şey bir nesnedir veya bir nesne gibi davranır. Bu nedenle, JavaScript ile etkili ve verimli bir şekilde çalışmak için nesnelerin nasıl çalıştığını ve kendi nesnelerinizi nasıl oluşturup kullanacağınızı anlamamız gerekir.

JavaScript'teki nesneler, en önemli veri türüdür ve modern JavaScript için yapı taşlarını oluşturur. Bu nesneler, JavaScript'in ilkel veri türlerinden (Number, String, Boolean, null, undefined ve symbol) oldukça farklıdır; bu nedenle, bu ilkel veri türlerinin tümü (türlerine bağlı olarak) tek bir değer depolar.

• Nesneler daha karmaşıktır ve her nesne bu ilkel veri türlerinin herhangi bir kombinasyonunu ve ayrıca referans veri türlerini içerebilir.
• Bir nesne, bir referans veri türüdür. Bir referans değeri atanan değişkenlere bu değere bir referans veya bir işaretçi verilir. Bu referans veya işaretçi, nesnenin depolandığı bellekteki konumu gösterir. Değişkenler aslında değeri saklamaz.
• Genel olarak, JavaScript'teki nesneler, "anahtar: değer" çiftleri biçiminde, ilkel veya referans türlerinin ilgili verilerin sıralanmamış bir koleksiyonu olarak tanımlanabilir. Bu anahtarlar değişkenler veya işlevler olabilir ve bir nesne bağlamında sırasıyla özellikler ve methodlar olarak adlandırılır.

JavaScript'teki nesneler, diğer birçok programlama dilinde olduğu gibi, gerçek hayattaki nesnelerle karşılaştırılabilir. JavaScript'teki nesneler kavramı gerçek hayattaki somut nesnelerle anlaşılabilir.

JavaScript'te bir nesne, özellikleri ve türü olan bağımsız bir varlıktır. Örneğin bir fincanla karşılaştırın. Fincan, özellikleri olan bir nesnedir. Bir bardağın bir rengi, tasarımı, ağırlığı, yapıldığı bir malzemesi vb. Vardır. Aynı şekilde, JavaScript nesneleri de özelliklerini tanımlayan özelliklere sahip olabilir.

Gerçek Hayat Nesneleri, Özellikleri ve Methodları

Gerçek hayatta araba bir nesnedir.

Bir arabanın ağırlık ve renk gibi özellikleri ve başlatma ve durdurma gibi Methodları vardır:

Tüm arabalar aynı özelliklere sahiptir , ancak mülk değerleri arabadan arabaya farklılık gösterir.

Tüm arabaların Methodlar aynıdır ancak methodlar farklı zamanlarda uygulanmaktadır.

JavaScript nesnesi, birden çok veri koleksiyonunu depolamanıza izin veren ilkel olmayan bir veri türüdür.

Nesneler, Değişken İçeren Değişkenlerdir

JavaScript değişkenleri tek değer içerebilir:

var car = "Tofaş";

Nesneler de değişkendir. Ancak nesneler birçok değer içerebilir.

var car = {adi:"Tofaş", model:"Doğan", color:"blue"}

Değerler, ad: değer çiftleri (iki nokta üst üste ile ayrılmış ad ve değer) olarak yazılır.

Nesneler, Dizilere benzer.

Bir Kitap dizimiz olsun bu dizide Kitap kategorisi olsun, kitap adı olsun ve kitabın sayfa sayısı olsun.

let kitap = ["bilgisayar", "php öğreniyorum", 700];

Kitap dizimizde ki sayfa değerini değiştirmek istesek.

kitap[1] =800; 

console.log(kitap);

ÇIKTI

Yukarıda ki çıktıda gördüğümüz gibi indeks numarasını karıştırdık Dizi değerlerimiz bozuldu halbu ki nesnelerde key:value değer çiftleri olduğu için bir elemanın değerini değiştirmek için ad:değer ismini verdiğimiz için bu tür karışıklık olmaz.

Nesne Oluşturma

Yeni bir nesne oluşturmanın en kolay yolu, bir çift süslü parantez içine alınan nesne değişmez gösterimi kullanmaktır: {}. Özellikler ve değerleri siz ilerledikçe eklenebilir. Aşağıdaki örnekte, nesne değişmez gösterimini kullanarak boş bir nesne oluşturuyoruz.

let empty = {};

Bir nesneyi bildirmek için sözdizimi şöyledir:

const object_name = {
   key1: value1,
   key2: value2
}

Burada bir nesne object_name tanımlanır. Bir nesnenin her üyesi, virgülle ayrılmış ve süslü parantez içine alınmış {} bir anahtar: değer çiftidir.

// Nesne Oluşturma

const personel = { 
    name: 'Ahmet',
    age: 25
};
console.log(typeof personel); // object

Bir nesnenin birden fazla özelliği olduğunda, bunları yukarıdaki örnekte olduğu gibi ayırmak için virgül kullanırsınız.

Özelliklere Erişim

1) Nokta gösterimi (.)

objectName.propertyName

Örneğin name, personel nesnenin özelliğine erişmek için aşağıdaki ifadeyi kullanırsınız:

let personel = {
    name: 'Ahmet',
    age: 25
};

console.log(personel.name); //Ahmet
console.log(personel.age); //25	

2) Dizi benzeri gösterim ( [] )

Aşağıda, bir nesnenin özelliğinin değerine dizi benzeri gösterim yoluyla nasıl erişileceği gösterilmektedir:

objectName['propertyName']

ÖRNEK:

let personel = {
    name: 'Ahmet',
    age: 25
};

console.log(personel['name']);
console.log(personel['age']);

Bir özellik adı boşluklar içerdiğinde, onu tırnak içine almanız gerekir. Örneğin, aşağıdaki Meyve nesnesi 'hangi mevsim meyvesi' özelliğine sahiptir:

let Meyve = {
     adi:'kiraz',
    'hangi mevsim meyvesi': 'yaz',
     rengi: 'kırmızı',
     fiyati:'10tl'
};

Özelliğe erişmek için 'hangi mevsim meyvesi' dizi benzeri gösterimi kullanmanız gerekir:

meyve['hangi mevsim meyvesi']

Noktalı gösterimi kullanırsanız bir hata alırsınız:

meyve.'hangi mevsim meyvesi' //SyntaxError: Unexpected string

3) Özelliğimizi bir değişkene atayacağız ve o değişkeni kullanarak değerimizi consol'a yazdıracağız.

Not: Değerler, değişkene eşitlenirken '' tırnak içinde belirtilmeli.

let personel = {
    name: 'Ahmet',
    age: 25
};
 var x = 'age';

 console.log(personel[x]); //25

Bir Özelliğin Değerini Değiştirme

Nesneler Özellik değiştirmek kolaydır. Nesneler'de Bir özelliğin değerini değiştirmek için atama operatörünü (=) kullanırsınız. Örneğin:

let adres = {
    mahalle: 'yeni',
    no: 20,
    ulke:'Türkiye'
};
adres.mahalle = 'kaletepe'; 

//mahalle özelliğini değiştiriyoruz.

console.log(adres);

Bir Nesneye Yeni Bir Özellik Ekleme

Bir Diziye yeni Eleman eklemen için array.push() Methodu kullanılır. Nesnelerde yeni Eleman eklemek kolaydır. Aşağıdaki ifade apartman:onur özelliği adres nesnesine eklenir.

adres.apartman = 'onur';

ÇIKTI:

Bir Nesnenin Bir Özelliğini Silme

Bir nesnenin bir özelliğini silmek için delete operatörü kullanırsınız :

delete objectName.propertyName;

Aşağıdaki örnek, mahalle özelliğini adres nesneden kaldırır :

delete adres.mahalle;

mahalle özelliğine tekrar erişmeye çalışırsanız, bir undefined değer alırsınız.

Bir Özelliğin Var Olup Olmadığını Kontrol Etme

Bir nesnede bir özelliğin olup olmadığını kontrol etmek için in operatörü kullanırsınız :

propertyName in objectName

Aşağıdaki örnek bir araba nesne oluşturur ve nesnede renk özelliğinin nesnede olup olmadığını kontrol etmek için in operatörü kullanır:

let araba = {
    name: 'BMW',
    model: 2010,
    renk: 'siyah' 
};

console.log('fren' in araba); //false
console.log('renk' in araba); //true

Nesnenin Özelliklerinde Döngü

for...in Döngüyü kullanarak bir nesnenin anahtar / değer çiftlerini yineleyebilirsiniz. Bu döngü, nesnenin özelliklerini yinelemek için özel olarak optimize edilmiştir. İşte bir örnek:

let website = {
    title: 'JavaScript Tutorial',
    url: 'https://www.webcebir.com',
    tags: ['es6', 'javascript', 'node.js', 'reactjs', 'react native']
};

for (const key in website) {
    console.log(key);
}

ÇIKTI:

'title'
'url'
'tags'	

Şimdi'de Nesnemizin anahtar / değer çiftlerinden değerkısmını consol'a yazdıralım.

let website = {
    title: 'JavaScript Tutorial',
    url: 'https://www.webcebir.com',
    tags: ['es6', 'javascript', 'node.js', 'reactjs', 'react native']
};

for (const key in website) {
    console.log(website[key]);
}

ÇIKTI:

JavaScript Tutorial
https://www.webcebir.com
["es6", "javascript", "node.js", "reactjs", "react native"]

Nesnenin Yöntemlerini Çağırma

Bir nesnenin methodu, özelliklere eriştiğiniz gibi, noktalı gösterimi veya köşeli parantez gösterimini kullanarak erişebilirsiniz. İşte bir örnek:

let araba = {
    name: 'Murat',
    model: '1980',
    start: function () {
        console.log('Çalışıyor');
    }
};

araba.start(); // Çıktı: Çalışıyor
araba["start"](); // Çıktı: Çalışıyor

ES6, bir nesne için bir method tanımlamanızı daha kısa hale getirmenize olanak tanıyan özlü method sözdizimini sağlar:

let araba = {
    name: 'Murat',
    model: '1980',
    start() {
        console.log('Çalışıyor');
    }
};
araba.start();

JavaScript İç İçe Nesneler

const student = { 
    name: 'Ahmet', 
    age: 20,
    webmaster: {
        php: 70,
        css: 75
    }
}

console.log(student.webmaster); // {php: 70, css: 75}

console.log(student.webmaster.php); // 70

This Keyword Kullanımı

JavaScript this anahtar sözcüğü, ait olduğu nesneyi ifade eder.

Tipik olarak, methodların nesnede depolanan verilere erişmesi gerekir.

Örneğin, şehir nesnesinde Şehir adı ve plaka no verilerine erişmek için nesne adı yerine this ifadesi yazılır.

let city = {
    adi: 'İstanbul',
    no: 34,
    getir: function () {
        return this.no+ ' ' + this.adi;
    },
    
};


console.log(city.getir());

ÇIKTI:

İç içe nesneler kullanıldıysa bulunduğu nesnenin değerlerini yazar.

let city = {
    adi: 'İstanbul',
    no: 34,
    getir: function () {
        return this.no+ ' ' + this.adi;
    },
    person:{
    	adi:'ahmet',
    	no:25,
    	getir: function () {
        return this.adi+ ' ' + this.no;
    },

    }
    
};

console.log(city.person.getir());

ÇIKTI:

Yapıcı İşlevlerle Nesneler Oluşturma

Tek ihtiyacınız olan tek bir nesne ise ve birden çok örneğe gerek yoksa, var x = {} gibi nesne değişmez gösterimi tercih edilir. Bununla birlikte, birden çok örneğe ihtiyacınız varsa, bir yapıcı işlevi kullanmak daha iyidir. İşte bir kitap yapıcı işlevi örneği.

function Book(bilgi) {
    this.bilgisayar = bilgi;
    this.getAdi = function () {
        return "Bilgisayar Kitabı " + this.bilgisayar;
    };
}

Yöntemler dahil olmak üzere özellikler, methodun gövdesindeki this değere atanır. Yukarıdaki örnekte bir özellik ve bir method atanmıştır. Ayrıca bu Nesnenin büyük harfle yazıldığına dikkat edin (yani Book ); yapıcı işlevleri, JavaScript'te kural olarak büyük harfle yazılır

Bu işlevle yeni bir nesne oluşturmak için new operatörü ve ardından bir işlev çağrısı kullanırsınız. Bu şekilde çağrılan bir işleve, temel amacı yeni bir nesne oluşturmak ve başlatmak olan bir yapıcı işlev denir. Burada yeni bir kitap nesnesi oluşturuyoruz:

var book = new Book("javascript");

alert(book.getAdi());    // => javascript