Yükleniyor...

Nesne özellikleri

Literal ve noktayla okuma artık alet çantanızda. Gerçek bir formda torbanın kendisi değişir: alışveriş yapan renk seçince alan belirir, kayıtta taslak bayrağı kaybolur, şehir adresin içinde oturur. Bu sayfa, özelliklerle yapılan o günlük iştir.

İlk literalden sonrası

Nesneler sayfası torbayı kurdu ve bir alanı okudu. Burada hangi anahtarların durduğunu değiştirirsiniz: eksik adı getirir, artık gerekmeyen adı bırakır, ad orada mı diye sorar, başka nesnenin içine konmuş nesneye girer ve gerçekten tuttuğunuz adları sıralarsınız.

Bir özellik üzerinde beş hareket

📊 Ekle, kaldır, sına, iç içe koy, listele

Hareket Yazım Ne elde edersiniz
ekle item.color = "blue" aynı nesnede yeni özellik
kaldır delete item.draft o anahtar artık yok
var mı "sku" in item true ya da false
iç içe user.address.city başka nesnenin içindeki alan
listele Object.keys(user) nesnenin kendi anahtarlarının dizisi

Hareketin adını koyunca satır gelir. Eklemek ikinci bir nesne basmaz. Kaldırmak değeri boş dizgeye çevirmez. Ad listesi, tek bir değeri okumakla aynı iş değildir.

Literalde olmayan özellik ekleme

javascript 
let item = {
name: "Mug",
price: 8
};
item.color = "blue";
console.log(item.color);

Atama, eksik anahtarı büyütür

item yalnızca name ve price ile başladı. color yoktu; item.color = "blue" onu kurar. Hâlâ tek nesne var, artık üç özellikle. Konsol blue basar.

Özelliği delete ile kaldırma

javascript 
let item = {
name: "Mug",
price: 8,
draft: true
};
delete item.draft;
console.log("draft" in item);

delete anahtarı yerinden kaldırır

delete item.draft o özelliği alır, nesnenin tümünü değil. Sonra "draft" in item sonucu false olur. Ad ve fiyat durur. "" veya null saklamak başka iştir: anahtar kalır, değer yenilenir.

Anahtar var mı diye sorma

javascript 
let item = {
name: "Mug",
price: 8
};
console.log("name" in item);
console.log("sku" in item);

in anahtar hakkında evet ya da hayır der

"name" in item sonucu true — o ad nesnededir. "sku" in item sonucu false — hiç eklemediniz. Eksik özellik okununca undefined gelir; saklanmış undefined de aynı okunur. in anahtarı sorar, orada oturan değeri değil.

İç içe nesnedeki alanı okuma

javascript 
let user = {
name: "Lina",
address: {
city: "Shiraz",
zip: "71345"
}
};
console.log(user.address.city);

Bir özellik başka nesne tutabilir

address dizge değildir. İçinde city ve zip olan bir nesnedir. user.address.city iki adım atar: önce address, sonra city. Konsol Shiraz basar. İç içe koymak adres parçalarını bir arada tutar; her birini dümdüz user üzerine yaymaz.

Nesnenin kendi anahtarlarını listeleme

javascript 
let user = {
name: "Lina",
role: "editor"
};
let names = Object.keys(user);
console.log(names);

Object.keys size adları verir

Object.keys(user) o nesnenin kendi anahtarlarından bir dizi döndürür — burada ["name", "role"]. Değeri hâlâ nokta ya da köşeli parantezle okursunuz. Her adı önceden koda yazmak istemezseniz liste işe yarar. Değerleri kendiliğinden basmaz.

Önce hareketi seçin, sonra yazın

Yeni alan mı? Atayın. Kaybolması gereken anahtar mı? delete. Evet ya da hayır mı? in. Adresin içindeki şehir mi? İç içe yazın, noktalarla yürüyün. Yalnızca adlar mı? Object.keys. Nesnenin üzerinde duran işlevler — yöntemler — sonraki dersin konusu.

Eklemeden sonra iç içe şehri sayfaya koyun

Kullanıcı ve adresle başlayın, betikte plan ekleyin, şehri paragrafa yerleştirin.

Sayfa demosu — iç içe şehir

html 
<!DOCTYPE html>
<html>
<head>
<title>object-properties — page</title>
</head>
<body>
<p id="place">…</p>
<script>
let user = {
name: "Lina",
address: { city: "Shiraz" }
};
user.plan = "yearly";
let box = document.getElementById("place");
box.textContent = user.address.city + " — " + user.plan;
</script>
</body>
</html>

Paragraf Shiraz — yearly gösterir. Şehir zaten iç içeydi; plan literalden sonra geldi. Yalnızca city ya da plan değiştirin, yenileyin, yeni satırı okuyun. Sıradaki ders: nesne yöntemleri — nesnenin üzerinde yaşayan işlevler.

Alıştırma adımları

  1. İki özellikli nesne kurun, üçüncüyü atamayla ekleyin ve yazdırın.
  2. draft koyun, delete ile kaldırın, "draft" in item denetleyin.
  3. Yalnızca name taşıyan nesnede "name" in item ve "sku" in item yazdırın.
  4. address içine city koyun, sonra user.address.city yazdırın.
  5. İki anahtarlı nesne için Object.keys yazdırın ve diziyi okuyun.
  6. HTML demosunda yalnızca city ya da plan değiştirin, yenileyin, paragrafı okuyun.

Sık sürçmeler

  • item.color = "blue" yepyeni nesne basar sanmak — aynı nesne büyür
  • delete item.draft yerine item.draft = null yazmak — anahtar kalır
  • Eksik anahtarla saklanmış undefined aynı soru sanmak — anahtar için in kullanın
  • city aslında user.address üzerindeyken user.city yazmak
  • Object.keys değer döndürür beklemek
  • Bu sayfada yöntem ve this aramak — o sonraki ders

Özet

  • Eksik anahtara atama o özelliği ekler
  • delete anahtarı kaldırır; nesnenin geri kalanı durur
  • "key" in obj anahtarın var olup olmadığını söyler
  • Özellik başka nesne tutabilir; ek noktalar içeri yürür
  • Object.keys adları döndürür, değerleri değil
  • İç içe alan ile yeni eklenen alan sayfada bir satırı paylaşabilir
  • Sırada: nesne yöntemleri — nesnede saklanan işlevler

🧠 Bilginizi Test Edin

Başlamaya Hazır

Bilginizi Test Edin

Bu interaktif sınavla kendini test et ve konuyu ne kadar iyi anladığını gör

❓
8
Sorular
🎯
70%
Geçmek İçin
♾️
∞
Süre
🔄
∞
Deneme

📝 Talimatlar

  • Her soruyu dikkatle okuyun
  • Her soru için en iyi cevabı seçin
  • Quiz'i istediğiniz kadar tekrar alabilirsiniz
  • İlerlemeniz üstte gösterilecek
Konu 34 / 35
Javascript Ders