Merhaba Webkolog Topluluğu!
Bugün JavaScript'in en temel ve en güçlü yapı taşlarından birine, yani Nesneler (Objects) konusuna odaklanacağız. JavaScript'te neredeyse her şey bir nesnedir; diziler, fonksiyonlar, hatta ilkel veri tipleri bile gerektiğinde nesne gibi davranabilir. Nesneler, verileri ve bu veriler üzerinde işlem yapan fonksiyonları (metotları) bir araya getirerek, gerçek dünya varlıklarını modellememizi sağlar. Hadi, bu önemli yapıyı daha yakından inceleyelim!
Nesne Nedir ve Neden Önemlidir?
Bir nesne, özelliklerin (properties) ve metotların (methods) bir koleksiyonudur. Özellikler, bir nesnenin karakteristiklerini (isim, yaş, renk gibi) tanımlayan anahtar-değer çiftleridir. Metotlar ise bir nesnenin yapabileceği eylemleri (konuşmak, yürümek, hesaplamak gibi) tanımlayan fonksiyonlardır. Nesneler, dağınık verileri düzenli bir yapıya sokmamızı ve bu verilerle ilgili işlemleri tek bir çatı altında toplamamızı sağlar.
Nesne Oluşturma Yöntemleri
1. Obje Literali (Object Literal) Kullanarak
Bu, JavaScript'te nesne oluşturmanın en yaygın ve en basit yoludur. Süslü parantezler {} kullanarak doğrudan bir nesne tanımlarsınız.
const kisi = {
// Özellikler (Properties)
isim: "Ali",
"soy isim": "Mantar", // Anahtar boşluk içeriyorsa tırnak içine alınmalı
yas: 32,
unvanlar: ["WebMaster", "Software Developer"],
evcilHayvan: { // İç içe nesne
adi: "Yeşil",
tur: "Kedi"
},
// Metot (Function olarak tanımlanmış özellik)
bilgiVer: function() {
return `Merhaba, ben ${this.isim} ${this["soy isim"]}. ${this.yas} yaşındayım.`;
}
};
// Özelliklere erişim
console.log(kisi.isim); // Ali
console.log(kisi["soy isim"]); // Mantar (Boşluk içeren anahtara erişim)
console.log(kisi.evcilHayvan.adi); // Yeşil
console.log(kisi["evcilHayvan"].tur); // Kedi
// Metot çağırma
console.log(kisi.bilgiVer()); // Merhaba, ben Ali Mantar. 32 yaşındayım.
Not: this anahtar kelimesi, metodun çağrıldığı nesneyi temsil eder.
2. new Object() Kullanarak
Daha az yaygın olsa da, bir nesneyi Object yapıcı fonksiyonunu kullanarak da oluşturabilirsiniz.
const araba = new Object();
araba.marka = "Opel";
araba.model = "Astra";
araba.yil = 2020;
console.log(araba.marka); // Opel
3. Yapıcı Fonksiyon (Constructor Function) Kullanarak (ES5 ve Öncesi)
ES6 öncesinde, birden fazla benzer nesne oluşturmak için yapıcı fonksiyonlar kullanılırdı. Bu, sınıfların (classes) ortaya çıkmasından önceki OOP yaklaşımıdır.
function Ogrenci(ad, soyad, sinif) {
this.ad = ad;
this.soyad = soyad;
this.sinif = sinif;
this.selamla = function() {
console.log(`Merhaba, ben ${this.ad}. ${this.sinif}. sınıf öğrencisiyim.`);
};
}
const ogrenci1 = new Ogrenci("Elif", "Demir", 10);
const ogrenci2 = new Ogrenci("Can", "Kara", 9);
ogrenci1.selamla(); // Merhaba, ben Elif. 10. sınıf öğrencisiyim.
console.log(ogrenci2.soyad); // Kara
Nesne Özelliklerini Yönetme
1. Özellik Silme (delete Operatörü)
Bir nesnenin bir özelliğini silmek için delete operatörünü kullanabilirsiniz.
const kullanici = {
isim: "Deniz",
email: "[email protected]",
yas: 28
};
delete kullanici.email;
console.log(kullanici); // { isim: "Deniz", yas: 28 }
2. Özellik Var Mı Kontrolü (hasOwnProperty ve in Operatörü)
Bir nesnede belirli bir özelliğin olup olmadığını kontrol etmek için iki yaygın yöntem vardır:
hasOwnProperty(): Özelliğin nesnenin kendi doğrudan özelliği olup olmadığını kontrol eder (prototip zincirindeki özellikleri saymaz).inoperatörü: Özelliğin nesnede veya prototip zincirinde olup olmadığını kontrol eder.
const bilgisayar = {
marka: "HP",
ram: "16GB"
};
console.log(bilgisayar.hasOwnProperty('marka')); // true
console.log(bilgisayar.hasOwnProperty('islemci')); // false
console.log('ram' in bilgisayar); // true
console.log('toString' in bilgisayar); // true (toString Object.prototype'da olduğu için)
3. Özellikleri Döngü ile Gezme
Bir nesnenin özelliklerini gezmek için for...in döngüsünü kullanabiliriz.
const urun = {
ad: "Laptop",
fiyat: 12000,
stok: 50,
kategori: "Elektronik"
};
for (let anahtar in urun) {
console.log(`${anahtar}: ${urun[anahtar]}`);
}
// Çıktı:
// ad: Laptop
// fiyat: 12000
// stok: 50
// kategori: Elektronik
Sadece kendi doğrudan özelliklerini gezmek istiyorsanız, hasOwnProperty() ile birlikte kullanın:
function onlineKullaniciSay(kullanicilarObj) {
let onlineSayisi = 0;
for (let kullaniciAdi in kullanicilarObj) {
if (kullanicilarObj.hasOwnProperty(kullaniciAdi) && kullanicilarObj[kullaniciAdi].online === true) {
onlineSayisi++;
}
}
return onlineSayisi;
}
let kullanicilar = {
Alan: { age: 27, online: true },
Jeff: { age: 32, online: true },
Sarah: { age: 48, online: false },
Ryan: { age: 18, online: true }
};
console.log(onlineKullaniciSay(kullanicilar)); // 3
Nesne Kopyalama ve Birleştirme
1. Spread Operatörü (...) ile Klonlama/Birleştirme (ES6+)
Spread operatörü, nesneleri (veya dizileri) kolayca kopyalamak ve birleştirmek için modern ve pratik bir yoldur. Sığ (shallow) klonlama yapar, yani iç içe nesneler referans olarak kopyalanır.
const obje1 = { a: 1, b: 2 };
const obje2 = { b: 3, c: 4 };
// Obje klonlama (sığ kopya)
const klonlanmisObje = { ...obje1 };
console.log(klonlanmisObje); // { a: 1, b: 2 }
// Obje birleştirme (aynı anahtar varsa sonuncu kazanır)
const birlestirilmisObje = { ...obje1, ...obje2 };
console.log(birlestirilmisObje); // { a: 1, b: 3, c: 4 }
2. Object.assign() Metodu (ES6+)
Object.assign() metodu, bir veya daha fazla kaynak nesnenin numaralandırılabilir, kendi sahip olduğu özelliklerinin tümünü bir hedef nesneye kopyalamak için kullanılır. Bu da sığ klonlama yapar.
const kaynak1 = { x: 10, y: 20 };
const kaynak2 = { y: 30, z: 40 };
const hedef = {};
Object.assign(hedef, kaynak1, kaynak2);
console.log(hedef); // { x: 10, y: 30, z: 40 }
// Klonlama için pratik yol
let orijinalPersonel = { isim: 'Murat', yas: 30 };
let yeniPersonel = Object.assign({}, orijinalPersonel); // Boş bir objeye kopyalar
yeniPersonel.isim = 'Ayşe';
console.log(orijinalPersonel.isim); // Murat (orijinal değişmez)
console.log(yeniPersonel.isim); // Ayşe
Nesne Destructuring (ES6+)
Nesne destructuring, bir nesnenin özelliklerini alıp ayrı değişkenlere atamanın kolay ve okunabilir bir yoludur.
const ayarlar = {
theme: "dark",
fontSize: 16,
notifications: true
};
// Klasik yöntem (ES5)
// const tema = ayarlar.theme;
// const boyut = ayarlar.fontSize;
// Destructuring ile (ES6)
const { theme, fontSize } = ayarlar;
console.log(theme); // dark
console.log(fontSize); // 16
// Farklı değişken ismiyle atama
const { theme: currentTheme, fontSize: currentFontSize } = ayarlar;
console.log(currentTheme); // dark
// Varsayılan değer atama (özellik yoksa kullanılır)
const { notifications, language = "tr" } = ayarlar;
console.log(notifications); // true
console.log(language); // tr (ayarlar objesinde 'language' olmadığı için varsayılan kullanıldı)
// İç içe nesnelerde destructuring
const havaDurumu = {
bugun: { min: 20, max: 28 },
yarin: { min: 22, max: 30 }
};
const { yarin: { max: yarinMaxSicaklik } } = havaDurumu;
console.log(yarinMaxSicaklik); // 30
// Fonksiyon parametrelerinde destructuring
const kullaniciBilgisi = {
ad: "Zeynep",
soyad: "Demir",
email: "[email protected]"
};
function bilgileriGoster({ ad, soyad, email }) { // Parametre olarak doğrudan destructuring
console.log(`Ad: ${ad}, Soyad: ${soyad}, Email: ${email}`);
}
bilgileriGoster(kullaniciBilgisi); // Ad: Zeynep, Soyad: Demir, Email: [email protected]
Map ve Set Nesneleri (ES6+)
Geleneksel JavaScript nesneleri genellikle string anahtarlar kullanır ve bazı sınırlamaları vardır. ES6 ile gelen Map ve Set, bu sınırlamaları gideren ve belirli senaryolar için daha uygun olan özel nesne türleridir.
1. Set Nesnesi
Bir Set, sadece benzersiz değerleri (tekrarlamaya izin vermez) saklayan bir koleksiyondur. Değerler herhangi bir türde olabilir (ilkel değerler veya objeler).
- Oluşturma:
new Set([iterable]) - Metotlar:
add(value),delete(value),has(value),clear(),size(özellik),values()(yineleyici döndürür)
let sayilarKumesi = new Set();
sayilarKumesi.add(1).add(5).add(1); // 1 tekrar olduğu için bir kez eklenir
sayilarKumesi.add(10);
console.log(sayilarKumesi.size); // 3 (1, 5, 10)
console.log(sayilarKumesi.has(5)); // true
console.log(sayilarKumesi.has(20)); // false
// Set üzerinde gezinme
for (let sayi of sayilarKumesi.values()) {
console.log(sayi);
}
// Çıktı:
// 1
// 5
// 10
sayilarKumesi.delete(1);
console.log(sayilarKumesi); // Set(2) { 5, 10 }
sayilarKumesi.clear();
console.log(sayilarKumesi.size); // 0
2. Map Nesnesi
Bir Map, anahtar-değer (key-value) çiftlerini saklayan bir koleksiyondur. Geleneksel objelerden farklı olarak, anahtarlar herhangi bir veri türünde olabilir (sayı, boolean, obje, hatta fonksiyon).
- Oluşturma:
new Map([iterable])(iterable genellikle[key, value]çiftlerinden oluşan bir dizi dizisi olur) - Metotlar:
set(key, value),get(key),has(key),delete(key),clear(),size(özellik),keys(),values(),entries()(yineleyiciler döndürür)
let userMap = new Map();
// Değer ekleme
userMap.set("id_1", { ad: "Cem", yas: 30 });
userMap.set("id_2", { ad: "Zeynep", yas: 25 });
userMap.set(123, "Bir sayı anahtarı"); // Sayı anahtarı
// Değer okuma
console.log(userMap.get("id_1")); // { ad: "Cem", yas: 30 }
console.log(userMap.get(123)); // Bir sayı anahtarı
console.log(userMap.has("id_2")); // true
console.log(userMap.size); // 3
// Map üzerinde gezinme
for (let [anahtar, deger] of userMap.entries()) {
console.log(`${anahtar}: ${deger.ad || deger}`); // ad yoksa doğrudan değeri yazdır
}
// Çıktı:
// id_1: Cem
// id_2: Zeynep
// 123: Bir sayı anahtarı
userMap.delete("id_1");
console.log(userMap.has("id_1")); // false
Sonuç
JavaScript'teki nesneler, programlama mantığınızın merkezinde yer alan, verileri ve işlevselliği bir araya getiren güçlü yapılardır. Obje literatürlerinden destructuring'e, Spread operatöründen modern Map ve Set koleksiyonlarına kadar birçok farklı özelliğiyle, veri yönetimi ve manipülasyonunda size inanılmaz esneklik sunarlar.
Bu konuyu derinlemesine kavramak, daha düzenli, ölçeklenebilir ve etkili JavaScript kodları yazmanız için kritik öneme sahiptir. Nesnelerle bol bol pratik yapın ve onların sunduğu imkanları keşfedin!
Webkolog'u takipte kalın!
Hepinize bol kodlu ve başarılı projeler dilerim!
0 yorum:
Yorum Gönder