JavaScript Eğitimi #7: Nesneler (Objects) - Kompleks Veri Yapıları
JavaScript nesnelerini kapsamlı şekilde öğrenin. Property erişimi, metodlar, destructuring, spread operatörü ve JSON işlemleriyle veri yapılarında ustalaşın.
JavaScript Eğitimi #7: Nesneler (Objects)
Önceki derste dizileri öğrendik. Diziler sıralı veri koleksiyonları için harikadır ama her zaman yeterli olmaz. Bir kullanıcının bilgilerini düşünün: isim, yaş, e-posta, adres... Bunları ayrı dizilerde tutmak karmaşık olur. İşte burada nesneler devreye girer.
Nesneler, JavaScript'in temel yapı taşlarından biridir. Anahtar-değer (key-value) çiftleriyle veri saklar. Bir kullanıcı, bir ürün, bir sipariş - gerçek dünyadaki her şey nesnelerle temsil edilebilir.
İçindekiler
- Nesne Nedir?
- Nesne Oluşturma
- Property Erişimi
- Property Ekleme ve Silme
- Nesne Metodları
- this Anahtar Kelimesi
- Object Statik Metodları
- Destructuring
- Spread ve Rest Operatörleri
- İç İçe Nesneler
- JSON İşlemleri
- Pratik Örnekler
- Sık Sorulan Sorular
- Sonuç
Nesne Nedir?
Nesne, ilişkili verileri ve işlevleri bir arada tutan veri yapısıdır. Her veri parçası bir "property" (özellik), her işlev bir "method" (metod) olarak adlandırılır.
// Ayrı değişkenlerle - dağınık
const kullaniciAdi = "Ali";
const kullaniciYas = 25;
const kullaniciSehir = "İstanbul";
// Nesneyle - düzenli
const kullanici = {
ad: "Ali",
yas: 25,
sehir: "İstanbul"
};
console.log(kullanici.ad); // "Ali"
console.log(kullanici.yas); // 25Gerçek hayat analojisi: Bir kişinin kimlik kartı. Kimlik kartında isim, doğum tarihi, TC no, adres gibi bilgiler var. Tüm bu bilgiler tek bir kartla ilişkili. İşte nesne de böyle çalışır.
Nesne Oluşturma
Object Literal (En Yaygın)
// Boş nesne
const bosNesne = {};
// Dolu nesne
const kitap = {
baslik: "JavaScript Temelleri",
yazar: "Ahmet Yılmaz",
sayfaSayisi: 350,
yayinYili: 2024
};
// Kısa property sözdizimi (ES6)
const ad = "Veli";
const yas = 30;
// Eski yol
const kisi1 = { ad: ad, yas: yas };
// Yeni yol (değişken adı ile property adı aynıysa)
const kisi2 = { ad, yas };
console.log(kisi2); // { ad: "Veli", yas: 30 }Computed Property Names
const alan = "email";
const deger = "ali@mail.com";
const kullanici = {
isim: "Ali",
[alan]: deger,
["telefon" + "Numarasi"]: "555-1234"
};
console.log(kullanici);
// { isim: "Ali", email: "ali@mail.com", telefonNumarasi: "555-1234" }
// Dinamik key oluşturma
function nesneOlustur(key, value) {
return { [key]: value };
}
console.log(nesneOlustur("renk", "mavi")); // { renk: "mavi" }Object Constructor
// new Object() ile (nadiren kullanılır)
const nesne = new Object();
nesne.isim = "Test";
// Object.create() ile
const prototip = {
selamla() {
console.log(`Merhaba, ben ${this.isim}`);
}
};
const ali = Object.create(prototip);
ali.isim = "Ali";
ali.selamla(); // "Merhaba, ben Ali"Property Erişimi
Dot Notation
const araba = {
marka: "Toyota",
model: "Corolla",
yil: 2023
};
console.log(araba.marka); // "Toyota"
console.log(araba.yil); // 2023Bracket Notation
const araba = {
marka: "Toyota",
"model-adi": "Corolla",
2023: "üretim yılı"
};
// Özel karakterler veya sayılar için bracket gerekli
console.log(araba["model-adi"]); // "Corolla"
console.log(araba[2023]); // "üretim yılı"
// Dinamik erişim
const ozellik = "marka";
console.log(araba[ozellik]); // "Toyota"
console.log(araba.ozellik); // undefined (ozellik adlı property arar)Optional Chaining (?.)
Güvenli property erişimi:
const kullanici = {
isim: "Ali",
adres: {
sehir: "İstanbul"
}
};
// Tehlikeli - hata verebilir
// console.log(kullanici.iletisim.telefon); // TypeError!
// Güvenli
console.log(kullanici.iletisim?.telefon); // undefined
console.log(kullanici.adres?.sehir); // "İstanbul"
// Zincirleme
console.log(kullanici.adres?.ilce?.mahalle); // undefinedNullish Coalescing ile
const ayarlar = {
tema: "karanlik",
bildirimler: null
};
const tema = ayarlar.tema ?? "varsayilan";
const bildirimler = ayarlar.bildirimler ?? true;
const dil = ayarlar.dil ?? "tr";
console.log(tema); // "karanlik"
console.log(bildirimler); // true (null olduğu için)
console.log(dil); // "tr" (undefined olduğu için)Property Ekleme ve Silme
Ekleme
const kullanici = {
isim: "Ali"
};
// Dot notation ile
kullanici.yas = 25;
// Bracket notation ile
kullanici["email"] = "ali@mail.com";
console.log(kullanici);
// { isim: "Ali", yas: 25, email: "ali@mail.com" }Değiştirme
const kullanici = {
isim: "Ali",
yas: 25
};
kullanici.yas = 26;
kullanici["isim"] = "Ali Veli";
console.log(kullanici); // { isim: "Ali Veli", yas: 26 }Silme
const kullanici = {
isim: "Ali",
yas: 25,
email: "ali@mail.com"
};
delete kullanici.email;
console.log(kullanici); // { isim: "Ali", yas: 25 }
console.log(kullanici.email); // undefinedProperty Varlık Kontrolü
const kullanici = {
isim: "Ali",
yas: 25
};
// in operatörü
console.log("isim" in kullanici); // true
console.log("email" in kullanici); // false
// hasOwnProperty metodu
console.log(kullanici.hasOwnProperty("isim")); // true
console.log(kullanici.hasOwnProperty("toString")); // false (inherited)
// undefined kontrolü (dikkatli kullanın)
console.log(kullanici.email !== undefined); // false
// Ama property undefined olarak atanmışsa yanıltıcı olur
kullanici.telefon = undefined;
console.log(kullanici.telefon !== undefined); // false (ama property var)
console.log("telefon" in kullanici); // true (daha güvenli)Nesne Metodları
Nesnelerin içindeki fonksiyonlara "metod" denir:
const hesapMakinesi = {
// Metod tanımlama - eski yol
topla: function(a, b) {
return a + b;
},
// Metod tanımlama - kısa yol (ES6)
cikar(a, b) {
return a - b;
},
carp(a, b) {
return a * b;
},
bol(a, b) {
if (b === 0) return "Sıfıra bölünemez";
return a / b;
}
};
console.log(hesapMakinesi.topla(5, 3)); // 8
console.log(hesapMakinesi.cikar(10, 4)); // 6
console.log(hesapMakinesi.carp(3, 4)); // 12
console.log(hesapMakinesi.bol(10, 0)); // "Sıfıra bölünemez"Getter ve Setter
const kisi = {
ad: "Ali",
soyad: "Yılmaz",
// Getter
get tamAd() {
return `${this.ad} ${this.soyad}`;
},
// Setter
set tamAd(deger) {
const parcalar = deger.split(" ");
this.ad = parcalar[0];
this.soyad = parcalar[1];
}
};
console.log(kisi.tamAd); // "Ali Yılmaz"
kisi.tamAd = "Veli Demir";
console.log(kisi.ad); // "Veli"
console.log(kisi.soyad); // "Demir"this Anahtar Kelimesi
this, metodun ait olduğu nesneyi referans eder:
const kullanici = {
isim: "Ali",
yas: 25,
kendiniTanit() {
console.log(`Ben ${this.isim}, ${this.yas} yaşındayım.`);
},
yaslan() {
this.yas++;
return this; // Method chaining için
}
};
kullanici.kendiniTanit(); // "Ben Ali, 25 yaşındayım."
// Method chaining
kullanici.yaslan().yaslan().yaslan();
console.log(kullanici.yas); // 28this Sorunları
const kullanici = {
isim: "Ali",
selamla() {
console.log(`Merhaba, ${this.isim}`);
}
};
kullanici.selamla(); // "Merhaba, Ali"
// Metodu değişkene atayınca this kaybolur
const fn = kullanici.selamla;
fn(); // "Merhaba, undefined"
// Çözüm 1: bind
const bagliMetod = kullanici.selamla.bind(kullanici);
bagliMetod(); // "Merhaba, Ali"
// Çözüm 2: Arrow function (this'i miras alır)
const kullanici2 = {
isim: "Veli",
bekle() {
setTimeout(() => {
console.log(`Merhaba, ${this.isim}`);
}, 1000);
}
};
kullanici2.bekle(); // 1 saniye sonra: "Merhaba, Veli"Object Statik Metodları
Object.keys(), Object.values(), Object.entries()
const kullanici = {
isim: "Ali",
yas: 25,
sehir: "İstanbul"
};
// Anahtarları al
const anahtarlar = Object.keys(kullanici);
console.log(anahtarlar); // ["isim", "yas", "sehir"]
// Değerleri al
const degerler = Object.values(kullanici);
console.log(degerler); // ["Ali", 25, "İstanbul"]
// Anahtar-değer çiftlerini al
const ciftler = Object.entries(kullanici);
console.log(ciftler);
// [["isim", "Ali"], ["yas", 25], ["sehir", "İstanbul"]]
// Döngüde kullanım
Object.entries(kullanici).forEach(([anahtar, deger]) => {
console.log(`${anahtar}: ${deger}`);
});Object.assign()
Nesneleri birleştirme:
const varsayilan = {
tema: "acik",
dil: "tr",
bildirim: true
};
const kullaniciAyar = {
tema: "karanlik"
};
// Object.assign(hedef, ...kaynaklar)
const sonAyar = Object.assign({}, varsayilan, kullaniciAyar);
console.log(sonAyar);
// { tema: "karanlik", dil: "tr", bildirim: true }
// Dikkat: İlk parametre değiştirilir
const hedef = { a: 1 };
Object.assign(hedef, { b: 2 });
console.log(hedef); // { a: 1, b: 2 }Object.freeze() ve Object.seal()
// freeze - tamamen değiştirilemez
const sabit = Object.freeze({
ad: "Sabit Değer"
});
sabit.ad = "Yeni"; // Sessizce başarısız
sabit.yeni = "test"; // Sessizce başarısız
delete sabit.ad; // Sessizce başarısız
console.log(sabit); // { ad: "Sabit Değer" }
// seal - varolan değiştirilebilir, yeni eklenemez/silinemez
const muhurlu = Object.seal({
ad: "Mühürlü"
});
muhurlu.ad = "Değişti"; // Çalışır
muhurlu.yeni = "test"; // Çalışmaz
delete muhurlu.ad; // Çalışmaz
console.log(muhurlu); // { ad: "Değişti" }
// Kontrol
console.log(Object.isFrozen(sabit)); // true
console.log(Object.isSealed(muhurlu)); // trueObject.fromEntries()
Entries'den nesne oluşturma:
const entries = [
["isim", "Ali"],
["yas", 25],
["sehir", "İstanbul"]
];
const nesne = Object.fromEntries(entries);
console.log(nesne); // { isim: "Ali", yas: 25, sehir: "İstanbul" }
// Map'ten nesne
const map = new Map([
["a", 1],
["b", 2]
]);
const nesneden = Object.fromEntries(map);
console.log(nesneden); // { a: 1, b: 2 }
// Değerleri dönüştürme
const orijinal = { a: 1, b: 2, c: 3 };
const ikiKati = Object.fromEntries(
Object.entries(orijinal).map(([k, v]) => [k, v * 2])
);
console.log(ikiKati); // { a: 2, b: 4, c: 6 }Destructuring
Nesneden değerleri çıkarma:
const kullanici = {
isim: "Ali",
yas: 25,
sehir: "İstanbul",
email: "ali@mail.com"
};
// Eski yol
const isim1 = kullanici.isim;
const yas1 = kullanici.yas;
// Destructuring
const { isim, yas, sehir } = kullanici;
console.log(isim, yas, sehir); // "Ali" 25 "İstanbul"
// Yeniden adlandırma
const { isim: ad, yas: yasValue } = kullanici;
console.log(ad, yasValue); // "Ali" 25
// Varsayılan değer
const { ulke = "Türkiye" } = kullanici;
console.log(ulke); // "Türkiye"
// Kalan değerler
const { isim: kisiAdi, ...kalan } = kullanici;
console.log(kisiAdi); // "Ali"
console.log(kalan); // { yas: 25, sehir: "İstanbul", email: "..." }İç İçe Destructuring
const kullanici = {
isim: "Ali",
adres: {
sehir: "İstanbul",
ilce: "Kadıköy",
mahalle: {
ad: "Caferağa"
}
}
};
const {
isim,
adres: {
sehir,
mahalle: { ad: mahalleAdi }
}
} = kullanici;
console.log(isim); // "Ali"
console.log(sehir); // "İstanbul"
console.log(mahalleAdi); // "Caferağa"Fonksiyon Parametrelerinde
// Eski yol
function kullaniciBilgisi1(kullanici) {
console.log(`${kullanici.isim}, ${kullanici.yas} yaşında`);
}
// Destructuring ile
function kullaniciBilgisi2({ isim, yas, sehir = "Belirtilmemiş" }) {
console.log(`${isim}, ${yas} yaşında, ${sehir}`);
}
kullaniciBilgisi2({ isim: "Ali", yas: 25 });
// "Ali, 25 yaşında, Belirtilmemiş"Spread ve Rest Operatörleri
Spread (Yayma)
const kullanici = {
isim: "Ali",
yas: 25
};
// Kopyalama
const kopya = { ...kullanici };
kopya.yas = 26;
console.log(kullanici.yas); // 25 (değişmedi)
console.log(kopya.yas); // 26
// Birleştirme
const detaylar = {
email: "ali@mail.com",
telefon: "555-1234"
};
const tamKullanici = { ...kullanici, ...detaylar };
console.log(tamKullanici);
// { isim: "Ali", yas: 25, email: "...", telefon: "..." }
// Override
const guncellenmis = { ...kullanici, yas: 30, sehir: "Ankara" };
console.log(guncellenmis);
// { isim: "Ali", yas: 30, sehir: "Ankara" }Rest (Toplama)
const kullanici = {
isim: "Ali",
yas: 25,
email: "ali@mail.com",
telefon: "555-1234"
};
// Bazı propertyleri ayır, kalanları topla
const { isim, ...iletisimBilgileri } = kullanici;
console.log(isim); // "Ali"
console.log(iletisimBilgileri);
// { yas: 25, email: "ali@mail.com", telefon: "555-1234" }
// Fonksiyonda
function kullaniciOlustur(isim, yas, ...ekstralar) {
return { isim, yas, ekstralar };
}
console.log(kullaniciOlustur("Ali", 25, "İstanbul", "Yazılımcı"));
// { isim: "Ali", yas: 25, ekstralar: ["İstanbul", "Yazılımcı"] }İç İçe Nesneler
const sirket = {
isim: "Tech Corp",
adres: {
sehir: "İstanbul",
ilce: "Levent",
postaKodu: "34330"
},
calisanlar: [
{ isim: "Ali", departman: "Yazılım" },
{ isim: "Ayşe", departman: "Tasarım" },
{ isim: "Mehmet", departman: "Yazılım" }
],
iletisim: {
telefon: {
santral: "0212-xxx",
fax: "0212-yyy"
},
email: "info@techcorp.com"
}
};
// Erişim
console.log(sirket.adres.sehir); // "İstanbul"
console.log(sirket.calisanlar[0].isim); // "Ali"
console.log(sirket.iletisim.telefon.santral); // "0212-xxx"
// Güvenli erişim
console.log(sirket.adres?.ulke?.kod); // undefined (hata vermez)
// Yazılım departmanındaki çalışanlar
const yazilimcilar = sirket.calisanlar.filter(
c => c.departman === "Yazılım"
);
console.log(yazilimcilar.map(c => c.isim)); // ["Ali", "Mehmet"]Derin Kopyalama
const orijinal = {
isim: "Ali",
adres: {
sehir: "İstanbul"
}
};
// Sığ kopya (shallow) - iç nesneler referans olarak kalır
const sigKopya = { ...orijinal };
sigKopya.adres.sehir = "Ankara";
console.log(orijinal.adres.sehir); // "Ankara" - DEĞİŞTİ!
// Derin kopya (deep) - JSON ile
const derinKopya = JSON.parse(JSON.stringify(orijinal));
derinKopya.adres.sehir = "İzmir";
console.log(orijinal.adres.sehir); // "Ankara" - değişmedi
// Derin kopya - structuredClone (modern)
const derinKopya2 = structuredClone(orijinal);JSON İşlemleri
JSON (JavaScript Object Notation) veri alışverişi için standart format:
JSON.stringify()
Nesneyi JSON string'e çevirir:
const kullanici = {
isim: "Ali",
yas: 25,
aktif: true,
adres: {
sehir: "İstanbul"
}
};
const jsonString = JSON.stringify(kullanici);
console.log(jsonString);
// '{"isim":"Ali","yas":25,"aktif":true,"adres":{"sehir":"İstanbul"}}'
// Güzel formatla
const guzelJson = JSON.stringify(kullanici, null, 2);
console.log(guzelJson);
/*
{
"isim": "Ali",
"yas": 25,
"aktif": true,
"adres": {
"sehir": "İstanbul"
}
}
*/
// Belirli alanları seç
const secilmis = JSON.stringify(kullanici, ["isim", "yas"]);
console.log(secilmis); // '{"isim":"Ali","yas":25}'
// Dönüştürücü fonksiyon
const donusturulmus = JSON.stringify(kullanici, (key, value) => {
if (typeof value === "string") return value.toUpperCase();
return value;
});
console.log(donusturulmus);
// '{"isim":"ALİ",...,"adres":{"sehir":"İSTANBUL"}}'JSON.parse()
JSON string'i nesneye çevirir:
const jsonString = '{"isim":"Ali","yas":25,"aktif":true}';
const nesne = JSON.parse(jsonString);
console.log(nesne.isim); // "Ali"
console.log(nesne.yas); // 25
// Hata yönetimi
try {
const hatali = JSON.parse("bu geçerli json değil");
} catch (error) {
console.error("JSON parse hatası:", error.message);
}
// Reviver fonksiyonu
const tarihliJson = '{"isim":"Ali","dogumTarihi":"1999-05-15"}';
const tarihliNesne = JSON.parse(tarihliJson, (key, value) => {
if (key === "dogumTarihi") return new Date(value);
return value;
});
console.log(tarihliNesne.dogumTarihi instanceof Date); // trueLocalStorage ile Kullanım
// Kaydetme
const ayarlar = {
tema: "karanlik",
dil: "tr",
bildirimler: true
};
localStorage.setItem("ayarlar", JSON.stringify(ayarlar));
// Okuma
const kaydedilmis = localStorage.getItem("ayarlar");
const okunanAyarlar = kaydedilmis ? JSON.parse(kaydedilmis) : {};
console.log(okunanAyarlar.tema); // "karanlik"
// Güncelleme
const guncelAyarlar = { ...okunanAyarlar, tema: "acik" };
localStorage.setItem("ayarlar", JSON.stringify(guncelAyarlar));Pratik Örnekler
Örnek 1: Kullanıcı Yönetimi
const kullaniciYonetimi = {
kullanicilar: [],
ekle(kullanici) {
const yeniKullanici = {
id: Date.now(),
olusturulmaTarihi: new Date(),
...kullanici
};
this.kullanicilar.push(yeniKullanici);
return yeniKullanici;
},
bul(id) {
return this.kullanicilar.find(k => k.id === id);
},
guncelle(id, veriler) {
const index = this.kullanicilar.findIndex(k => k.id === id);
if (index === -1) return null;
this.kullanicilar[index] = {
...this.kullanicilar[index],
...veriler,
guncellemeTarihi: new Date()
};
return this.kullanicilar[index];
},
sil(id) {
const index = this.kullanicilar.findIndex(k => k.id === id);
if (index === -1) return false;
this.kullanicilar.splice(index, 1);
return true;
},
listele(filtre = {}) {
return this.kullanicilar.filter(k => {
for (const [anahtar, deger] of Object.entries(filtre)) {
if (k[anahtar] !== deger) return false;
}
return true;
});
}
};
// Kullanım
kullaniciYonetimi.ekle({ isim: "Ali", yas: 25, rol: "admin" });
kullaniciYonetimi.ekle({ isim: "Veli", yas: 30, rol: "user" });
kullaniciYonetimi.ekle({ isim: "Ayşe", yas: 28, rol: "user" });
console.log(kullaniciYonetimi.listele({ rol: "user" }));
// Veli ve Ayşe'yi listelerÖrnek 2: Ayar Yöneticisi
const AyarYoneticisi = {
varsayilanlar: {
tema: "acik",
dil: "tr",
fontSize: 14,
bildirimler: {
email: true,
push: true,
sms: false
}
},
kullaniciAyarlari: {},
yukle() {
const kayitli = localStorage.getItem("kullaniciAyarlari");
this.kullaniciAyarlari = kayitli ? JSON.parse(kayitli) : {};
},
kaydet() {
localStorage.setItem(
"kullaniciAyarlari",
JSON.stringify(this.kullaniciAyarlari)
);
},
al(yol) {
const parcalar = yol.split(".");
let deger = this.kullaniciAyarlari;
for (const parca of parcalar) {
if (deger && typeof deger === "object" && parca in deger) {
deger = deger[parca];
} else {
// Kullanıcı ayarı yoksa varsayılana bak
let varsayilan = this.varsayilanlar;
for (const p of parcalar) {
varsayilan = varsayilan?.[p];
}
return varsayilan;
}
}
return deger;
},
ayarla(yol, deger) {
const parcalar = yol.split(".");
let nesne = this.kullaniciAyarlari;
for (let i = 0; i < parcalar.length - 1; i++) {
const parca = parcalar[i];
if (!(parca in nesne)) {
nesne[parca] = {};
}
nesne = nesne[parca];
}
nesne[parcalar[parcalar.length - 1]] = deger;
this.kaydet();
},
tumunuAl() {
const derinBirlestir = (varsayilan, kullanici) => {
const sonuc = { ...varsayilan };
for (const anahtar in kullanici) {
if (
typeof kullanici[anahtar] === "object" &&
!Array.isArray(kullanici[anahtar])
) {
sonuc[anahtar] = derinBirlestir(
varsayilan[anahtar] || {},
kullanici[anahtar]
);
} else {
sonuc[anahtar] = kullanici[anahtar];
}
}
return sonuc;
};
return derinBirlestir(this.varsayilanlar, this.kullaniciAyarlari);
}
};
// Kullanım
AyarYoneticisi.yukle();
console.log(AyarYoneticisi.al("tema")); // "acik"
console.log(AyarYoneticisi.al("bildirimler.push")); // true
AyarYoneticisi.ayarla("tema", "karanlik");
AyarYoneticisi.ayarla("bildirimler.sms", true);
console.log(AyarYoneticisi.tumunuAl());Örnek 3: Nesne Karşılaştırma
function nesneleriKarsilastir(obj1, obj2) {
// Aynı referans mı?
if (obj1 === obj2) return true;
// Biri null/undefined mı?
if (!obj1 || !obj2) return false;
// Tiplerini kontrol et
if (typeof obj1 !== typeof obj2) return false;
// Nesne değilse direkt karşılaştır
if (typeof obj1 !== "object") return obj1 === obj2;
// Dizi kontrolü
if (Array.isArray(obj1) !== Array.isArray(obj2)) return false;
// Anahtar sayısı kontrolü
const keys1 = Object.keys(obj1);
const keys2 = Object.keys(obj2);
if (keys1.length !== keys2.length) return false;
// Her anahtarı recursive kontrol et
for (const key of keys1) {
if (!keys2.includes(key)) return false;
if (!nesneleriKarsilastir(obj1[key], obj2[key])) return false;
}
return true;
}
// Test
const a = { isim: "Ali", adres: { sehir: "İstanbul" } };
const b = { isim: "Ali", adres: { sehir: "İstanbul" } };
const c = { isim: "Ali", adres: { sehir: "Ankara" } };
console.log(nesneleriKarsilastir(a, b)); // true
console.log(nesneleriKarsilastir(a, c)); // falseSık Sorulan Sorular
Nesne ve dizi arasındaki fark nedir?
Dizi sıralı, index tabanlı koleksiyondur (0, 1, 2...). Nesne anahtar-değer çiftleri saklar (isim, yas, email). Sıralı veriler için dizi, isimlendirilmiş özellikler için nesne kullanın.
Object.assign mı spread mı kullanmalıyım?
Spread ({...obj}) daha modern ve okunabilir. Object.assign hedef nesneyi değiştirirken spread yeni nesne oluşturur. Genellikle spread tercih edilir.
const ile tanımlanan nesne neden değiştirilebiliyor?
const referansın değişmesini engeller, nesnenin içeriğini değil. Referans aynı kaldığı sürece propertyler değiştirilebilir. Tamamen değişmez nesne için Object.freeze() kullanın.
JSON'da fonksiyon saklayabilir miyim?
Hayır. JSON sadece veri saklar: string, number, boolean, null, object, array. Fonksiyonlar, undefined, Symbol gibi değerler JSON'a çevrilirken kaybolur.
Derin ve sığ kopya arasındaki fark?
Sığ kopya (spread, Object.assign) iç nesnelere referans tutar. Derin kopya tüm iç nesneleri de kopyalar. Derin kopya için structuredClone() veya JSON.parse(JSON.stringify()) kullanın.
Sonuç
Bu derste JavaScript nesnelerini kapsamlı şekilde öğrendik. Nesne oluşturma, property erişimi, metodlar ve this kavramını gördük. Object statik metodlarını, destructuring ve spread/rest operatörlerini inceledik. JSON işlemleriyle veri alışverişini öğrendik.
Nesneler JavaScript'in temelidir. Tarayıcıdaki her şey (document, window, console) bir nesnedir. API'lerden gelen veriler nesne formatındadır. React/Vue gibi frameworkler nesne tabanlı çalışır.
Pratik için:
- Bir "Kütüphane" nesnesi oluşturun (kitap ekle, ara, listele metodlarıyla)
- İç içe nesneyi flat (düz) nesneye çeviren fonksiyon yazın
- İki nesneyi derin birleştiren fonksiyon yazın
- LocalStorage ile kalıcı todo listesi yapın
Sonraki Ders
Bir sonraki derste DOM Manipülasyonu konusunu işleyeceğiz. JavaScript ile HTML elementlerini nasıl seçeceğimizi, değiştireceğimizi, oluşturacağımızı ve sileceğimizi öğreneceğiz. Web sayfalarını dinamik hale getirmenin temelini atacağız.
JavaScript Eğitimi #8: DOM Manipülasyonu →
Kaynaklar
Projenizi Hayata Geçirelim
Web sitesi, mobil uygulama veya yapay zeka çözümü mü arıyorsunuz? Fikirlerinizi birlikte değerlendirelim.
Ücretsiz Danışmanlık Alın