Dizi metotları: map, filter, find, reduce

Ders 5'ten beri bir dizinin üstünden geçmek için hep döngü yazdın: boş bir dizi hazırla, sayacı kur, koşulu yaz, push et. Bu derste aynı işleri tek satırda yapan dizi metotlarını öğreneceksin: forEach, map, filter, find, some, every, reduce ve sort. Ders 10'da öğrendiğin callback asıl işini burada görüyor: döngüyü metot kurar, sen yalnızca her elemana ne yapılacağını söylersin.

Dersin sonunda bir takımın canlılarını süzüp altınlarını toplayan, skor tablosunu doğru sıralayan birkaç satırlık kodlar yazabilecek ve bir iş için hangi metodu seçeceğini bileceksin.

#Aynı iskelet, üç kez

Elinde bir takımın bilgileri var ve üç şey öğrenmek istiyorsun: şampiyonların adları, hâlâ hayatta olanlar ve takımın toplam altını. Ders 5'te öğrendiğin gibi her soru için bir döngü yazarsın. C:\kod\ogren klasöründe yeni bir dosya aç: ders11.js.

1const takim = [2    { isim: "Ahri", hp: 100, gold: 300 },3    { isim: "Garen", hp: 0, gold: 450 },4    { isim: "Jinx", hp: 60, gold: 1200 },5    { isim: "Lux", hp: 0, gold: 800 }6]7 8const adlar = []9for (const sampiyon of takim) {10    adlar.push(sampiyon.isim)11}12 13const canlilar = []14for (const sampiyon of takim) {15    if (sampiyon.hp > 0) {16        canlilar.push(sampiyon.isim)17    }18}19 20let toplamAltin = 021for (const sampiyon of takim) {22    toplamAltin = toplamAltin + sampiyon.gold23}24 25console.log(adlar)26console.log(canlilar)27console.log(toplamAltin)

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

Program doğru çalışıyor. Şimdi üç döngüyü karşılaştır: üçü de aynı iskeletten çıkmış. Önce sonucu koyacağın bir kutu hazırlıyorsun, sonra diziyi baştan sona geziyorsun, her elemanda küçük bir iş yapıyorsun. Değişen tek şey o küçük iş: adı al; canı 0'dan büyükse ekle; altını topla.

Programcılar bu iskeleti binlerce kez yazınca diller hazırını getirmeye başladı. Dizilerin push ve includes gibi metotları olduğunu Ders 5'te gördün; noktayla çağrılan başka metotları da var ve bunlar döngüyü kendi içlerinde kurar. Sen yalnızca "her elemanda ne yapılacak" kısmını bir fonksiyon olarak verirsin. Ders 10'daki adıyla: bir callback.

Dosyandaki üç döngüyü sil, yerlerine şu satırları yaz. Dizi aynı kalıyor:

1const takim = [2    { isim: "Ahri", hp: 100, gold: 300 },3    { isim: "Garen", hp: 0, gold: 450 },4    { isim: "Jinx", hp: 60, gold: 1200 },5    { isim: "Lux", hp: 0, gold: 800 }6]7 8const adlar = takim.map((sampiyon) => sampiyon.isim)9const canlilar = takim10    .filter((sampiyon) => sampiyon.hp > 0)11    .map((sampiyon) => sampiyon.isim)12const toplamAltin = takim.reduce(13    (toplam, sampiyon) => toplam + sampiyon.gold,14    015)16 17console.log(adlar)18console.log(canlilar)19console.log(toplamAltin)

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

Çıktı birebir aynı, ama döngüler, boş diziler ve push'lar ortadan kalktı. Satırları şöyle okumaya alış: takim.map(...) "takımın her elemanını şuna dönüştür", takim.filter(...) "takımdan şu koşula uyanları seç", takim.reduce(...) "takımı tek bir değere indir". Bu derste hepsini tek tek açacağız. canlilar satırlarındaki gibi filter ile map'i art arda bağlamak da Ders 9'da metinlerde gördüğün zincirlemenin dizi hâli; onu dersin sonunda göreceksin.

#forEach: her eleman için bir iş

En basit metotla başla. forEach, Türkçesiyle "her biri için": dizinin her elemanı için verdiğin fonksiyonu bir kez çağırır. Önce Ders 5'teki for...of hâli, sonra aynı iş forEach ile:

const adlar = ["Lux", "Vi", "Zed"]for (const ad of adlar) {    console.log(`${ad} hazır`)}

const adlar = ["Lux", "Vi", "Zed"]adlar.forEach((ad) => {    console.log(`${ad} hazır`)})

İkisi de aynı çıktıyı verir:

Lux hazırVi hazırZed hazır

forEach'in parantezine bir ok fonksiyonu verdin. forEach dizinin başından başlar, her eleman için bu fonksiyonu çağırır ve elemanı fonksiyonun parametresine koyar: önce ad "Lux" olur, sonra "Vi", en son "Zed".

Fonksiyonu sen çağırmıyorsun, forEach çağırıyor; tıpkı Ders 10'daki herSampiyonIcin gibi. O dersteki herSampiyonIcin(takim, islem) çağrısını artık takim.forEach(islem) diye yazabilirsin. Ders 10'daki kaptan ve emir kartı benzetmesi burada da geçerli: forEach takımı sırayla dolaşan kaptan, verdiğin callback de kartta yazan emir.

Parametreye istediğin adı verebilirsin. İyi bir alışkanlık: dizinin adı çoğulsa parametreye onun tekilini ver: adlar için ad, fiyatlar için fiyat. Dizinin adı takim gibi bir topluluk adıysa parametreye tek bir üyenin adını ver: sampiyon. Kodu okuyan, parametrenin "dizinin tek bir elemanı" olduğunu adından anlar.

#İkinci parametre: sıra numarası

forEach callback'e elemanın yanında sıra numarasını (index) da verir. Almak istersen ikinci bir parametre yaz. Bunu VS Code'da dene:

1const adlar = ["Lux", "Vi", "Zed"]2 3adlar.forEach((ad, sira) => {4    console.log(`${sira + 1}. ${ad}`)5})

PS C:\kod\ogren> node ders11.js1. Lux2. Vi3. Zed

Callback'e üçüncü bir şey daha gelir: dizinin kendisi. Çok seyrek gerekir, şimdilik varlığını bilmen yeter. Bu (eleman, sıra numarası, dizi) düzeni birazdan göreceğin map, filter, find, findIndex, some ve every için de aynıdır.

#forEach geriye bir şey vermez

forEach her eleman için işini yapar ve biter; geriye bir değer döndürmez. Sonucunu bir kutuya koymaya kalkarsan undefined alırsın:

1const adlar = ["Lux", "Vi", "Zed"]2const sonuc = adlar.forEach((ad) => console.log(ad))3console.log(sonuc)

LuxViZedundefined

Yani forEach ekrana yazmak, bir sayacı artırmak gibi yan etkiler içindir. Bir diziden yeni bir dizi üretmek istiyorsan doğru metot forEach değil, birazdan göreceğin map.

1const adlar = ["Lux", "Vi", "Zed"]2adlar.forEach((ad) => {3    if (ad === "Vi") {4        break5    }6    console.log(ad)7})

C:\kod\ogren\ders11.js:4        break        ^^^^^ SyntaxError: Illegal break statement    at wrapSafe (node:internal/modules/cjs/loader:1861:18)    ... Node.js v24.20.0

#for...of mu, forEach mi?

İkisi de aynı işi görür; hangisini seçeceğin çoğunlukla alışkanlık meselesi. Yarıda durman gerekebilecekse for...of, her elemana kısa bir iş yaptıracaksan forEach rahat okunur. Bu dersteki öteki metotlar ise forEach'ten farklı olarak geriye bir değer verir; asıl güçleri de oradan gelir.

#map: her elemandan yeni bir değer

TFT'de yedek kulübendeki birimlerin fiyatları belli. Bir birimi 2 yıldıza çıkarmak için ondan 3 kopya gerekir. Her birimin 2 yıldızlı hâlinin kaça mal olacağını bir dizi olarak istiyorsun: her eleman yeni bir değere dönüşecek. Bu işin metodu map.

const fiyatlar = [4, 1, 5, 3]const ikiYildiz = []for (const fiyat of fiyatlar) {    ikiYildiz.push(fiyat * 3)}console.log(ikiYildiz)

const fiyatlar = [4, 1, 5, 3]const ikiYildiz = fiyatlar.map(    (fiyat) => fiyat * 3)console.log(ikiYildiz)

İkisinin çıktısı da aynı:

[ 12, 3, 15, 9 ]

Kod kutusu dar olduğu için callback'i alt satıra aldık. Kendi dosyanda tek satırda yazabilirsin: const ikiYildiz = fiyatlar.map((fiyat) => fiyat * 3). Parantezin içindeki satır sonları ve boşluklar JavaScript için fark etmez.

map dizinin her elemanı için callback'i çağırır ve callback'in döndürdüğü değeri yeni bir dizinin aynı sırasına koyar: 4 için 12, 1 için 3, 5 için 15, 3 için 9. Sonuç her zaman yeni bir dizidir ve eleman sayısı asıl diziyle aynıdır: 4 eleman girer, 4 eleman çıkar.

#Asıl dizi yerinde durur

map asıl diziye dokunmaz. İkisini birden yazdır, gör:

1const fiyatlar = [4, 1, 5, 3]2const ikiYildiz = fiyatlar.map((fiyat) => fiyat * 3)3console.log(fiyatlar)4console.log(ikiYildiz)

[ 4, 1, 5, 3 ][ 12, 3, 15, 9 ]

Elindeki veri bozulmadan ondan yeni şeyler türetebiliyorsun. Bu, dersin sonunda göreceğin zincirlemenin de temeli. Kendin dene: 3 yıldız için 9 kopya gerekiyor; her fiyatın 9 katını üreten bir map yaz. [ 36, 9, 45, 27 ] çıkmalı.

#Obje dizisinde map

Gerçek programlarda diziler çoğunlukla obje dizisidir. Kulübendeki birimleri dosyanın başına yaz. Bu bölümde ve sonraki iki bölümde dosyanın ilk altı satırı hep bu dizi olacak; altına yazdıkların değişecek:

1const kulube = [2    { isim: "Ahri", yildiz: 2, maliyet: 4 },3    { isim: "Garen", yildiz: 1, maliyet: 1 },4    { isim: "Jinx", yildiz: 3, maliyet: 5 },5    { isim: "Lux", yildiz: 1, maliyet: 3 }6]

Birimlerin adlarını ve satış değerlerini ayrı diziler olarak çıkar. Bu örnekte satış değeri maliyet çarpı yıldız olsun (oyundaki gerçek hesap biraz farklı):

8const isimler = kulube.map((birim) => birim.isim)9const degerler = kulube.map((birim) => birim.maliyet * birim.yildiz)10console.log(isimler)11console.log(degerler)

[ 'Ahri', 'Garen', 'Jinx', 'Lux' ][ 8, 1, 15, 3 ]

Callback her seferinde bir obje alıyor (birim) ve ondan tek bir değer çıkarıyor. Objelerden oluşan bir dizi, dört metin ya da dört sayıdan oluşan yeni bir diziye dönüştü.

1const fiyatlar = [4, 1, 5, 3]2const ikiYildiz = fiyatlar.map((fiyat) => {3    fiyat * 34})5console.log(ikiYildiz)

[ undefined, undefined, undefined, undefined ]

1const adlar = ["Lux", "Vi", "Zed"]2const sonuc = adlar.map((ad) => console.log(ad))3console.log(sonuc)

LuxViZed[ undefined, undefined, undefined ]

#filter: koşula uyanları seç

Takımın canları elinde ve yalnızca hayatta olanların canlarını istiyorsun. Ders 5'te bunu döngü, if ve push ile yapardın. filter (süzgeç) aynı işi yapar: callback true döndürürse eleman yeni diziye girer, false döndürürse girmez.

const canlar = [100, 35, 60, 0]const canlilar = []for (const can of canlar) {    if (can > 0) {        canlilar.push(can)    }}console.log(canlilar)

const canlar = [100, 35, 60, 0]const canlilar = canlar.filter(    (can) => can > 0)console.log(canlilar)

İkisi de aynı diziyi üretir:

[ 100, 35, 60 ]

filter'ın callback'i her eleman için bir soru sorar: "bu eleman kalsın mı?" Cevap olarak true ya da false döndürür; Ders 2'deki karşılaştırmalar tam olarak bunu üretir. filter elemanları değiştirmez, yalnızca seçer. Sonuçtaki elemanlar asıl dizideki elemanların aynısıdır; sayıları ise eşit ya da daha azdır.

#Obje dizisinde filter

Dosyanın başındaki kulube dizisi duruyor. Altına şunu yaz: 2 yıldız ve üstü birimler hangileri?

8const gucluler = kulube.filter((birim) => birim.yildiz >= 2)9console.log(gucluler)10console.log(gucluler.length)

[  { isim: 'Ahri', yildiz: 2, maliyet: 4 },  { isim: 'Jinx', yildiz: 3, maliyet: 5 }]2

Sonuç yine obje dizisi, çünkü filter elemanları olduğu gibi seçer. Node, tek satıra sığmayan diziyi satırlara bölerek yazdı; içerik aynı.

Kaç tane olduğunu length ile sayabilirsin (Ders 5): "kulübede kaç tane 2 yıldız ve üstü birim var?" sorusunun cevabı kulube.filter(...).length. Ders 10'un görevinde yazdığın kacTane(dizi, kosul) fonksiyonunun işini artık tek satır görüyor: dizi.filter(kosul).length.

>= ile > farkına dikkat et. birim.yildiz > 2 yazsaydın 2 yıldızlı Ahri elenirdi. Ders 2'deki sınır değeri alışkanlığı burada da geçerli: koşulun tam sınırındaki elemanı (burada 2 yıldızı) mutlaka dene.

Hiçbir eleman koşula uymazsa filter hata vermez; boş bir dizi döndürür:

8const dortYildiz = kulube.filter((birim) => birim.yildiz === 4)9console.log(dortYildiz)10console.log(dortYildiz.length)

[]0

Kendin dene: kulübeden maliyeti 3 ve üstü olan birimleri süz. Üç birim gelmeli: Ahri, Jinx ve Lux.

1const kulube = [2    { isim: "Ahri", yildiz: 2 },3    { isim: "Garen", yildiz: 1 }4]5const gucluler = kulube.filter(birim.yildiz >= 2)6console.log(gucluler)

C:\kod\ogren\ders11.js:5const gucluler = kulube.filter(birim.yildiz >= 2)                               ^ ReferenceError: birim is not defined    at Object.<anonymous> (C:\kod\ogren\ders11.js:5:32)    ... Node.js v24.20.0

#find ve findIndex: ilk uyanı bul

Bazen hepsini değil, yalnızca ilk uyanı istersin. Takımın canlarında 50'nin altına düşmüş ilk değer hangisi? Ders 5'te bunu döngü ve break ile yazardın. find aynı işi yapar ve bulduğu elemanı döndürür, bir dizi değil.

const canlar = [100, 35, 60, 0]let dusuk = undefinedfor (const can of canlar) {    if (can < 50) {        dusuk = can        break    }}console.log(dusuk)

const canlar = [100, 35, 60, 0]const dusuk = canlar.find(    (can) => can < 50)console.log(dusuk)

İkisi de aynı sonucu yazar:

35

find baştan başlar, callback'in true döndürdüğü ilk elemanda durur ve o elemanı döndürür. 0 da 50'nin altında ama find ona hiç bakmadı; 35'i bulunca iş bitti. Sonuç bir dizi değil, elemanın kendisi.

#Obje dizisinde find

find en çok obje dizilerinde, bir elemanı adıyla ya da numarasıyla aramak için kullanılır. Kulübede Jinx var mı, varsa kaç yıldız?

8const jinx = kulube.find((birim) => birim.isim === "Jinx")9console.log(jinx)10console.log(jinx.yildiz)

{ isim: 'Jinx', yildiz: 3, maliyet: 5 }3

Peki aradığın birim kulübede yoksa? find hata vermez; undefined döndürür:

8const teemo = kulube.find((birim) => birim.isim === "Teemo")9console.log(teemo)

undefined

undefined'ı Ders 3'ten ve Ders 4'ten tanıyorsun: "burada bir değer yok". Asıl tehlike, bulunamayan elemanın alanını okumaya kalkınca başlar.

1const takim = [2    { isim: "Ahri", hp: 100 },3    { isim: "Garen", hp: 0 }4]5const teemo = takim.find((sampiyon) => sampiyon.isim === "Teemo")6console.log(teemo.hp)

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

1const takim = [2    { isim: "Ahri", hp: 100 },3    { isim: "Garen", hp: 0 }4]5const teemo = takim.find((sampiyon) => sampiyon.isim === "Teemo")6if (teemo === undefined) {7    console.log("Teemo takımda yok")8} else {9    console.log(teemo.hp)10}

Teemo takımda yok

#findIndex: elemanın yeri

Bazen elemanın kendisi değil, dizideki yeri gerekir: Jinx kulübenin kaçıncı yuvasında? Ders 5'te bunu i sayaçlı for döngüsüyle yazardın: let sira = -1 ile başlar, uyan elemanda sira = i yapıp break ederdin. find'ın kardeşi findIndex aynı işi yapar: aynı callback'i alır ama elemanı değil sıra numarasını döndürür; hiçbir eleman uymazsa, döngüdeki başlangıç değeri gibi, -1 verir.

8const jinxSira = kulube.findIndex((birim) => birim.isim === "Jinx")9const teemoSira = kulube.findIndex((birim) => birim.isim === "Teemo")10console.log(jinxSira)11console.log(teemoSira)12console.log(kulube.indexOf("Jinx"))13console.log(`Jinx ${jinxSira + 1}. yuvada`)

2-1-1Jinx 3. yuvada

Çıktının üçüncü satırına dikkat: Ders 5'teki indexOf da sıra numarası verir ama bir değer arar. Kulübede "Jinx" diye bir metin yok, Jinx'i anlatan bir obje var; bu yüzden indexOf bulamadı. Elemanlar obje olunca koşul alan findIndex'i kullan.

Kendin dene: kulübede maliyeti 1 olan ilk birimi find ile bul (Garen gelmeli), sonra maliyeti 2 olanı ara (undefined gelmeli). Aynı iki aramayı findIndex ile yap: 1 ve -1 gelmeli.

map, filter ve find'ı aynı kulübe üzerinde yan yana görelim:

#some ve every: en az biri mi, hepsi mi?

Bazen elemanların kendisi değil, yalnızca "evet mi, hayır mı" cevabı gerekir. Takımda ölen var mı? Herkesin altını bir eşyaya yetiyor mu? Ders 5'te bunu false ile başlayan bir kutu, if ve break ile yapardın. some (bazısı) ve every (her biri) doğrudan true ya da false döndürür.

const canlar = [100, 35, 60, 0]let oluVar = falsefor (const can of canlar) {    if (can === 0) {        oluVar = true        break    }}console.log(oluVar)

const canlar = [100, 35, 60, 0]const oluVar = canlar.some(    (can) => can === 0)console.log(oluVar)

İkisinin cevabı da aynı:

true

some "en az biri uyuyor mu?" diye sorar: callback'in true döndürdüğü ilk elemanda durur ve true verir; hiçbiri uymazsa false. every "hepsi uyuyor mu?" diye sorar: ilk uymayan elemanda durur ve false verir; hepsi uyarsa true. every'nin döngü hâli yukarıdakinin tersidir: kutu true ile başlar, ilk uymayan elemanda false olur ve break gelir.

Dersin başındaki takımı dosyanın başına geri yaz. Bu bölümde ve bir sonrakinde dosyanın ilk altı satırı bu olacak:

1const takim = [2    { isim: "Ahri", hp: 100, gold: 300 },3    { isim: "Garen", hp: 0, gold: 450 },4    { isim: "Jinx", hp: 60, gold: 1200 },5    { isim: "Lux", hp: 0, gold: 800 }6]

8const oluVar = takim.some((sampiyon) => sampiyon.hp === 0)9const hepsiZengin = takim.every((sampiyon) => sampiyon.gold >= 300)10const hepsiCanli = takim.every((sampiyon) => sampiyon.hp > 0)11console.log(oluVar)12console.log(hepsiZengin)13console.log(hepsiCanli)

truetruefalse

Ahri'nin altını tam 300; >= kullandığımız için o da uydu ve hepsiZengin true çıktı. > yazsaydın false olurdu. Sınırı yine dene.

some'ı Ders 5'teki includes ile karıştırma. İkisi de true ya da false verir, ama includes bir değeri arar (adlar.includes("Lux")), some ise bir koşulu. Basit bir değer arıyorsan includes, koşul gerekiyorsa some.

Kendin dene: takımda altını 1000'den fazla olan biri var mı (true çıkmalı)? Herkesin canı 100 mü (false çıkmalı)?

#reduce: hepsini tek değere indir

Şimdiye kadarki metotlar bir dizi, tek bir eleman, bir sıra numarası ya da true/false döndürdü. Bazen bütün diziyi tek bir değere indirmek istersin: toplam altın, en zengin şampiyon, bölgelere göre gruplar. Ders 5'te bunun için döngüden önce bir let toplam = 0 kutusu açardın. reduce (indirgemek) bu kutuyu da kendisi taşır.

const altinlar = [300, 450, 800]let toplam = 0for (const altin of altinlar) {    toplam = toplam + altin}console.log(toplam)

const altinlar = [300, 450, 800]const toplam = altinlar.reduce(    (birikim, altin) => {        return birikim + altin    },    0)console.log(toplam)

İkisi de aynı toplamı bulur:

1550

reduce'a iki şey veriyorsun: bir callback ve bir başlangıç değeri (burada 0). Döngüdeki let toplam = 0 satırının karşılığı bu başlangıç değeri. Callback'in iki parametresi var: o ana kadar biriken değer, yani biriktirici (birikim), ve sıradaki eleman (altin). Her turda callback'in döndürdüğü değer, bir sonraki turun birikim'i olur; dizi bitince son dönen değer reduce'un sonucudur.

Aynı turlar tablo olarak:

#Kısa yazılış ve obje dizisi

Callback tek bir hesaptan ibaretse süslü parantez ve return gerekmez. Dosyanın başındaki takımın toplam altını:

8const toplamAltin = takim.reduce(9    (toplam, sampiyon) => toplam + sampiyon.gold,10    011)12console.log(toplamAltin)

2750

reduce'un parantezinde iki argüman var, virgülle ayrılmış: önce callback, sonra başlangıç değeri 0. Tek satıra yazınca kolayca karışır: takim.reduce((toplam, sampiyon) => toplam + sampiyon.gold, 0). Buradaki , 0 callback'in parçası değil, reduce'un ikinci argümanı; en sondaki ) ise reduce'un parantezini kapatır. Kendin dene: takımın toplam canını hesapla; 160 çıkmalı.

1const altinlar = []2const toplam = altinlar.reduce((birikim, altin) => birikim + altin)3console.log(toplam)

C:\kod\ogren\ders11.js:2const toplam = altinlar.reduce((birikim, altin) => birikim + altin)                        ^ TypeError: Reduce of empty array with no initial value    at Array.reduce (<anonymous>)    at Object.<anonymous> (C:\kod\ogren\ders11.js:2:25)    ... Node.js v24.20.0

#En büyüğü bulmak

Biriktirici yalnızca bir toplam olmak zorunda değil. Takımın en zengin şampiyonunu bulalım; bu kez biriktirici "şimdiye kadarki en zengin" şampiyonun objesi. Ders 5'teki let enYuksek = takim[0] döngüsüyle aynı fikir:

8const enZengin = takim.reduce((enIyi, sampiyon) => {9    if (sampiyon.gold > enIyi.gold) {10        return sampiyon11    }12    return enIyi13})14console.log(enZengin)

{ isim: 'Jinx', hp: 60, gold: 1200 }

Her turda iki şampiyonu karşılaştırıp daha zengin olanı döndürüyoruz; dönen, bir sonraki turun enIyi'si oluyor. Bu kez başlangıç değeri vermedik: reduce ilk elemanı (Ahri) başlangıç aldı ve ikinci elemandan başladı. En büyüğü ararken bu kullanışlı, ama yukarıdaki hatayı hatırla: takım boşsa program çöker. Boş olabilecek bir dizide önce takim.length === 0 mı diye bak.

#Gruplamak

Biriktiriciyi boş bir obje olarak başlatıp turdan tura doldurabilirsin de. Şampiyonları bölgelerine göre gruplayalım: sonuç, her bölgenin adı altında o bölgeden şampiyonların listesini tutan bir obje olsun. Bu örnek tek başına bir program; dosyandakini silip yaz:

1const sampiyonlar = [2    { isim: "Ahri", bolge: "Ionia" },3    { isim: "Garen", bolge: "Demacia" },4    { isim: "Yasuo", bolge: "Ionia" },5    { isim: "Lux", bolge: "Demacia" },6    { isim: "Jinx", bolge: "Zaun" }7]8 9const bolgeler = sampiyonlar.reduce((gruplar, sampiyon) => {10    if (gruplar[sampiyon.bolge] === undefined) {11        gruplar[sampiyon.bolge] = []12    }13    gruplar[sampiyon.bolge].push(sampiyon.isim)14    return gruplar15}, {})16 17console.log(bolgeler)

{  Ionia: [ 'Ahri', 'Yasuo' ],  Demacia: [ 'Garen', 'Lux' ],  Zaun: [ 'Jinx' ]}

Adım adım ne oluyor:

1const sampiyonlar = [2    { isim: "Ahri", bolge: "Ionia" },3    { isim: "Garen", bolge: "Demacia" }4]5const bolgeler = sampiyonlar.reduce((gruplar, sampiyon) => {6    if (gruplar[sampiyon.bolge] === undefined) {7        gruplar[sampiyon.bolge] = []8    }9    gruplar[sampiyon.bolge].push(sampiyon.isim)10}, {})11console.log(bolgeler)

C:\kod\ogren\ders11.js:6    if (gruplar[sampiyon.bolge] === undefined) {               ^ TypeError: Cannot read properties of undefined (reading 'Demacia')    at C:\kod\ogren\ders11.js:6:16    at Array.reduce (<anonymous>)    ... Node.js v24.20.0

#sort: sıralamak

Maç sonu skor tablosunu düşün: oyuncular puana göre büyükten küçüğe dizilir. Sıralamayı döngüyle yazmak (sıralama algoritmaları) ayrı ve uzun bir konu; mülakatlarda sorulur ama günlük işte herkes hazır sort metodunu kullanır. Bu yüzden bu bölümde döngülü karşılaştırma yok. Yalnız sort'un iki sürprizi var ve ikisi de yeni başlayanları sık sık yakalar.

#Sürpriz 1: sayıları metin gibi sıralar

1const sayilar = [10, 9, 1]2sayilar.sort()3console.log(sayilar)

[ 1, 10, 9 ]

10, 9'dan önce geldi. Sebep: sort'a nasıl sıralayacağını söylemezsen elemanları metne çevirir ve metinleri sözlükteki gibi soldan sağa, karakter karakter karşılaştırır. "10" ile "9" karşılaştırılırken önce ilk karakterlere, "1" ile "9"'a bakılır; "1" önde olduğu için "10" öne geçer. Sözlükte "araba"nın "su"dan önce gelmesi gibi: kelimenin uzunluğuna değil, ilk harfine bakılır.

"1" ile "10"'un ise ilk karakteri aynı. O zaman sıradaki karaktere geçilir; "1" orada bittiği için önce o gelir, sözlükte "ara"nın "araba"dan önce gelmesi gibi.

#Karşılaştırma fonksiyonu

Sayıları sayı gibi sıralatmak için sort'a iki elemanı karşılaştıran bir fonksiyon verirsin. sort sıralarken elemanları ikişer ikişer bu fonksiyona sorar; fonksiyon bir sayı döndürür:

• Eksi bir sayı: a önce gelsin.
• Artı bir sayı: b önce gelsin.
• 0: ikisi eşit, sıralarını değiştirme.

Küçükten büyüğe sıralamanın kısa yolu (a, b) => a - b: a küçükse çıkarmanın sonucu eksi olur ve a öne geçer. Büyükten küçüğe için çıkarmayı ters çevirirsin: (a, b) => b - a.

1const sayilar = [10, 9, 1]2sayilar.sort((a, b) => a - b)3console.log(sayilar)4sayilar.sort((a, b) => b - a)5console.log(sayilar)

[ 1, 9, 10 ][ 10, 9, 1 ]

Birkaç karşılaştırmada a - b ne der:

Burada tek harfli a ve b herkesin kullandığı bir alışkanlık; "birinci" ve "ikinci" diye oku. Bu iki kalıbı ezberlemen yeterli, her seferinde eksi ve artı hesabı yapman gerekmez.

1const sayilar = [10, 9, 1]2sayilar.sort((a, b) => a > b)3console.log(sayilar)

[ 10, 9, 1 ]

#Skor tablosu: objeleri sıralamak

Objeleri sıralarken karşılaştırma fonksiyonunda alanları kullanırsın. Puanı yüksek olan önde olsun:

1const skorlar = [2    { oyuncu: "Deniz", puan: 1450 },3    { oyuncu: "Ece", puan: 2300 },4    { oyuncu: "Can", puan: 980 },5    { oyuncu: "Selin", puan: 2300 }6]7 8skorlar.sort((a, b) => b.puan - a.puan)9skorlar.forEach((satir, sira) => {10    console.log(`${sira + 1}. ${satir.oyuncu}: ${satir.puan}`)11})

1. Ece: 23002. Selin: 23003. Deniz: 14504. Can: 980

Puanları eşit olan Ece ile Selin dizideki eski sıralarını korudu: sort eşit elemanların yerini değiştirmez. Kendin dene: skorları küçükten büyüğe sırala; ilk satırda Can olmalı.

#Sürpriz 2: sort asıl diziyi değiştirir

map ve filter asıl diziye dokunmuyordu. sort dokunur: diziyi yerinde sıralar ve geriye aynı diziyi verir. Yukarıdaki skor tablosunda skorlar dizisinin sırası kalıcı olarak değişti. Çoğu zaman sorun yok; ama asıl sırayı başka bir yerde kullanacaksan sessizce bozulmuş olur.

1const macPuanlari = [40, 95, 70]2const sirali = macPuanlari.sort((a, b) => b - a)3console.log(sirali)4console.log(macPuanlari)

[ 95, 70, 40 ][ 95, 70, 40 ]

#toSorted: sıralı bir kopya

toSorted (sıralanmış hâlini ver) sort ile aynı karşılaştırma fonksiyonunu alır ama asıl diziye dokunmaz; sıralı yepyeni bir dizi döndürür:

1const macPuanlari = [40, 95, 70]2const sirali = macPuanlari.toSorted((a, b) => b - a)3console.log(sirali)4console.log(macPuanlari)

[ 95, 70, 40 ][ 40, 95, 70 ]

toSorted JavaScript'e 2023'te eklendi; Node.js'te 20. sürümden beri var, senin Node 24'ünde sorunsuz çalışır. Eski öğreticilerde aynı iş için [...dizi].sort() gibi yazımlar görürsen şaşırma: o da önce kopyalayıp sonra sıralamanın eski yolu; üç noktanın ne olduğunu Ders 12'de öğreneceksin.

#Değişmezlik: hangi metot asıl diziye dokunur?

Bu derste gördüğün metotların çoğu asıl diziyi olduğu gibi bırakıp sonucu yeni bir değer olarak verir. Aralarında asıl diziyi değiştiren tek metot sort; Ders 5'ten tanıdığın push ve pop da diziyi değiştirir. Bu ayrımı bilmek, "verim kendi kendine değişti" türünden en sinsi hataları önler.

#Zincirleme

Ders 9'da metinlerde zincirleme gördün: mesaj.trim().toLowerCase(). Diziler de aynı şekilde zincirlenir. filter ve map yeni bir dizi döndürdüğü için sonucun üstünde hemen başka bir metot çağırabilirsin. Dersin başındaki "canlıların adları" satırı tam buydu: önce süz, sonra dönüştür. Takım dizisini yine dosyanın başına yaz:

1const takim = [2    { isim: "Ahri", hp: 100, gold: 300 },3    { isim: "Garen", hp: 0, gold: 450 },4    { isim: "Jinx", hp: 60, gold: 1200 },5    { isim: "Lux", hp: 0, gold: 800 }6]

8const canliAdlari = takim9    .filter((sampiyon) => sampiyon.hp > 0)10    .map((sampiyon) => sampiyon.isim)11console.log(canliAdlari)

[ 'Ahri', 'Jinx' ]

Satırları yukarıdan aşağı oku: takımı al, canlıları süz, adlarına dönüştür. Her nokta, bir önceki adımın sonucu üzerinde çalışır: filter iki şampiyonluk yeni bir dizi verdi, map o dizinin üstünde çalıştı. Satır başındaki nokta JavaScript'i şaşırtmaz; satır noktayla başlayınca bir önceki satırın devamı sayılır.

Zincire bir halka daha ekle: canlıların toplam altını.

8const canliAltin = takim9    .filter((sampiyon) => sampiyon.hp > 0)10    .map((sampiyon) => sampiyon.gold)11    .reduce((toplam, altin) => toplam + altin, 0)12console.log(canliAltin)

1500

Halkaların sırası önemli. Önce map ile altınlara dönüştürseydin elinde yalnızca sayılar kalırdı ve hangisinin canlı olduğunu bilemezdin. Zincirlerin çoğu bu sırayı izler: önce süz (filter), sonra dönüştür (map), en son indir (reduce).

Dizi zincirlerinde her metot genellikle kendi satırına, başında noktayla yazılır; böylece her halka ayrı okunur. Zincir uzadıkça okunması yine de zorlaşır. Dört beş halkayı geçince ya da bir adımın sonucunu görmek istediğinde, ara adımlara ad ver: const canlilar = takim.filter(...), sonra const altinlari = canlilar.map(...). Hata ayıklarken (Ders 7) ara sonucu console.log ile görmek çok işine yarar.

1const adlar = ["Lux", "Vi", "Zed"]2const etiketler = adlar3    .forEach((ad) => console.log(ad))4    .map((ad) => `${ad} hazır`)

LuxViZedC:\kod\ogren\ders11.js:4    .map((ad) => `${ad} hazır`)    ^ TypeError: Cannot read properties of undefined (reading 'map')    at Object.<anonymous> (C:\kod\ogren\ders11.js:4:5)    ... Node.js v24.20.0

Kendin dene: ölü şampiyonların (canı 0 olanların) adlarını zincirle bul. [ 'Garen', 'Lux' ] çıkmalı.

#Hangi durumda hangisi?

Bir iş için metot seçerken kendine önce şunu sor: sonuç olarak ne istiyorum? Bir dizi mi, tek bir eleman mı, evet/hayır mı, tek bir değer mi? Dizi istiyorsan ikinci soru: eleman sayısı aynı mı kalacak (map) yoksa azalacak mı (filter)?

Tablodaki metotlardan asıl diziyi değiştiren tek metot sort. Bir de şunu aklında tut: find, findIndex, some ve every cevap belli olur olmaz durur, dizinin gerisine bakmaz; map, filter ve reduce ise her elemana mutlaka uğrar.

#Görevler

Görevleri ders11.js dosyasında yap; her görevde eski kodu sil ya da satırların başına // koy. Bu görevlerde for ve while yazmak yasak: hepsini dizi metotlarıyla çöz. Takılırsan ipuçlarını sırayla aç, çözüme en son bak.

[ 150, 70, 30, 105, 80 ][ 40, 0 ][ 120, 40, 0, 75, 50 ]

1const manalar = [120, 40, 0, 75, 50]2const iksirli = manalar.map((mana) => mana + 30)3const azManali = manalar.filter((mana) => mana < 50)4console.log(iksirli)5console.log(azManali)6console.log(manalar)

[ 150, 70, 30, 105, 80 ][ 40, 0 ][ 120, 40, 0, 75, 50 ]

const maclar = [    { sampiyon: "Lux", kill: 3 },    { sampiyon: "Annie", kill: 0 },    { sampiyon: "Garen", kill: 10 },    { sampiyon: "Yasuo", kill: 12 }]

İlk 10+ kill: Garen, 3. maç20+ kill aldığın maç yok

1const maclar = [2    { sampiyon: "Lux", kill: 3 },3    { sampiyon: "Annie", kill: 0 },4    { sampiyon: "Garen", kill: 10 },5    { sampiyon: "Yasuo", kill: 12 }6]7 8function ilkKillMaci(esik) {9    const bulunan = maclar.find((mac) => mac.kill >= esik)10    if (bulunan === undefined) {11        console.log(`${esik}+ kill aldığın maç yok`)12        return13    }14    const sira = maclar.findIndex((mac) => mac.kill >= esik)15    console.log(`İlk ${esik}+ kill: ${bulunan.sampiyon}, ${sira + 1}. maç`)16}17 18ilkKillMaci(10)19ilkKillMaci(20)

İlk 10+ kill: Garen, 3. maç20+ kill aldığın maç yok

const hazirLobi = [    { ad: "Deniz", durum: "kabul" },    { ad: "Ece", durum: "kabul" },    { ad: "Can", durum: "kabul" }]const redLobi = [    { ad: "Deniz", durum: "kabul" },    { ad: "Ece", durum: "red" },    { ad: "Can", durum: "bekliyor" }]const bekleyenLobi = [    { ad: "Deniz", durum: "kabul" },    { ad: "Ece", durum: "bekliyor" },    { ad: "Can", durum: "bekliyor" }]

Maç başlıyorBiri reddetti, kuyruğa dönülüyorBekleniyor: 2 oyuncuLobi boş

1function lobiDurumu(lobi) {2    if (lobi.length === 0) {3        return "Lobi boş"4    } else if (lobi.some((oyuncu) => oyuncu.durum === "red")) {5        return "Biri reddetti, kuyruğa dönülüyor"6    } else if (lobi.every((oyuncu) => oyuncu.durum === "kabul")) {7        return "Maç başlıyor"8    }9    const bekleyenler = lobi.filter((oyuncu) => oyuncu.durum === "bekliyor")10    return `Bekleniyor: ${bekleyenler.length} oyuncu`11}12 13const hazirLobi = [14    { ad: "Deniz", durum: "kabul" },15    { ad: "Ece", durum: "kabul" },16    { ad: "Can", durum: "kabul" }17]18const redLobi = [19    { ad: "Deniz", durum: "kabul" },20    { ad: "Ece", durum: "red" },21    { ad: "Can", durum: "bekliyor" }22]23const bekleyenLobi = [24    { ad: "Deniz", durum: "kabul" },25    { ad: "Ece", durum: "bekliyor" },26    { ad: "Can", durum: "bekliyor" }27]28 29console.log(lobiDurumu(hazirLobi))30console.log(lobiDurumu(redLobi))31console.log(lobiDurumu(bekleyenLobi))32console.log(lobiDurumu([]))

Maç başlıyorBiri reddetti, kuyruğa dönülüyorBekleniyor: 2 oyuncuLobi boş

{ Ahri: 3, Lux: 2, Jinx: 1 }{ Teemo: 1 }{}

1const gecmis = ["Ahri", "Lux", "Ahri", "Jinx", "Ahri", "Lux"]2 3function macSayilari(sampiyonlar) {4    return sampiyonlar.reduce((sayac, isim) => {5        if (sayac[isim] === undefined) {6            sayac[isim] = 07        }8        sayac[isim] = sayac[isim] + 19        return sayac10    }, {})11}12 13console.log(macSayilari(gecmis))14console.log(macSayilari(["Teemo"]))15console.log(macSayilari([]))

{ Ahri: 3, Lux: 2, Jinx: 1 }{ Teemo: 1 }{}

const oyuncular = [    { ad: "Mert", lp: 64 },    { ad: "Ece", lp: 92 },    { ad: "Deniz", lp: 75 },    { ad: "Zeynep", lp: 40 },    { ad: "Çağla", lp: 75 }]const ikiKisi = [    { ad: "Can", lp: 18 },    { ad: "Ali", lp: 33 }]

1. Ece (92 LP)2. Çağla (75 LP)3. Deniz (75 LP)---1. Ali (33 LP)2. Can (18 LP)---Asıl listenin ilki hâlâ: Mert

1const oyuncular = [2    { ad: "Mert", lp: 64 },3    { ad: "Ece", lp: 92 },4    { ad: "Deniz", lp: 75 },5    { ad: "Zeynep", lp: 40 },6    { ad: "Çağla", lp: 75 }7]8const ikiKisi = [9    { ad: "Can", lp: 18 },10    { ad: "Ali", lp: 33 }11]12 13function ilkUc(liste) {14    const sirali = liste.toSorted((a, b) => {15        if (a.lp !== b.lp) {16            return b.lp - a.lp17        }18        return a.ad.localeCompare(b.ad, "tr")19    })20    sirali21        .filter((oyuncu, sira) => sira < 3)22        .forEach((oyuncu, sira) => {23            console.log(`${sira + 1}. ${oyuncu.ad} (${oyuncu.lp} LP)`)24        })25}26 27ilkUc(oyuncular)28console.log("---")29ilkUc(ikiKisi)30console.log("---")31console.log(`Asıl listenin ilki hâlâ: ${oyuncular[0].ad}`)

1. Ece (92 LP)2. Çağla (75 LP)3. Deniz (75 LP)---1. Ali (33 LP)2. Can (18 LP)---Asıl listenin ilki hâlâ: Mert

#Kendini sına

console.log([3, 20, 100].sort())

const seviyeler = [1, 2, 3]const yeni = seviyeler.map((seviye) => { seviye + 1 })console.log(yeni)

const takim = [{ gold: 300 }, { gold: 450 }]const toplam = takim.reduce((birikim, sampiyon) => birikim + sampiyon.gold)console.log(toplam)

const sonuc = [5, 12, 8, 30]    .filter((sayi) => sayi > 6)    .map((sayi) => sayi / 2)console.log(sonuc)

const puanlar = [3, 1, 2]const sirali = puanlar.sort((a, b) => a - b)console.log(puanlar)

#Kayıt noktası

Dersin kodunu Git'e kaydet. VS Code terminalinde, C:\kod\ogren klasöründeyken:

Bir sonraki derste objelerle ve dizilerle daha rahat çalışmanın yollarını öğreneceksin: parçalama (destructuring), yayma (...), kopya ile referans farkı ve JSON; bu dersteki "callback'in içinde elemanı değiştirme" kuralının nedeni de orada.