Obje ve dizilerde ileri teknikler

Ders 4'te objeyi, Ders 5'te diziyi tanıdın, Ders 11'de dizileri metotlarla dönüştürdün. Bu derste ikisini daha rahat ve daha güvenli kullanmayı öğreneceksin: bir objeyi tek satırda kutulara açmak, kopyalayıp birleştirmek, bütün alanlarını gezmek, metne çevirip saklamak ve olmayan bir değer yüzünden çökmemek.

Bu derste göreceğin const { isim } = oyuncu, { ...ayarlar } ya da oyuncu.klan?.ad ?? "Klansız" gibi satırlar gerçek projelerde neredeyse her dosyada karşına çıkar. Bütün örnekleri C:\kod\ogren\ders12.js dosyasına yaz; her yeni örnekten önce eski kodu sil ya da satırların başına // koy.

#Parçalama: objeyi kutulara açmak

Bir objenin birkaç alanıyla çalışacaksan her birini ayrı bir değişkene almak istersin. Şimdiye kadar bunu tek tek yaptın:

1const ahri = { isim: "Ahri", hp: 100, gold: 300 }2const hp = ahri.hp3const gold = ahri.gold4console.log(hp, gold)

100 300

Her satırda aynı adı iki kez yazıyorsun: hp = ahri.hp. Alan sayısı arttıkça bu tekrar hem yorar hem de yazım hatasına kapı açar. JavaScript'in bunun için kısa bir yazımı var:

1const ahri = { isim: "Ahri", hp: 100, gold: 300 }2const { hp, gold } = ahri3console.log(hp, gold)4console.log(ahri)

100 300{ isim: 'Ahri', hp: 100, gold: 300 }

İkinci satırı şöyle oku: "ahri objesinden hp ve gold alanlarını al, aynı adlı iki kutuya koy." Süslü parantez burada obje kurmuyor; eşittirin solunda durduğu için "bu objeyi aç" anlamına geliyor. Buna parçalama (destructuring) denir.

Son satıra da bak: obje yerinde duruyor. Parçalama değerleri kopyalar, objeden söküp almaz.

İki kural var. Süslü parantezin içindeki adlar objedeki anahtarlarla aynı olmalı; sıra önemli değil, const { gold, hp } = ahri de aynı işi yapar. Objede olmayan bir adı istersen kutuya undefined konur, hata çıkmaz:

1const ahri = { isim: "Ahri", hp: 100, gold: 300 }2const { mana, gold } = ahri3console.log(mana, gold)

undefined 300

#Başka bir adla almak

Aynı alanı iki ayrı objeden almak istediğinde sorun çıkar. Ahri'nin de Garen'in de hp alanı var:

1const ahri = { isim: "Ahri", hp: 100 }2const garen = { isim: "Garen", hp: 620 }3const { hp } = ahri4const { hp } = garen

C:\kod\ogren\ders12.js:4const { hp } = garen        ^ SyntaxError: Identifier 'hp' has already been declared    at wrapSafe (node:internal/modules/cjs/loader:1861:18)    ... Node.js v24.20.0

Bu, Ders 1'den tanıdığın hata: aynı adla iki kutu açılamaz. Çözüm, alanı alırken kutuya yeni bir ad vermek. Yazımı alan: yeniAd:

1const ahri = { isim: "Ahri", hp: 100 }2const garen = { isim: "Garen", hp: 620 }3const { hp: ahriHp } = ahri4const { hp: garenHp } = garen5console.log(ahriHp, garenHp)

100 620

#Varsayılan değer

Ders 10'da parametrelere varsayılan değer vermiştin. Parçalamada da aynı = ile, alan objede yoksa kullanılacak değeri yazarsın:

1const ahri = { isim: "Ahri", hp: 100, gold: 300 }2const { seviye = 1, hp = 50 } = ahri3console.log(seviye, hp)

1 100

seviye objede yok, varsayılan 1 kullanıldı. hp var; varsayılan 50 görmezden gelindi. Yeni ad ile varsayılanı birlikte de yazabilirsin. Aşağıdaki dört yazımın hepsi const … = ahri kalıbında eşittirin soluna gelir:

#Fonksiyonun parantezinde parçalama

Parçalamayı en çok fonksiyon parametrelerinde göreceksin. Bu fonksiyon bir obje alıyor ama içinden yalnız iki alana ihtiyacı var:

1function kartYaz({ isim, hp }) {2    console.log(`${isim}: ${hp} HP`)3}4 5const ahri = { isim: "Ahri", hp: 100, gold: 300 }6kartYaz(ahri)7kartYaz({ isim: "Lux", hp: 90 })

Ahri: 100 HPLux: 90 HP

Gelen obje parantezin içinde hemen açılır; fonksiyonun içinde sampiyon.isim yerine doğrudan isim yazarsın. Ders 4'te her alanın önüne sampiyon. yazmanın satırları uzattığını görmüştün; kısaltmanın yolu buydu. Blok 6'da React'le arayüz yazarken bu kalıbı neredeyse her dosyada göreceksin.

1function kartYaz({ isim, hp }) {2    console.log(`${isim}: ${hp} HP`)3}4 5kartYaz()

C:\kod\ogren\ders12.js:1function kartYaz({ isim, hp }) {                   ^ TypeError: Cannot destructure property 'isim' of 'undefined' as it is undefined.    at kartYaz (C:\kod\ogren\ders12.js:1:20)    at Object.<anonymous> (C:\kod\ogren\ders12.js:5:1)    ... Node.js v24.20.0

1function kartYaz({ isim = "Bilinmeyen", hp = 0 } = {}) {2    console.log(`${isim}: ${hp} HP`)3}4 5kartYaz({ isim: "Lux", hp: 90 })6kartYaz({ isim: "Teemo" })7kartYaz()

Lux: 90 HPTeemo: 0 HPBilinmeyen: 0 HP

#Dizi parçalama ve değiş tokuş

Dizileri de parçalayabilirsin. Dizide ad yok, sıra var; bu yüzden köşeli parantez kullanılır ve kutular sırayla dolar:

1const siralama = ["Jinx", "Lux", "Garen", "Teemo"]2const [birinci, ikinci] = siralama3console.log(birinci, ikinci)

Jinx Lux

İlk kutu 0. elemanı, ikinci kutu 1. elemanı alır; adları sen seçersin. Atlamak istediğin elemanın yerine yalnız virgülünü yazarsın. Dizide olmayan bir sıraya undefined düşer:

1const siralama = ["Jinx", "Lux", "Garen"]2const [, , ucuncu, dorduncu] = siralama3console.log(ucuncu, dorduncu)

Garen undefined

#Değiş tokuş

İki değişkenin değerini takas etmek sık gerekir: iki oyuncunun koridorunu ya da iki eşyanın yerini değiştirmek gibi. Eskiden üçüncü, geçici bir kutu gerekirdi:

1let mavi = "Ahri"2let kirmizi = "Zed"3let gecici = mavi4mavi = kirmizi5kirmizi = gecici6console.log(mavi, kirmizi)

Zed Ahri

Dizi parçalamayla tek satır yeter:

1let mavi = "Ahri"2let kirmizi = "Zed"3;[mavi, kirmizi] = [kirmizi, mavi]4console.log(mavi, kirmizi)

Zed Ahri

Üçüncü satır sağdan sola çalışır: önce [kirmizi, mavi] ile ["Zed", "Ahri"] dizisi kurulur, sonra soldaki parçalama bu diziyi sırayla mavi ve kirmizi kutularına dağıtır. Satırda let yok, çünkü kutular zaten var; yalnız içlerini değiştiriyorsun. Bu yüzden kutular let ile açılmış olmalı, const olsaydı Assignment to constant variable. hatası alırdın.

Satırın başındaki ; bir süs değil. Ders 7'de noktalı virgül koymamanın serbest olduğunu gördün, ama bunun bir istisnası var:

1let mavi = "Ahri"2let kirmizi = "Zed"3[mavi, kirmizi] = [kirmizi, mavi]4console.log(mavi, kirmizi)

C:\kod\ogren\ders12.js:3[mavi, kirmizi] = [kirmizi, mavi]       ^ ReferenceError: Cannot access 'kirmizi' before initialization    at Object.<anonymous> (C:\kod\ogren\ders12.js:3:8)    ... Node.js v24.20.0

#Yayma: dök, kopyala, birleştir

Diziye eleman eklemek için Ders 5'te push kullandın. push asıl diziyi değiştirir. Çoğu zaman eski hâli de saklamak istersin: maç başındaki kadroyu ve son kadroyu ayrı ayrı göstermek gibi. Yeni bir dizi kurup eskisinin elemanlarını içine dökersen asıl diziye dokunmamış olursun:

1const takim = ["Ahri", "Garen"]2const yeniTakim = [...takim, "Lux"]3console.log(takim)4console.log(yeniTakim)

[ 'Ahri', 'Garen' ][ 'Ahri', 'Garen', 'Lux' ]

...takim şu demek: "takim'ın elemanlarını buraya tek tek dök." Köşeli parantez yeni bir dizi kurar; içine önce takim'ın elemanları, sonra "Lux" girer. takim olduğu gibi kaldı. Bu üç noktaya yayma (spread) denir.

Farkı kendin gör:

1const mavi = ["Ahri", "Garen"]2const kirmizi = ["Zed", "Jinx"]3console.log([mavi, kirmizi])4console.log([...mavi, ...kirmizi])

[ [ 'Ahri', 'Garen' ], [ 'Zed', 'Jinx' ] ][ 'Ahri', 'Garen', 'Zed', 'Jinx' ]

İlki iki dizi içeren bir dizi (iç içe köşeli parantezlere bak), ikincisi dört isimden oluşan düz bir dizi.

#Fonksiyon çağrısında yayma

Math.max (Ders 9) sayıları virgülle ayrılmış hâlde ister; ona dizi verirsen anlamaz:

1const hasarlar = [120, 340, 90]2console.log(Math.max(hasarlar))3console.log(Math.max(...hasarlar))

NaN340

İlk satırda Math.max tek bir şey aldı: bir dizi. Onu sayıya çeviremedi ve NaN verdi. Yayma diziyi açıp Math.max(120, 340, 90) hâline getirdi. Boş bir diziyi yayarsan Math.max hiç sayı almaz ve -Infinity döndürür; liste boş olabilecekse önce length'e bak.

#Objelerde yayma

Üç nokta objelerde de çalışır:

1const ahri = { isim: "Ahri", hp: 100, gold: 300 }2const guncel = { ...ahri, hp: 80 }3console.log(ahri)4console.log(guncel)

{ isim: 'Ahri', hp: 100, gold: 300 }{ isim: 'Ahri', hp: 80, gold: 300 }

{ ...ahri, hp: 80 }: yeni bir obje kur, içine önce ahri'nin bütün alanlarını dök, sonra hp'yi 80 yap. Aynı anahtar iki kez gelince sonraki kazanır: önce hp: 100 geldi, sonra hp: 80 onun üstüne yazıldı. Asıl ahri yine değişmedi.

İki objeyi de aynı yolla birleştirirsin. Oyun profilini düşün: her yeni hesap varsayılan bir unvan, çerçeve ve simgeyle başlar; oyuncu bunlardan istediğini değiştirir. Varsayılanları önce, oyuncunun seçtiklerini sonra dökersin:

1const varsayilanProfil = { unvan: "Çaylak", cerceve: "gri", simge: 1 }2const secilenler = { unvan: "Efsane", simge: 29 }3const profil = { ...varsayilanProfil, ...secilenler }4console.log(profil)

{ unvan: 'Efsane', cerceve: 'gri', simge: 29 }

#Geri kalanı toplamak: rest

Aynı üç nokta ters yönde de çalışır: dökmek yerine toplar. Hangisi olduğunu, üç noktanın nerede durduğundan anlarsın.

Kaç vuruş geleceğini bilmediğin bir toplam hasar fonksiyonu düşün: bazen iki vuruş gelir, bazen dört, bazen hiç.

1function toplamHasar(...vuruslar) {2    return vuruslar.reduce((toplam, vurus) => toplam + vurus, 0)3}4 5console.log(toplamHasar(120, 80))6console.log(toplamHasar(50, 50, 50, 50))7console.log(toplamHasar())

2002000

...vuruslar "bana gelen bütün argümanları bir diziye topla" demek. İçeride vuruslar gerçek bir dizidir, Ders 11'deki reduce doğrudan çalışır. Hiç argüman gelmezse boş dizi olur; reduce'un başlangıç değeri 0 sayesinde sonuç da 0 çıkar.

Normal parametrelerle birlikte de kullanılır. Önce tek tek parametreler gelir, en sona geri kalan:

1function saldiri(saldiran, ...hedefler) {2    console.log(saldiran, "vurdu:", hedefler)3}4 5saldiri("Lux", "Zed", "Jinx", "Teemo")6saldiri("Ahri")

Lux vurdu: [ 'Zed', 'Jinx', 'Teemo' ]Ahri vurdu: []

İlk argüman saldiran'a gider, kalanların hepsi hedefler dizisine. Tek argümanla çağrılınca hedefler boş bir dizidir, undefined değil.

1function saldiri(...hedefler, saldiran) {2    console.log(saldiran, hedefler)3}

C:\kod\ogren\ders12.js:1function saldiri(...hedefler, saldiran) {                            ^ SyntaxError: Rest parameter must be last formal parameter    at wrapSafe (node:internal/modules/cjs/loader:1861:18)    ... Node.js v24.20.0

Parçalarken de geri kalanı toplayabilirsin. Dizide alınmayan elemanlar bir diziye, objede alınmayan alanlar bir objeye gider:

1const takim = ["Garen", "Ahri", "Lux", "Jinx"]2const [lider, ...digerleri] = takim3console.log(lider)4console.log(digerleri)

Garen[ 'Ahri', 'Lux', 'Jinx' ]

1const hesap = { kullaniciAdi: "ahri_main", sifre: "gizli123", seviye: 214 }2const { sifre, ...herkeseAcik } = hesap3console.log(herkeseAcik)4console.log(hesap)

{ kullaniciAdi: 'ahri_main', seviye: 214 }{ kullaniciAdi: 'ahri_main', sifre: 'gizli123', seviye: 214 }

Bu, gerçek projelerde çok kullanılan bir kalıp: bir kullanıcıyı ekrana basmadan ya da başkasına göndermeden önce şifre alanını ayırmak. Asıl obje bozulmaz. (Gerçek sistemler şifreyi zaten açık metin olarak saklamaz; bunu Ders 31'de göreceksin.)

#Objenin bütün alanlarını gezmek

Bir dizinin her elemanı için for...of yazabiliyordun. Aynısını bir objede dene:

1const ahri = { isim: "Ahri", hp: 100, gold: 300 }2for (const alan of ahri) {3    console.log(alan)4}

C:\kod\ogren\ders12.js:2for (const alan of ahri) {                   ^ TypeError: ahri is not iterable    at Object.<anonymous> (C:\kod\ogren\ders12.js:2:20)    ... Node.js v24.20.0

Iterable "üzerinde gezilebilir" demek. Dizi gezilebilir, obje gezilemez: objede sıra numarası yok, anahtarlar var. Çözüm, objeyi önce bir diziye çevirmek. JavaScript'in bunun için üç hazır fonksiyonu var:

1const ahri = { isim: "Ahri", hp: 100, gold: 300 }2console.log(Object.keys(ahri))3console.log(Object.values(ahri))4console.log(Object.entries(ahri))

[ 'isim', 'hp', 'gold' ][ 'Ahri', 100, 300 ][ [ 'isim', 'Ahri' ], [ 'hp', 100 ], [ 'gold', 300 ] ]

• Object.keys(obje): anahtarlar (İngilizce key, anahtar).
• Object.values(obje): değerler (value).
• Object.entries(obje): [anahtar, değer] çiftleri (entry, kayıt). En çok bu kullanılır, çünkü ikisini birden verir.

Üçü de dizi döndürdüğü için artık for...of çalışır. Her turda gelen çifti dizi parçalamayla hemen iki kutuya açarsın:

1const ahri = { isim: "Ahri", hp: 100, gold: 300 }2for (const [anahtar, deger] of Object.entries(ahri)) {3    console.log(`${anahtar}: ${deger}`)4}

isim: Ahrihp: 100gold: 300

Bu satırı ezberle: for (const [anahtar, deger] of Object.entries(obje)). Bir objenin her alanıyla iş yapmanın en yaygın yolu bu.

Dönen şey dizi olduğu için Ders 11'deki metotların hepsi de kullanılabilir. Dükkândaki fiyatlarla dene:

1const fiyatlar = { kilic: 450, kalkan: 300, iksir: 50 }2const toplam = Object.values(fiyatlar).reduce((t, fiyat) => t + fiyat, 0)3const ucuzlar = Object.entries(fiyatlar).filter(([esya, fiyat]) => fiyat < 400)4console.log(Object.keys(fiyatlar).length)5console.log(toplam)6console.log(ucuzlar)

3800[ [ 'kalkan', 300 ], [ 'iksir', 50 ] ]

• Object.keys(fiyatlar).length objede kaç alan olduğunu söyler. Boş bir obje için 0 verir; "bu obje boş mu?" sorusunun cevabı budur.
• filter'a verdiğin fonksiyon her turda bir [anahtar, değer] çifti alıyor. Parantezin içinde onu hemen parçalayabilirsin: ([esya, fiyat]) =>. Parçalama her parametrede çalışır.

#Kopya mı, aynı obje mi?

Ders 4'te bir objeyi fonksiyona verince fonksiyonun dışarıdaki objeyi değiştirebildiğini gördün; sayı verince ise yalnız kopyası gidiyordu. Bu farkın sebebini şimdi öğreneceksin. Önce bildiğin bir şey: bir sayıyı başka bir kutuya kopyalayıp kopyayı değiştirirsen asıl kutu etkilenmez.

1let can = 1002let yedekCan = can3yedekCan = 04console.log(can, yedekCan)

100 0

Şimdi aynısını bir objeyle yap:

1const ahri = { isim: "Ahri", hp: 100 }2const kopya = ahri3kopya.hp = 04console.log(ahri.hp)5console.log(kopya === ahri)

PS C:\kod\ogren> node ders12.js0true

Sebebi şu: obje bir değişkenin içine sığmaz. Değişken, objenin bellekte nerede durduğunu tutar; buna referans denir. const kopya = ahri objeyi kopyalamadı, adresini kopyaladı.

Artık aynı objeye giden iki ad var ve birinden yapılan değişikliği öteki de görür. Sayı, metin, true ve false gibi tek parça değerler ise kutunun içinde durur ve atamada kopyalanır.

Bu yüzden === objelerde içeriğe değil adrese bakar:

1const ahri = { hp: 100 }2const kopya = ahri3console.log(kopya === ahri)4console.log({ hp: 100 } === { hp: 100 })5console.log([] === [])

truefalsefalse

Aynı objeye giden iki ad eşittir. İçerikleri aynı olsa da ayrı ayrı kurulmuş iki obje eşit değildir, çünkü her { } ve her [ ] yeni bir obje kurar.

Ders 4'teki fonksiyon davranışının sebebi de bu. Fonksiyona objenin kopyası değil referansı gider; parametre, aynı objeye giden bir ad daha olur. sampiyon.hp = 0 yazan bir fonksiyon dışarıdaki objeyi değiştirir.

Bu, Ders 10'da gördüğün yan etki; program büyüdükçe "bu değeri kim değiştirdi?" sorusu zorlaşır. Ders 11'deki değişmezlik alışkanlığı burada da geçerli: asıl objeyi değiştirme, yaymayla yenisini kurup döndür:

1function hasarVer(sampiyon, miktar) {2    return { ...sampiyon, hp: sampiyon.hp - miktar }3}4 5const ahri = { isim: "Ahri", hp: 100 }6const yarali = hasarVer(ahri, 30)7console.log(ahri)8console.log(yarali)

{ isim: 'Ahri', hp: 100 }{ isim: 'Ahri', hp: 70 }

Ders 11'de sort'un asıl diziyi değiştirdiğini, toSorted'ın ise yeni dizi döndürdüğünü görmüştün. Farkın önemi buradan geliyor: sort dizinin kendisine dokunur ve o diziyi gösteren her ad değişikliği görür. Eski kodlardaki [...dizi].sort() yazımı da bu yüzden önce yaymayla bir kopya alır.

#Sığ kopya tuzağı ve structuredClone

Yayma yeni bir obje kurar, ama yalnız en dış katı yenidir. Objenin içinde bir dizi ya da başka bir obje varsa ne olduğuna bak:

1const ahri = { isim: "Ahri", hp: 100, esyalar: ["Doran Yüzüğü"] }2const kopya = { ...ahri }3kopya.hp = 504kopya.esyalar.push("Kılıç")5console.log(ahri)6console.log(kopya)

{ isim: 'Ahri', hp: 100, esyalar: [ 'Doran Yüzüğü', 'Kılıç' ] }{ isim: 'Ahri', hp: 50, esyalar: [ 'Doran Yüzüğü', 'Kılıç' ] }

hp güvende: Ahri'nin canı hâlâ 100. Ama kılıç iki objeye birden girdi.

Sebep: esyalar alanında dizinin kendisi değil, referansı durur. Yayma bu alanı kopyalarken diziyi değil referansı kopyaladı; iki obje aynı eşya dizisini paylaşıyor. Ders 11'de map'in içinde elemanı değiştirince asıl dizideki objenin de değişmesi aynı sebepten: yeni dizi, eski objeler.

Böyle, yalnız dış katı yeni olan kopyaya sığ kopya denir. { ...obje } ve [...dizi] sığ kopya üretir. İç içe bütün katları yeni olan kopya ise derin kopyadır ve JavaScript'te tek komutla yapılır: structuredClone.

1const ahri = { isim: "Ahri", hp: 100, esyalar: ["Doran Yüzüğü"] }2const kopya = structuredClone(ahri)3kopya.esyalar.push("Kılıç")4console.log(ahri)5console.log(kopya)

{ isim: 'Ahri', hp: 100, esyalar: [ 'Doran Yüzüğü' ] }{ isim: 'Ahri', hp: 100, esyalar: [ 'Doran Yüzüğü', 'Kılıç' ] }

structuredClone objeyi bütün katlarıyla, içindeki dizileri ve objeleri de yeniden kurarak kopyalar. Node'da 17. sürümden beri, bütün yaygın tarayıcılarda 2022'den beri hazır gelir; bir şey kurman gerekmez.

1const sablon = { ad: "Yeni oyuncu", altin: 0, birimler: [] }2const oyuncu1 = { ...sablon, ad: "Deniz" }3const oyuncu2 = { ...sablon, ad: "Ece" }4oyuncu1.birimler.push("Garen")5console.log(oyuncu2.birimler)6console.log(sablon.birimler)7console.log(oyuncu1.birimler === oyuncu2.birimler)

[ 'Garen' ][ 'Garen' ]true

#JSON: objeyi metne, metni objeye çevirmek

Objeler programın belleğinde yaşar; program kapanınca kaybolurlar. Veriyi dosyaya yazmak, bir sitenin sunucudan veri alması ya da iki programın konuşması için verinin metne dönüşmesi gerekir. Bunun bütün dünyada kullanılan ortak biçimi JSON'dur.

JSON.stringify objeyi JSON metnine çevirir:

1const ahri = { isim: "Ahri", hp: 100, gold: 300 }2const metin = JSON.stringify(ahri)3console.log(metin)4console.log(metin.length)

{"isim":"Ahri","hp":100,"gold":300}35

metin artık bir obje değil, 35 karakterlik bir metin; length bunu kanıtlıyor. Anahtarların da çift tırnağa alındığına bak, JSON'da bu zorunlu. Okunaklı olsun diye ikinci ve üçüncü argümanla girintili de yazdırabilirsin:

1const ahri = { isim: "Ahri", hp: 100, esyalar: ["Doran Yüzüğü", "Kılıç"] }2console.log(JSON.stringify(ahri, null, 2))

{  "isim": "Ahri",  "hp": 100,  "esyalar": [    "Doran Yüzüğü",    "Kılıç"  ]}

Üçüncü argüman (2) her katta kaç boşluk içeri girileceğini söyler. Ortadaki null "boş" anlamına gelen bir değer; onu bu dersin ilerisinde tanıyacaksın. O yer, hangi alanların yazılacağını seçmek gibi ileri bir iş için ayrılmış; şimdilik kalıp olarak null yaz.

Ters yön JSON.parse: JSON metninden yeniden obje kurar.

1const kayit = '{"isim":"Lux","seviye":6,"esyalar":["Asa","Kitap"]}'2const lux = JSON.parse(kayit)3console.log(lux)4console.log(lux.esyalar[1])

{ isim: 'Lux', seviye: 6, esyalar: [ 'Asa', 'Kitap' ] }Kitap

Metnin içinde çift tırnaklar olduğu için onu tek tırnakla açıp kapattın; Ders 1'deki kuralı hatırla: hangi tırnakla açtıysan onunla kaparsın. Gerçek programlarda bu metni sen yazmayacaksın; internetten (Ders 15) ya da bir dosyadan (Ders 29) gelecek.

JSON gördüğün her yerde ilk soru şu olmalı: "Bu şu an metin mi, obje mi?" parse etmeyi unutursan hata çıkmaz ama sonuç saçmalar:

1const kayit = '{"isim":"Lux","seviye":6}'2console.log(kayit.isim)3console.log(kayit.seviye + 1)

undefinedNaN

kayit hâlâ bir metin. Metnin isim diye bir alanı yok, undefined geldi; undefined + 1 de NaN verdi. Doğrusu önce JSON.parse(kayit).

JSON yalnız veriyi taşır: metin, sayı, true/false, null, dizi ve obje. Fonksiyonlar ve değeri undefined olan alanlar yolda sessizce düşer:

1const teemo = { isim: "Teemo", selam: () => "Hey!", klan: undefined, hedef: null }2console.log(JSON.stringify(teemo))

{"isim":"Teemo","hedef":null}

selam ve klan metne girmedi, hedef girdi. null "bilerek boş" demek; birazdan ayrıntılı göreceksin. Bir bilginin boş olduğunu JSON'a yazmak istiyorsan undefined değil null kullan.

1const kayit = '{ isim: "Ahri", hp: 100 }'2const ahri = JSON.parse(kayit)

<anonymous_script>:1{ isim: "Ahri", hp: 100 }  ^ SyntaxError: Expected property name or '}' in JSON at position 2 (line 1 column 3)    at JSON.parse (<anonymous>)    at Object.<anonymous> (C:\kod\ogren\ders12.js:2:19)    ... Node.js v24.20.0

#null ve undefined: iki çeşit "yok"

undefined'ı Ders 3 ve Ders 4'ten tanıyorsun: JavaScript bir yere hiç değer konmadığında onu kendisi koyar.

1let hedef2const ahri = { isim: "Ahri", hp: 100 }3const takim = ["Ahri", "Garen"]4console.log(hedef)5console.log(ahri.mana)6console.log(takim[5])7console.log(takim.find((isim) => isim === "Zed"))

undefinedundefinedundefinedundefined

Değer verilmemiş let, olmayan alan, dizinin dışı, bulamayan find: hepsi undefined. null ise farklıdır. JavaScript onu eksik bir yere kendiliğinden koymaz; bir programcı bilerek yazar (çoğu zaman sen, bazen de kullandığın hazır bir fonksiyonun yazarı) ve "burası bilerek boş" demektir:

1let hedef = null2const oyuncu = { isim: "Teemo", klan: null }3console.log(hedef)4console.log(oyuncu.klan)5console.log(oyuncu.mana)

nullnullundefined

oyuncu.klan null: Teemo'nun klan bilgisi tutuluyor ve cevabı "klanı yok". oyuncu.mana undefined: böyle bir bilgi hiç tutulmamış. İkisi de "yok" der ama farklı yoklardır; null === undefined sonucu da false'tur.

Bir farkı daha bil: varsayılan değerler (parametredeki de, parçalamadaki de) yalnız undefined gelince devreye girer. null "bilerek boş" olduğu için olduğu gibi kabul edilir:

1function kartYaz(isim = "Bilinmeyen") {2    console.log(isim)3}4 5kartYaz(undefined)6kartYaz(null)

Bilinmeyennull

Parçalama bölümündeki = {} varsayılanı da bu yüzden yalnız undefined'a karşı korur. function kartYaz({ isim = "Bilinmeyen", hp = 0 } = {}) fonksiyonunu kartYaz(null) diye çağırırsan varsayılan devreye girmez ve program TypeError: Cannot read properties of null (reading 'isim') ile durur.

#Doğru sayılanlar ve yanlış sayılanlar

Ders 2'de if'in parantezine hep true ya da false veren bir karşılaştırma yazdın. Ama if (hp = 0) hatasında JavaScript'in koşuldaki 0'ı false gibi saydığını da gördün. Parantez her değeri kabul eder ve onu kendi içinde true ya da false'a çevirir. Hangi değerin neye çevrildiğini Boolean(…) ile görebilirsin; Ders 9'daki Number(…) ve String(…) gibi çalışır:

1console.log(Boolean(0), Boolean(""), Boolean(null))2console.log(Boolean(undefined), Boolean(NaN), Boolean(false))3console.log(Boolean("0"), Boolean("false"), Boolean(" "))4console.log(Boolean([]), Boolean({}), Boolean(-5))

false false falsefalse false falsetrue true truetrue true true

Kural kısa. Yanlış sayılan altı değer var: false, 0, "" (boş metin), null, undefined ve NaN. Geri kalan her şey doğru sayılır: "0" ve "false" metinleri, tek boşluklu " ", boş dizi [], boş obje {}, hatta fonksiyonlar da. Ders 10'daki if (hp => 30) tuzağında koşulun hep doğru çıkması bu yüzdendi.

Eksi sıfır -0 ve bu kursta karşına çıkmayacak iki nadir değer daha yanlış sayılır; günlük kodda yukarıdaki altısını bilmen yeter.

Bunun işe yarayan bir yanı var: if (isim) yazmak "isim boş değilse" demektir.

1const isim = ""2if (isim) {3    console.log(`Hoş geldin, ${isim}`)4} else {5    console.log("Önce bir isim yaz")6}

Önce bir isim yaz

Bir de tuzağı var. Boş dizi doğru sayıldığı için if (takim) takım boşken de çalışır; "takımda biri var mı?" diye soracaksan takim.length > 0 yaz. Daha sinsi olanı sıfır:

1function altinYaz(gold) {2    if (gold) {3        console.log(`Altının: ${gold}`)4    } else {5        console.log("Altın bilgisi yok")6    }7}8 9altinYaz(300)10altinYaz(0)11altinYaz(undefined)

Altının: 300Altın bilgisi yokAltın bilgisi yok

Sıfır altın da bir bilgidir: "hiç altının yok". Ama 0 yanlış sayıldığı için program onu "bilgi yok" sandı. Çözüm, sorduğun soruyu açıkça yazmak:

1function altinYaz(gold) {2    if (gold === undefined) {3        console.log("Altın bilgisi yok")4    } else {5        console.log(`Altının: ${gold}`)6    }7}8 9altinYaz(300)10altinYaz(0)11altinYaz(undefined)

Altının: 300Altının: 0Altın bilgisi yok

#Güvenli okuma: ?.

JavaScript'te en sık göreceğin hatayı Ders 4'ten tanıyorsun:

1const oyuncu = { isim: "Teemo", seviye: 30 }2console.log(oyuncu.klan)3console.log(oyuncu.klan.ad)

undefinedC:\kod\ogren\ders12.js:3console.log(oyuncu.klan.ad)                        ^ TypeError: Cannot read properties of undefined (reading 'ad')    at Object.<anonymous> (C:\kod\ogren\ders12.js:3:25)    ... Node.js v24.20.0

(reading 'ad') okunmak istenen alanı söylüyor; sorun her zaman onun solunda. Solunda oyuncu.klan var ve ikinci satırın çıktısı onun undefined olduğunu gösteriyor. undefined'ın içi yoktur, içine bakılamaz.

Ders 4'teki çözüm, ara basamağı önce if (oyuncu.klan === undefined) ile denetlemekti; Ders 11'de find'ın sonucunu da böyle denetledin. İkisinde de bunun daha kısa bir yazımı olduğunu duymuştun.

O kısa yazım ?. işareti. Anlamı: "solundaki şey undefined ya da null ise dur ve sonuç undefined olsun; değilse normal nokta gibi devam et."

1const oyuncu = { isim: "Teemo", seviye: 30 }2const lux = { isim: "Lux", klan: { ad: "Işık Muhafızları", uye: 12 } }3console.log(oyuncu.klan?.ad)4console.log(lux.klan?.ad)

undefinedIşık Muhafızları

Teemo'nun klanı yok, program çökmedi; Lux'unki var, normal okundu. Bu işareti zincirde birden çok yerde kullanabilirsin: oyuncu.klan?.lider?.isim. find ile çok iyi anlaşır, çünkü find bulamayınca undefined döndürür:

1const takim = [2    { isim: "Ahri", hp: 100 },3    { isim: "Garen", hp: 620 }4]5console.log(takim.find((s) => s.isim === "Zed")?.hp)6console.log(takim.find((s) => s.isim === "Garen")?.hp)

undefined620

1const takim = [2    { isim: "Ahri", hp: 100 },3    { isim: "Garen", hp: 620 }4]5const zed = takim.find((s) => s.isim === "Zed")6console.log(zed.hp)

C:\kod\ogren\ders12.js:6console.log(zed.hp)                ^ TypeError: Cannot read properties of undefined (reading 'hp')    at Object.<anonymous> (C:\kod\ogren\ders12.js:6:17)    ... Node.js v24.20.0

#Yedek değer: ??

?. çökmeyi önler ama elinde undefined kalır. Ekrana "undefined" yazdırmak istemezsin; yerine anlamlı bir yedek değer koymak istersin. Bunu ?? yapar:

1const oyuncu = { isim: "Teemo", seviye: 30 }2const lux = { isim: "Lux", klan: { ad: "Işık Muhafızları" } }3console.log(oyuncu.klan?.ad ?? "Klansız")4console.log(lux.klan?.ad ?? "Klansız")

KlansızIşık Muhafızları

?? işaretini şöyle oku: "soldaki değer null ya da undefined ise sağdakini kullan, değilse soldakini." ?. ile ?? çoğu zaman birlikte gelir: biri çökmeyi önler, öteki boşluğa anlamlı bir değer koyar.

Eski kodlarda aynı iş için || (Ders 3'teki "veya") kullanıldığını görürsün. || aslında yalnız true ya da false vermez; iki yanındaki değerlerden birini olduğu gibi verir: soldaki doğru sayılıyorsa soldakini, değilse sağdakini. ?? ile farkı buradan çıkar: || solundaki yanlış sayılan her değerde sağdakine geçer ve bunların arasında 0 ile "" de var:

1console.log(0 || 100)2console.log(0 ?? 100)3console.log("" || "İsimsiz")4console.log("" ?? "İsimsiz")5console.log(null || "Yok")6console.log(null ?? "Yok")

1000İsimsiz YokYok

Dördüncü satırın çıktısı boş bir satır: "" korundu.

İki işaretin farkı tablo hâlinde:

1const garen = { isim: "Garen", hp: 0 }2const can = garen.hp || 6203console.log(`${garen.isim} canı: ${can}`)

Garen canı: 620

#Sık hatalar

Bu dersin hatalarının çoğunu bölümlerin içinde gördün. Burada kalanlar var. Bütün derslerin hataları hata rehberinde toplanıyor.

1const oyuncu = { isim: "Teemo", klan: null }2console.log(oyuncu.klan.ad)

C:\kod\ogren\ders12.js:2console.log(oyuncu.klan.ad)                        ^ TypeError: Cannot read properties of null (reading 'ad')    at Object.<anonymous> (C:\kod\ogren\ders12.js:2:25)    ... Node.js v24.20.0

#Görevler

Her görevi ders12.js dosyasında yap; önceki kodu sil ya da satırların başına // koy. Önce kendin dene, takılırsan ipuçlarını sırayla aç. Çözüme en son bak.

const veri = { summonerName: "Deniz", summonerLevel: 214, region: "TR1" }

Deniz, seviye 214, Derecesiz

1const veri = { summonerName: "Deniz", summonerLevel: 214, region: "TR1" }2const { summonerName: isim, summonerLevel: seviye, rank = "Derecesiz" } = veri3console.log(`${isim}, seviye ${seviye}, ${rank}`)

Deniz, seviye 214, Derecesiz

kadroYaz("Garen", "Ahri", "Jinx", "Lux", "Teemo")kadroYaz("Garen", "Ahri", "Jinx")

Kadro: 5 kişiÜst: Garen, orta: Jinx, alt: AhriYedekler: [ 'Lux', 'Teemo' ]Kadro: 3 kişiÜst: Garen, orta: Jinx, alt: AhriYedekler: []

1function kadroYaz(...oyuncular) {2    console.log(`Kadro: ${oyuncular.length} kişi`)3    let [ust, orta, alt, ...yedekler] = oyuncular4    ;[orta, alt] = [alt, orta]5    console.log(`Üst: ${ust}, orta: ${orta}, alt: ${alt}`)6    console.log("Yedekler:", yedekler)7}8 9kadroYaz("Garen", "Ahri", "Jinx", "Lux", "Teemo")10kadroYaz("Garen", "Ahri", "Jinx")

Kadro: 5 kişiÜst: Garen, orta: Jinx, alt: AhriYedekler: [ 'Lux', 'Teemo' ]Kadro: 3 kişiÜst: Garen, orta: Jinx, alt: AhriYedekler: []

envanterYaz({ iksir: 3, totem: 2, kilic: 0 })envanterYaz({})envanterYaz({ kalkan: 0 })

iksir x3totem x2Toplam 5 eşyaEnvanter boşEnvanter boş

1function envanterYaz(envanter) {2    const toplam = Object.values(envanter).reduce((t, adet) => t + adet, 0)3    if (toplam === 0) {4        console.log("Envanter boş")5        return6    }7    for (const [esya, adet] of Object.entries(envanter)) {8        if (adet > 0) {9            console.log(`${esya} x${adet}`)10        }11    }12    console.log(`Toplam ${toplam} eşya`)13}14 15envanterYaz({ iksir: 3, totem: 2, kilic: 0 })16envanterYaz({})17envanterYaz({ kalkan: 0 })

iksir x3totem x2Toplam 5 eşyaEnvanter boşEnvanter boş

1const takim = [2    { isim: "Garen", hp: 620 },3    { isim: "Lux", hp: 90 }4]5 6const deneme = [...takim]7for (const sampiyon of deneme) {8    sampiyon.hp = sampiyon.hp - 1009}10 11console.log(deneme)12console.log(takim)

[ { isim: 'Garen', hp: 520 }, { isim: 'Lux', hp: -10 } ][ { isim: 'Garen', hp: 520 }, { isim: 'Lux', hp: -10 } ]

[ { isim: 'Garen', hp: 520 }, { isim: 'Lux', hp: 0 } ][ { isim: 'Garen', hp: 620 }, { isim: 'Lux', hp: 90 } ]

1const takim = [2    { isim: "Garen", hp: 620 },3    { isim: "Lux", hp: 90 }4]5 6const deneme = structuredClone(takim)7for (const sampiyon of deneme) {8    sampiyon.hp = Math.max(0, sampiyon.hp - 100)9}10 11console.log(deneme)12console.log(takim)

[ { isim: 'Garen', hp: 520 }, { isim: 'Lux', hp: 0 } ][ { isim: 'Garen', hp: 620 }, { isim: 'Lux', hp: 90 } ]

1const takim = [2    { isim: "Garen", hp: 620 },3    { isim: "Lux", hp: 90 }4]5 6const deneme = takim.map((sampiyon) => {7    return { ...sampiyon, hp: Math.max(0, sampiyon.hp - 100) }8})9 10console.log(deneme)11console.log(takim)

[ { isim: 'Garen', hp: 520 }, { isim: 'Lux', hp: 0 } ][ { isim: 'Garen', hp: 620 }, { isim: 'Lux', hp: 90 } ]

1function macOzeti(mac) {2    const sure = mac.sure || 303    const oldurme = mac.oldurme || "?"4    if (mac.olum) {5        console.log(`${mac.sampiyon}: ${oldurme} öldürme, ${mac.olum} ölüm, ${sure} dk`)6    } else {7        console.log(`${mac.sampiyon}: ${oldurme} öldürme, ölüm bilinmiyor, ${sure} dk`)8    }9}10 11macOzeti({ sampiyon: "Annie", oldurme: 0, olum: 0, sure: 25 })12macOzeti({ sampiyon: "Zed", oldurme: 9, olum: 2 })13macOzeti({ sampiyon: "Lux" })

Annie: ? öldürme, ölüm bilinmiyor, 25 dkZed: 9 öldürme, 2 ölüm, 30 dkLux: ? öldürme, ölüm bilinmiyor, 30 dk

Annie: 0 öldürme, 0 ölüm, 25 dkZed: 9 öldürme, 2 ölüm, 30 dkLux: ? öldürme, ölüm bilinmiyor, 30 dk

1function macOzeti(mac) {2    const sure = mac.sure ?? 303    const oldurme = mac.oldurme ?? "?"4    if (mac.olum === undefined) {5        console.log(`${mac.sampiyon}: ${oldurme} öldürme, ölüm bilinmiyor, ${sure} dk`)6    } else {7        console.log(`${mac.sampiyon}: ${oldurme} öldürme, ${mac.olum} ölüm, ${sure} dk`)8    }9}10 11macOzeti({ sampiyon: "Annie", oldurme: 0, olum: 0, sure: 25 })12macOzeti({ sampiyon: "Zed", oldurme: 9, olum: 2 })13macOzeti({ sampiyon: "Lux" })

Annie: 0 öldürme, 0 ölüm, 25 dkZed: 9 öldürme, 2 ölüm, 30 dkLux: ? öldürme, ölüm bilinmiyor, 30 dk

const varsayilanAyarlar = { ses: 50, dil: "tr" } const kayitlar = [    '{"oyuncu":"Deniz","ayarlar":{"ses":0,"dil":"en"},"sonMac":null}',    '{"oyuncu":"Ece"}',    '{"oyuncu":"Can","ayarlar":{"ses":35},"sonMac":{"sampiyon":"Lux","sonuc":"zafer"}}']

{"oyuncu":"Deniz","ayarlar":{"ses":0,"dil":"en"},"sonSampiyon":"Henüz maç yok"}{"oyuncu":"Ece","ayarlar":{"ses":50,"dil":"tr"},"sonSampiyon":"Henüz maç yok"}{"oyuncu":"Can","ayarlar":{"ses":35,"dil":"tr"},"sonSampiyon":"Lux"}

1const varsayilanAyarlar = { ses: 50, dil: "tr" }2 3function kayitOku(metin) {4    const kayit = JSON.parse(metin)5    return {6        oyuncu: kayit.oyuncu,7        ayarlar: { ...varsayilanAyarlar, ...kayit.ayarlar },8        sonSampiyon: kayit.sonMac?.sampiyon ?? "Henüz maç yok"9    }10}11 12const kayitlar = [13    '{"oyuncu":"Deniz","ayarlar":{"ses":0,"dil":"en"},"sonMac":null}',14    '{"oyuncu":"Ece"}',15    '{"oyuncu":"Can","ayarlar":{"ses":35},"sonMac":{"sampiyon":"Lux","sonuc":"zafer"}}'16]17 18for (const metin of kayitlar) {19    console.log(JSON.stringify(kayitOku(metin)))20}21console.log(varsayilanAyarlar)

{"oyuncu":"Deniz","ayarlar":{"ses":0,"dil":"en"},"sonSampiyon":"Henüz maç yok"}{"oyuncu":"Ece","ayarlar":{"ses":50,"dil":"tr"},"sonSampiyon":"Henüz maç yok"}{"oyuncu":"Can","ayarlar":{"ses":35,"dil":"tr"},"sonSampiyon":"Lux"}{ ses: 50, dil: 'tr' }

#Kendini sına

const lux = { isim: "Lux", mana: 480 }const { mana: m, seviye = 1 } = luxconsole.log(m, seviye)console.log(mana)

const temel = { hiz: 340, menzil: 125 }const nisanci = { ...temel, menzil: 550 }const yanlis = { menzil: 550, ...temel }console.log(nisanci.menzil, yanlis.menzil)

const takim = ["Ahri"]const yedek = takimconst kopya = [...takim]yedek.push("Garen")console.log(takim.length, kopya.length)

const annie = { isim: "Annie", tibbers: () => "Ayı!", seviye: undefined, klan: null }console.log(JSON.stringify(annie))

1const takim = [2    { isim: "Ahri" },3    { isim: "Garen" },4    { isim: "Lux" }5]6const son = takim[3]7console.log(son.isim)

C:\kod\ogren\ders12.js:7console.log(son.isim)                ^ TypeError: Cannot read properties of undefined (reading 'isim')

const kill = 0console.log(kill || "yok", kill ?? "yok")

#Kayıt noktası

Bu dersin çalışmasını Git'e kaydet. VS Code terminalinde, C:\kod\ogren klasöründeyken:

Bir sonraki derste hatalarla barışacaksın: bozuk bir JSON'un ya da beklenmedik bir undefined'ın programını çökertmesini try ve catch ile engellemeyi, throw ile kendi hata mesajlarını üretmeyi öğreneceksin.