- Nesne oluşturmak; özellikleri okumak, değiştirmek, eklemek ve silmek
- Nesneleri ve dizileri yapı bozma ile açmak
...ile kopyalamak ve birleştirmek, referansla kopyalamayı anlamak- Eksik değerleri
?.ve??ile güvenle işlemek
Bir öğrenci kartında ad, yaş, şehir ve hobiler yazar. Bunları dört ayrı değişkende tutabilirsin, ama hepsi birbirine bağlıdır ve aynı öğrenciyi anlatır. JavaScript'te bir şeyle ilgili tüm veriler bir nesnede (object) bir arada tutulur.
Nesneler ve özellikler
Süslü parantez içinde yazılan anahtar: değer çiftlerinden oluşan bir topluluk. Her çifte özellik denir; değer her tipte olabilir: sayı, string, dizi, başka bir nesne ya da fonksiyon.
Bir özelliğe nokta ile (student.name) ya da köşeli parantezle (student['name']) erişilir. Anahtarın adı bir değişkende tutuluyorsa köşeli parantez gerekir. Yeni bir özellik eklemek için ona değer atamak yeterlidir; delete ise özelliği siler.
const student = {
name: 'Aysel',
age: 14,
city: 'Baku',
hobbies: ['chess', 'music'],
};
console.log(student.name);
console.log(student['city']);
console.log(student.hobbies[1]);
const key = 'age';
console.log(student[key]);
student.age = 15;
student.grade = 9;
delete student.city;
console.log(student);▸ Beklenen çıktı
Aysel
Baku
music
14
{ name: 'Aysel', age: 15, hobbies: [ 'chess', 'music' ], grade: 9 }Değeri bir fonksiyon olan özelliğe metot denir. Metodun içinde this kelimesi nesnenin kendisini gösterir. Object.keys, Object.values ve Object.entries ise nesnenin anahtarlarını, değerlerini ve çiftlerini dizi olarak döndürür; bunları döngüyle dolaşmak kolaydır.
const counter = {
count: 0,
increase() {
this.count++;
return this.count;
},
};
counter.increase();
console.log(counter.increase());
const prices = { bread: 0.8, milk: 1.5, tea: 4 };
console.log(Object.keys(prices));
console.log(Object.values(prices));
for (const item of Object.keys(prices)) {
console.log(`${item}: ${prices[item]} AZN`);
}▸ Beklenen çıktı
2 [ 'bread', 'milk', 'tea' ] [ 0.8, 1.5, 4 ] bread: 0.8 AZN milk: 1.5 AZN tea: 4 AZN
Gerçek programlarda en sık nesne dizileriyle çalışırız: bir mağazanın ürünleri, bir sınıfın öğrencileri, siparişler. Önceki dersteki dizi metotları burada çok işe yarar.
const products = [
{ name: 'Laptop', price: 1200 },
{ name: 'Mouse', price: 25 },
{ name: 'Desk', price: 300 },
];
const cheap = products
.filter((p) => p.price < 500)
.map((p) => p.name);
const total = products.reduce((sum, p) => sum + p.price, 0);
console.log(cheap);
console.log('Total:', total);
console.log(products.find((p) => p.price > 1000));▸ Beklenen çıktı
[ 'Mouse', 'Desk' ]
Total: 1525
{ name: 'Laptop', price: 1200 }Yapı bozma (destructuring)
Yapı bozma, bir nesneden ya da diziden birkaç değeri tek satırda ayrı değişkenlere çıkarmanı sağlar. Nesnelerde değişkenler anahtar adına göre, dizilerde ise sıraya göre seçilir. Yeniden adlandırma (name: firstName) ve varsayılan değer verme (country = 'Azerbaijan') da mümkündür.
const user = { name: 'Murad', age: 16, city: 'Ganja' };
const { name, age } = user;
console.log(name, age);
const { name: firstName, country = 'Azerbaijan' } = user;
console.log(firstName, country);
const [gold, silver] = ['Leyla', 'Elvin', 'Aysel'];
console.log(gold, silver);
function printCard({ name, city }) {
console.log(`${name} lives in ${city}`);
}
printCard(user);▸ Beklenen çıktı
Murad 16 Murad Azerbaijan Leyla Elvin Murad lives in Ganja
Spread ve rest: üç nokta
... operatörü bir diziyi ya da nesneyi “açıp yayar”; buna spread denir. Onunla kopya çıkarabilir, dizileri birleştirebilir ve bazı özellikleri değiştirilmiş yeni bir nesne oluşturabilirsin. Aynı özellik iki kez gelirse sonuncusu kazanır. Yapı bozmada ise ... “geri kalan her şeyi” toplar; buna rest denir.
const morning = ['tea', 'bread'];
const evening = ['soup', 'salad'];
const menu = [...morning, 'lunch', ...evening];
console.log(menu);
console.log(Math.max(...[4, 17, 9]));
const defaults = { theme: 'light', lang: 'az', fontSize: 16 };
const settings = { ...defaults, theme: 'dark' };
console.log(settings);
const { lang, ...others } = settings;
console.log(lang, others);▸ Beklenen çıktı
[ 'tea', 'bread', 'lunch', 'soup', 'salad' ]
17
{ theme: 'dark', lang: 'az', fontSize: 16 }
az { theme: 'dark', fontSize: 16 }const original = { score: 10 };
const sameObject = original;
const copy = { ...original };
sameObject.score = 99;
console.log(original.score);
console.log(copy.score);▸ Beklenen çıktı
99 10
Eksik değerler: ?. ve ??
Sunucudan gelen verilerde bazı özellikler eksik olabilir. null bir değerin özelliğini okumaya çalışmak hataya yol açar. Optional chaining ?. bunu önler: sol taraf null ya da undefined ise yalnızca undefined döndürür. ?? operatörü ise sol taraf null ya da undefined olduğunda sağdaki yedek değeri verir.
const account = { login: 'elvin', profile: null };
console.log(account.profile?.avatar);
console.log(account.profile?.avatar ?? 'default.png');
const volume = 0;
console.log(volume || 50);
console.log(volume ?? 50);▸ Beklenen çıktı
undefined default.png 50 0
|| her falsy değeri (0 dahil) değiştirir, ?? ise yalnızca null ve undefined değerlerini.1) Destructuring ile student nesnesinden name ve city değerlerini al ve tek satırda yazdır. 2) Spread ile nesnenin age değeri 16 olan bir kopyasını oluştur ve kopyayı yazdır. 3) Orijinalin değişmediğini görmek için student.age değerini yazdır.
const student = { name: 'Murad', age: 15, city: 'Baku' };
// 1) destructure name and city and print them
// 2) copy the object with spread, set age to 16, print the copy
// 3) print student.age▸ Beklenen çıktı
Murad Baku
{ name: 'Murad', age: 16, city: 'Baku' }
15Önemli noktalar
- Nesne
anahtar: değerçiftlerinden oluşur; özelliklere.ya da[ ]ile erişilir. - Fonksiyon olan özellik bir metottur; içinde
thisnesnenin kendisidir. - Yapı bozma
const { a, b } = objveconst [x, y] = arrdeğerleri değişkenlere çıkarır. ...spread olarak kopyalar ve birleştirir, rest olarak kalanları toplar.b = anesnenin kopyası değil, aynı nesneye bir referanstır.?.eksik özelliklerde hatayı önler,??yedek değer verir.
Kendini test et
10 soru. Her doğru cevap XP kazandırır.
field değişkenindeyse özellik nasıl okunur?