Fonksiyonlar derinlemesine

Fonksiyonu Ders 3'te bir tarif olarak tanıdın, Ders 6'da return ile sonuç döndürmesini öğrendin. Bu derste fonksiyonların asıl gücünü görüyorsun: kısa yazılmaları, eksik bilgiyle çağrılmaları, kutulara ve listelere konmaları, başka fonksiyonlara verilmeleri ve kendi hafızalarını taşımaları. Bir sonraki dersin map ve filter'ı, web sayfalarındaki tıklama olayları ve React bu dersin üstüne kurulu.

Bu derste C:\kod\ogren klasöründe yeni bir ders10.js dosyasında çalışıyorsun. Her yeni örnekten önce eski kodu sil ya da satırların başına // koy: aynı adları birkaç kez tanımlayacağız ve aynı adı iki kez const ile açmak Ders 1'deki has already been declared hatasını verir.

#Aynı fonksiyon, üç yazım

Ders 3'ten beri fonksiyonları hep aynı kalıpla yazdın: function, ad, parametreler, gövde. Bu yazımın adı fonksiyon bildirimi (function declaration). JavaScript'te aynı fonksiyonu yazmanın iki yolu daha var ve ikisini de her gün göreceksin: internetteki örneklerde, iş yerindeki kodda, bir sonraki dersin dizi metotlarında ve React'te. Okuyamazsan karşılaştığın kodun yarısı sana yabancı kalır.

#Fonksiyon ifadesi: fonksiyonu kutuya koymak

Önce küçük bir kavram: ifade (expression), çalışınca bir değer üreten kod parçası demek. 40 * 3 bir ifadedir (değeri 120), "Ahri" bir ifadedir, hp > 0 bir ifadedir (değeri true ya da false). if, for ya da let hp = 100 ise ifade değildir; bir değer üretmezler, bir iş yaptırırlar. Bunlara komut (statement) denir.

JavaScript'te fonksiyonun kendisi de bir değerdir. Bu yüzden adı olmayan bir fonksiyonu, tıpkı 100 gibi, = işaretinin sağına yazıp bir kutuya koyabilirsin:

1const hasarHesapla = function (guc, carpan) {2    return guc * carpan3}4 5console.log(hasarHesapla(40, 3))

120

Çağırma biçimi hiç değişmedi: kutunun adı, parantez, argümanlar. Değişen yalnızca tanım: function sözcüğünden sonra ad yok, adı const veriyor. Bu yazıma fonksiyon ifadesi denir, çünkü fonksiyon ='in sağında bir değer olarak duruyor.

#Ok fonksiyonu: =>

Fonksiyon ifadesinin kısa yazımına ok fonksiyonu denir: function sözcüğünü sil, parametre parantezinden sonra => koy. => işareti eşittir ile büyüktürün bitişik yazılmışıdır. Türkçe Q klavyede = için Shift+0'a, > için Ders 2'deki gibi sol Shift'in hemen sağındaki tuşa Shift ile basarsın.

1const hasarHesapla = (guc, carpan) => {2    return guc * carpan3}4 5console.log(hasarHesapla(40, 3))

120

(guc, carpan) => kısmını "guc ile carpan'ı al ve…" diye okuyabilirsin.

#Tek ifadelik gövde: örtük return

Gövdede yalnızca tek bir return satırı varsa daha da kısaltabilirsin: süslü parantezleri ve return sözcüğünü sil, döndürülecek ifadeyi okun hemen sağına yaz.

1const hasarHesapla = (guc, carpan) => guc * carpan2 3console.log(hasarHesapla(40, 3))

120

Okun sağında süslü parantez yoksa JavaScript oradaki ifadenin değerini kendiliğinden döndürür. Buna örtük return (implicit return) denir. Süslü parantezli yazımda ise return'ü sen yazarsın; ona açık return diyeceğiz.

Parametre sayısına göre ok fonksiyonu şöyle yazılır:

Tek parametrede parantezsiz yazım da geçerli ve internette çok görürsün. Bu kursta hep parantez kullanıyoruz: sonradan ikinci bir parametre eklediğinde parantezi unutma derdi kalmıyor. Kodu otomatik düzenleyen Prettier (Ders 53) de varsayılan olarak böyle yazıyor.

#Hangisini ne zaman?

Üç yazım da aynı işi yapar; bu derste karşına çıkacak tek fark, birazdan göreceğin hoisting. Bu kursta şöyle kullanacağız:

Son satırın nedeni ifade ile komut farkı: okun sağına süslü parantezsiz yalnızca bir ifade yazılabilir. if bir komut olduğu için onu tek satırlık ok fonksiyonuna sığdıramazsın; süslü parantez açman gerekir.

1const kritikHasar = (hasar) => {2    hasar * 23}4 5console.log(kritikHasar(50))

undefined

1const ikiKat = (x) => return x * 2

C:\kod\ogren\ders10.js:1const ikiKat = (x) => return x * 2                      ^^^^^^ SyntaxError: Unexpected token 'return'    at wrapSafe (node:internal/modules/cjs/loader:1861:18)    ... Node.js v24.20.0

#Varsayılan parametre

Bir iksir fonksiyonu yazalım. Çoğu iksir 50 can veriyor, bazıları daha az. Önce sorunu gör:

1function iksirIc(hp, iyilesme) {2    return hp + iyilesme3}4 5console.log(iksirIc(100, 30))6console.log(iksirIc(100))

130NaN

İkinci çağrıda iyilesme için argüman vermedin. Ders 3'te gördüğün gibi JavaScript bunu hata saymaz; eksik kalan parametreye undefined koyar. undefined bir sayı olmadığı için 100 + undefined hesabından da Ders 9'dan tanıdığın NaN çıkar. Oyunda bu, canın bir anda "sayı değil" olması demek. Şimdi parametreye bir varsayılan değer ver:

1function iksirIc(hp, iyilesme = 50) {2    return hp + iyilesme3}4 5console.log(iksirIc(100, 30))6console.log(iksirIc(100))

130150

iyilesme = 50 "bu argüman gelmezse 50 kullan" demek. Argüman gelirse (30) varsayılan değer devreye girmez. Aynı yazım ok fonksiyonunda da geçerli: const iksirIc = (hp, iyilesme = 50) => hp + iyilesme.

Şimdi sınırları dene. Aynı dosyada, öncekinin altına yaz:

1console.log(iksirIc(100, 0))2console.log(iksirIc(100, undefined))

100150

Varsayılan değer yalnızca argüman hiç gelmediğinde ya da undefined geldiğinde kullanılır. 0 gerçek bir değerdir: iksir bu sefer hiç can vermediyse sonuç 100 kalır, 150 olmaz.

#Kapsam: kim neyi görür?

Ders 3'te fonksiyonun içinde açılan değişkenin dışarıdan görünmediğini, Ders 5'te de for (let i = 0; …) ile açılan sayacın döngüden sonra kullanılamadığını öğrendin. Kuralın tamamı şu: let ya da const ile açılan bir değişken, açıldığı bloğun içinde yaşar. Kod bloğu oluşturan her süslü parantez çifti kendi kapsamını (scope) açar ve kapsamlar iç içe durur:

• Genel kapsam (global scope): hiçbir bloğun içinde olmayan en dış katman. Burada açılan değişkeni dosyanın her yeri görür.
• Fonksiyon kapsamı: fonksiyonun süslü parantezleri. İçinde açılan değişkenler ve parametreler yalnızca o fonksiyonda yaşar.
• Blok kapsamı: if, else, for, while gibi yapıların süslü parantezleri. İçinde açılan değişken yalnızca o blokta yaşar.

Obje yazarken kullandığın süslü parantezler ({ isim: "Ahri" }) blok değildir; kapsam açmazlar.

1const takimAdi = "Mavi Takım"2 3function saldir(hedef) {4    const hasar = 605    if (hedef === "Garen") {6        const bonus = 207        console.log(`${takimAdi}: ${hedef} hedefine ${hasar + bonus} hasar`)8    }9    console.log(`Temel hasar: ${hasar}`)10}11 12saldir("Garen")

Mavi Takım: Garen hedefine 80 hasarTemel hasar: 60

Kodun 7. satırı üç katmanı birden kullanıyor: bonus kendi bloğundan, hasar ile hedef fonksiyondan, takimAdi en dıştan geliyor. İçeriden dışarıya bakmak serbest. Tersi yasak: fonksiyonun dışından hasar'a, if bloğunun dışından bonus'a ulaşamazsın. saldir adının kendisi ise genel kapsamda duruyor; son satırda fonksiyonu dışarıdan çağırabilmenin sebebi bu.

1const takimAdi = "Mavi Takım"2 3function saldir(hedef) {4    const hasar = 605    if (hedef === "Garen") {6        const bonus = 207        console.log(`${takimAdi}: ${hedef} hedefine ${hasar + bonus} hasar`)8    }9    console.log(bonus)10}11 12saldir("Garen")

Mavi Takım: Garen hedefine 80 hasarC:\kod\ogren\ders10.js:9    console.log(bonus)                ^ ReferenceError: bonus is not defined    at saldir (C:\kod\ogren\ders10.js:9:17)    at Object.<anonymous> (C:\kod\ogren\ders10.js:12:1)    ... Node.js v24.20.0

#Gölgeleme: aynı ad, iki kutu

İç kapsamda, dıştakiyle aynı adı taşıyan yeni bir değişken açarsan ne olur?

1const isim = "Ahri"2 3function tanit() {4    const isim = "Lux"5    console.log(`İçeride: ${isim}`)6}7 8tanit()9console.log(`Dışarıda: ${isim}`)

İçeride: LuxDışarıda: Ahri

Burada iki ayrı kutu var ve ikisinin de etiketi isim. JavaScript bir adı ararken en içten başlar, dışarı doğru bakar ve ilk bulduğu kutuda durur. Fonksiyonun içinde isim arandığında önce fonksiyonun kendi kutusu bulunur; dıştaki "Ahri"ye hiç bakılmaz. İçteki kutu dıştakini gölgede bırakır, bu yüzden buna gölgeleme (shadowing) denir.

Aynı adı ikinci kez const ile açtığın hâlde has already been declared hatası almadın, çünkü ikinci kutu başka bir kapsamda açıldı. O hata yalnızca aynı kapsamda iki kez açınca çıkar.

Gölgeleme kendi başına hata değildir, ama en sık şu kılıkta hataya dönüşür:

1let hp = 1002 3function hasarAl(hp, hasar) {4    hp = hp - hasar5    console.log(`İçeride hp: ${hp}`)6}7 8hasarAl(hp, 30)9console.log(`Dışarıda hp: ${hp}`)

İçeride hp: 70Dışarıda hp: 100

1let hp = 1002 3function hasarAl(mevcutHp, hasar) {4    return mevcutHp - hasar5}6 7hp = hasarAl(hp, 30)8console.log(`Dışarıda hp: ${hp}`)

Dışarıda hp: 70

#Hoisting: tanımdan önce çağırmak

Şu programda fonksiyon, tanımlandığı satırdan önce çağrılıyor. Çalışır mı?

1console.log(hasarHesapla(80))2 3function hasarHesapla(guc) {4    return guc * 25}

160

Çalışıyor. Ders 1'de gördün: Node programı başlatmadan önce dosyanın tamamını okur; yazım hatası bulursa programı hiç başlatmaz. Bu okuma sırasında function ile yazılmış bildirimleri de bulur ve tamamen hazır eder. Program ilk satırdan başladığında hasarHesapla çoktan hazırdır; sanki fonksiyon dosyanın en üstüne taşınmış gibi. Bu davranışa hoisting (yukarı taşıma) denir.

Şimdi dosyaya const ile tanımlanmış bir ok fonksiyonu ekle ve onu da tanımından önce çağır:

1console.log(hasarHesapla(80))2console.log(kritikVurus(80))3 4function hasarHesapla(guc) {5    return guc * 26}7 8const kritikVurus = (guc) => guc * 3

160C:\kod\ogren\ders10.js:2console.log(kritikVurus(80))            ^ ReferenceError: Cannot access 'kritikVurus' before initialization    at Object.<anonymous> (C:\kod\ogren\ders10.js:2:13)    ... Node.js v24.20.0

Neden böyle? Okuma turunda const ve let ile açılan adlar da kayda geçer, ama kutuları kilitli kalır. Kilit, o const satırı çalıştığında açılır. Kilit açılmadan kutuya dokunursan bu hatayı alırsın. Kutunun kilitli olduğu bu aralığa İngilizcede temporal dead zone denir; mülakatlarda sorulan bir kavramdır.

#Fonksiyon bir değerdir

Ders 3'te parantezsiz yazılan fonksiyon adının fonksiyonu çalıştırmadığını, console.log içine yazınca da [Function: durumYaz] çıktığını görmüştün. Orada bunu bir hata olarak ele aldık. Aslında o çıktı, JavaScript'in en güçlü özelliklerinden birinin ucuydu: parantezsiz ad, fonksiyonun kendisidir, yani bir değerdir. Parantez eklemek "şimdi çalıştır" demektir.

1function selamla(isim) {2    return `Merhaba ${isim}`3}4 5console.log(selamla("Lux"))6console.log(selamla)7 8const merhabaDe = selamla9console.log(merhabaDe("Jinx"))

Merhaba Lux[Function: selamla]Merhaba Jinx

console.log(selamla) satırında selamla parantezsiz; fonksiyon çalışmadı, yalnızca ne olduğu yazıldı: [Function: selamla], yani "selamla adında bir fonksiyon". const merhabaDe = selamla satırı da fonksiyonu çalıştırmadan başka bir kutuya koydu. Artık aynı fonksiyonu iki adla çağırabilirsin.

Bir değerle ne yapabiliyorsan fonksiyonla da yapabilirsin: değişkene koymak, diziye koymak, obje alanına koymak, başka bir fonksiyona vermek, bir fonksiyondan döndürmek. Öteki değerlerle aynı haklara sahip oldukları için JavaScript'teki fonksiyonlara "birinci sınıf fonksiyon" (first-class function) denir. Bu bölümde ilk üçünü, sonraki bölümlerde son ikisini göreceksin.

#Diziye koymak: kombo

1const qYetenegi = (hedef) => `${hedef} hedefine Q: 60 hasar`2const wYetenegi = (hedef) => `${hedef} hedefine W: 40 hasar`3const eYetenegi = (hedef) => `${hedef} büyülendi (E)`4 5const kombo = [eYetenegi, qYetenegi, wYetenegi]6 7for (const yetenek of kombo) {8    console.log(yetenek("Garen"))9}

Garen büyülendi (E)Garen hedefine Q: 60 hasarGaren hedefine W: 40 hasar

kombo dizisinde üç fonksiyon var, çağrılmamış hâlleriyle (parantez yok). Döngü her turda birini yetenek kutusuna koyuyor ve yetenek("Garen") ile çağırıyor. Kombonun sırasını değiştirmek için fonksiyonlara dokunmana gerek yok; diziyi değiştirmen yeter: [qYetenegi, eYetenegi].

#Obje alanına koymak: tuş atama

1const yetenekler = {2    q: (hedef) => `${hedef} hedefine Q: 60 hasar`,3    w: (hedef) => `${hedef} hedefine W: 40 hasar`,4    e: (hedef) => `${hedef} büyülendi (E)`5}6 7console.log(yetenekler.q("Garen"))8 9const basilanTus = "e"10console.log(yetenekler[basilanTus]("Yasuo"))

Garen hedefine Q: 60 hasarYasuo büyülendi (E)

yetenekler.q bir fonksiyon, yetenekler.q("Garen") onu çağırmak. Ders 4'teki köşeli parantezle okuma burada çok işe yarıyor: basılan tuş bir değişkende dursa bile doğru yeteneği bulup çağırabiliyorsun.

#Callback: fonksiyonu fonksiyona vermek

Ders 5'ten beri takımı hep aynı kalıpla geziyorsun: for (const sampiyon of takim) { … }. Değişen yalnızca süslü parantezin içi: bir seferinde adları yazdırıyorsun, bir seferinde ölüleri buluyorsun, bir seferinde canları topluyorsun. Döngüyü bir kez yazıp "her şampiyonda ne yapılacağını" dışarıdan alabilir miyiz? Fonksiyon bir değer olduğu için evet.

#Kendi döngü yardımcın

1function herSampiyonIcin(takim, islem) {2    for (const sampiyon of takim) {3        islem(sampiyon)4    }5}6 7const takim = [8    { isim: "Ahri", hp: 100 },9    { isim: "Garen", hp: 0 },10    { isim: "Jinx", hp: 45 }11]12 13const isminiYaz = (sampiyon) => {14    console.log(sampiyon.isim)15}16 17herSampiyonIcin(takim, isminiYaz)

AhriGarenJinx

herSampiyonIcin iki şey alıyor: bir dizi ve bir fonksiyon. Diziyi gezmeyi biliyor ama her elemanla ne yapacağını bilmiyor; bunu ikinci parametresinden, islem'den öğreniyor. 3. satırdaki islem(sampiyon), senin verdiğin fonksiyonu o anki şampiyonla çağırıyor. Başka bir fonksiyona verilen ve onun tarafından uygun anda "geri çağrılan" böyle fonksiyonlara geri çağırma fonksiyonu (callback) denir.

Son satıra dikkat: isminiYaz parantezsiz. Fonksiyonu veriyoruz, çağırmıyoruz. Çağırma işini herSampiyonIcin kendisi yapacak: doğru anda ve doğru şampiyonla.

#Callback'i yerinde yazmak

Callback'e ayrı bir ad vermek zorunda değilsin; ok fonksiyonunu doğrudan argümanın yerine yazabilirsin. Ok fonksiyonlarının en çok kullanıldığı yer burasıdır. Aynı dosyada, öncekinin altına yaz:

1herSampiyonIcin(takim, (sampiyon) => {2    if (sampiyon.hp === 0) {3        console.log(`${sampiyon.isim} ölü, yeniden doğmayı bekliyor`)4    }5})6 7let toplamHp = 08herSampiyonIcin(takim, (sampiyon) => {9    toplamHp = toplamHp + sampiyon.hp10})11console.log(`Takımın toplam canı: ${toplamHp}`)

Garen ölü, yeniden doğmayı bekliyorTakımın toplam canı: 145

Döngüyü bir kez yazdın, onu iki farklı iş için kullandın. İkinci callback dışarıdaki toplamHp'yi görebiliyor ve değiştirebiliyor; içeriden dışarıya bakmak serbestti. Bir sonraki dersteki map, filter ve find tam olarak böyle çalışır: döngüyü JavaScript yazar, sen yalnızca callback'i verirsin.

1function herSampiyonIcin(takim, islem) {2    for (const sampiyon of takim) {3        islem(sampiyon)4    }5}6 7const takim = [8    { isim: "Ahri", hp: 100 },9    { isim: "Garen", hp: 0 }10]11 12herSampiyonIcin(takim)

C:\kod\ogren\ders10.js:3        islem(sampiyon)        ^ TypeError: islem is not a function    at herSampiyonIcin (C:\kod\ogren\ders10.js:3:9)    at Object.<anonymous> (C:\kod\ogren\ders10.js:12:1)    ... Node.js v24.20.0

#setTimeout: "şu kadar sonra çağır"

Callback'in ikinci büyük kullanım alanı beklemek. Node'da hazır gelen setTimeout fonksiyonu iki şey alır: bir fonksiyon ve milisaniye cinsinden bir süre (1000 milisaniye = 1 saniye). Süre dolunca verdiğin fonksiyonu çağırır.

1console.log("Maç başladı")2 3setTimeout(() => {4    console.log("Baron Nashor doğdu!")5}, 2000)6 7console.log("Minyonlar yürüyor")

PS C:\kod\ogren> node ders10.jsMaç başladıMinyonlar yürüyorBaron Nashor doğdu!

Sıraya bak: setTimeout satırı "Minyonlar yürüyor"dan önce yazılmış ama Baron en son geliyor. setTimeout beklemez: zamanlayıcıyı kurar ve hemen sonraki satıra geçer. İki saniye dolunca Node verdiğin fonksiyonu çağırır. Bunun arka planda nasıl işlediğini (olay döngüsü) Ders 15'te göreceksin. Şimdilik kuralı bil: setTimeout'a verdiğin fonksiyon sonra çalışır, program o arada yoluna devam eder.

setTimeout'a da fonksiyonu verirsin, çağırmazsın:

setTimeout(yaz(), 1000)

setTimeout(yaz, 1000)

1const yaz = () => console.log("Baron doğdu!")2setTimeout(yaz(), 1000)

Baron doğdu!node:internal/errors:543      throw error;      ^ TypeError [ERR_INVALID_ARG_TYPE]: The "callback" argument must be of type function. Received undefined    at setTimeout (node:timers:124:3)    at Object.<anonymous> (C:\kod\ogren\ders10.js:2:1)    ...    at node:internal/main/run_main_module:33:47 {  code: 'ERR_INVALID_ARG_TYPE'} Node.js v24.20.0

#Closure: hafızası olan fonksiyon

Bir maç boyunca kill saymak istiyorsun. İlk akla gelen, genel kapsamda bir değişken:

let killSayisi = 0 function killAldi() {    killSayisi++    return killSayisi}

Çalışır ama iki sorunu var. Birincisi, dosyanın her yeri bu kutuyu görür ve değiştirebilir: biri yanlışlıkla killSayisi = 0 yazarsa sayı sessizce sıfırlanır. İkincisi, asist de saymak istersen bütün kodu kopyalaman gerekir. İstediğin şey, kendi sayısını kendisi tutan ve başka kimsenin dokunamadığı bir fonksiyon. Bunun yolu, fonksiyon döndüren bir fonksiyon yazmak.

#Fonksiyon döndüren fonksiyon

Fonksiyon bir değer olduğuna göre return ile döndürülebilir:

1function hasarciOlustur(carpan) {2    return (guc) => guc * carpan3}4 5const kritik = hasarciOlustur(2)6const ulti = hasarciOlustur(3)7 8console.log(kritik(50))9console.log(ulti(50))

100150

hasarciOlustur(2) bir sayı değil, bir fonksiyon döndürüyor: (guc) => guc * carpan. Onu kritik kutusuna koyduk. 8. satırda kritik(50) çağrıldığında hasarciOlustur çoktan işini bitirmişti; kapsam kuralına göre carpan parametresinin de onunla birlikte yok olması gerekirdi. Ama kritik, carpan'ın 2 olduğunu hâlâ hatırlıyor. ulti ise 3 olduğunu hatırlıyor.

Bunun nedeni şu: bir fonksiyon oluşturulduğunda, çevresinde gördüğü ve kullandığı değişkenleri bir sırt çantasına koyup yanında taşır. kritik'in çantasında carpan: 2, ulti'ninkinde carpan: 3 var. Bir fonksiyonun, oluşturulduğu yerdeki değişkenleri böyle yanında taşımasına kapanış (closure) denir.

#Sayaç: çantadaki değer değişebilir

Çantadaki değer yalnızca okunmaz, değiştirilebilir de. Kill sayacını şimdi böyle yazalım:

1function sayacOlustur() {2    let sayi = 03    return () => {4        sayi++5        return sayi6    }7}8 9const killSayaci = sayacOlustur()10console.log(killSayaci())11console.log(killSayaci())12console.log(killSayaci())13 14const asistSayaci = sayacOlustur()15console.log(asistSayaci())16console.log(killSayaci())

12314

sayacOlustur'u bir fabrika gibi düşün: her çağrıldığında yeni bir sayaç fonksiyonu üretip verir. Adım adım:

1. sayacOlustur() çağrılınca içinde sayi adlı bir kutu açılır (değeri 0) ve bir ok fonksiyonu oluşturulup döndürülür. Ok fonksiyonu sayi'yı kullandığı için kutuyu çantasına koyar.
2. killSayaci artık o ok fonksiyonu. Her çağrıda çantasındaki sayi'yı bir artırıp döndürüyor: 1, 2, 3.
3. asistSayaci = sayacOlustur() fabrikayı yeniden çalıştırır: yeni bir sayi kutusu (0), yeni bir fonksiyon, yeni bir çanta. Bu yüzden asist sayacı 1'den başlıyor, kill sayacı ise 4'ten devam ediyor.

Dışarıdan sayi'ya ulaşmanın yolu yok: console.log(sayi) yazarsan ReferenceError: sayi is not defined alırsın. Sayıyı değiştirmenin tek yolu killSayaci() çağırmak. Genel değişkenli çözümün iki sorunu da çözüldü: sayı korunuyor ve istediğin kadar bağımsız sayaç üretebiliyorsun.

1function sayacOlustur() {2    let sayi = 03    return () => {4        sayi++5        return sayi6    }7}8 9const killSayaci = sayacOlustur10console.log(killSayaci())11console.log(killSayaci())

[Function (anonymous)][Function (anonymous)]

#Yetenek bekleme süresi (cooldown)

Closure'ın oyundaki en doğal örneği bekleme süresi. Ahri'nin Q'su kullanıldıktan sonra 7 saniye bekler; bu sürede yeniden basarsan "hazır değil" der. Her yeteneğin kendi bekleme süresi ve "ne zaman hazır olacağı" bilgisi var; bunları yeteneğin kendi çantasına koyalım. Zamanı programa biz söyleyeceğiz: fonksiyona maçın kaçıncı saniyesinde olduğumuzu argüman olarak veriyoruz.

1function yetenekOlustur(ad, beklemeSuresi) {2    let hazirOlacagiAn = 03    return (saniye) => {4        if (saniye < hazirOlacagiAn) {5            return `${saniye}. sn: ${ad} bekliyor, ${hazirOlacagiAn - saniye} sn kaldı`6        }7        hazirOlacagiAn = saniye + beklemeSuresi8        return `${saniye}. sn: ${ad} kullanıldı`9    }10}11 12const ahriQ = yetenekOlustur("Ahri Q", 7)13const flash = yetenekOlustur("Flash", 300)14 15console.log(ahriQ(0))16console.log(flash(2))17console.log(ahriQ(3))18console.log(ahriQ(7))19console.log(flash(10))20console.log(ahriQ(9))

0. sn: Ahri Q kullanıldı2. sn: Flash kullanıldı3. sn: Ahri Q bekliyor, 4 sn kaldı7. sn: Ahri Q kullanıldı10. sn: Flash bekliyor, 292 sn kaldı9. sn: Ahri Q bekliyor, 5 sn kaldı

yetenekOlustur her çağrıldığında yeni bir çanta hazırlıyor. İçinde üç şey var: parametreler ad ve beklemeSuresi (parametreler de çantaya girer) ve hazirOlacagiAn. Yetenek kullanılınca hazirOlacagiAn, "şimdi + bekleme süresi" olarak güncelleniyor; bir sonraki çağrı bu değere bakıp karar veriyor. ahriQ ile flash'ın çantaları ayrı: Q'yu kullanmak Flash'ın bekleme süresini etkilemiyor.

Sınırlara bak: Q, 7. saniyede tam hazır oluyor (7 < 7 yanlış olduğu için kullanılıyor); 3. saniyede ise 4 saniye kaldığını söylüyor. Saniyeyi argüman olarak vermek, programı denemeyi de kolaylaştırıyor: gerçek saati beklemeden her durumu deneyebiliyorsun.

#Saf fonksiyon ve yan etki

Şu iki fonksiyon aynı işi yapıyor gibi görünüyor:

1let toplamDeneyim = 02 3function deneyimKazan(miktar) {4    toplamDeneyim = toplamDeneyim + miktar5    console.log(`Deneyim: ${toplamDeneyim}`)6}7 8deneyimKazan(50)9deneyimKazan(50)10 11const deneyimEkle = (deneyim, miktar) => deneyim + miktar12 13console.log(deneyimEkle(0, 50))14console.log(deneyimEkle(0, 50))

Deneyim: 50Deneyim: 1005050

deneyimKazan(50) iki kez aynı argümanla çağrıldı ama iki farklı şey yazdı: 50 ve 100. Sonucu yalnızca girdisine değil, dışarıdaki bir kutunun o anki hâline de bağlı. Üstelik o kutuyu değiştiriyor ve ekrana yazıyor. deneyimEkle(0, 50) ise kaç kez çağırırsan çağır 50 döndürüyor ve dünyada hiçbir şeyi değiştirmiyor.

İkinci türe saf fonksiyon (pure function) denir. İki şartı var: aynı girdilere her zaman aynı sonucu verir ve dışarıda hiçbir şeyi değiştirmez. Bir fonksiyonun sonuç döndürmek dışında dünyada bıraktığı her ize de yan etki (side effect) denir.

Yan etki kötü bir şey değil: ekrana hiç yazmayan, hiçbir şeyi değiştirmeyen bir program kimsenin işine yaramaz. Önemli olan yan etkileri bir yerde toplamak: hesapları saf fonksiyonlara ver, değiştirme ve yazdırma işini az sayıda, belli yerlerde yap. Bunun üç kazancı var:

• Denemek kolay: saf fonksiyona girdiyi ver, çıktıya bak; başka hiçbir şeyi hazırlaman gerekmez. Ders 53'te test yazarken bunu çok seveceksin.
• Hata aramak kolay: sonuç yanlışsa sorun ya girdide ya fonksiyonun içindedir; dosyanın geri kalanında suçlu aramazsın.
• İleride şart: React (Ders 40) bileşenlerinin saf fonksiyon gibi davranmasını bekler.

#Görevler

Her görevi ders10.js dosyasında yap; önceki kodu sil ya da yoruma al. Önce kendin dene, takılırsan ipuçlarını sırayla aç; çözüme en son bak. Her çözümden sonra sınır değerlerini de dene.

1function manaYeter(mana, maliyet) {2    return mana >= maliyet3}4 5function seviyeMetni(seviye) {6    return `Seviye ${seviye}`7}8 9function koridorAdi(no) {10    if (no === 1) {11        return "üst koridor"12    } else if (no === 2) {13        return "orta koridor"14    }15    return "alt koridor"16}17 18console.log(manaYeter(80, 50))19console.log(manaYeter(50, 50))20console.log(seviyeMetni(6))21console.log(koridorAdi(2))22console.log(koridorAdi(3))

truetrueSeviye 6orta koridoralt koridor

1const manaYeter = (mana, maliyet) => mana >= maliyet2 3const seviyeMetni = (seviye) => `Seviye ${seviye}`4 5const koridorAdi = (no) => {6    if (no === 1) {7        return "üst koridor"8    } else if (no === 2) {9        return "orta koridor"10    }11    return "alt koridor"12}13 14console.log(manaYeter(80, 50))15console.log(manaYeter(50, 50))16console.log(seviyeMetni(6))17console.log(koridorAdi(2))18console.log(koridorAdi(3))19 20// sınır denemesi: bir eksik mana21console.log(manaYeter(49, 50))

truetrueSeviye 6orta koridoralt koridorfalse

1console.log(kalkanVer(80))2 3const kalkanVer = (hp, kalkan = 40) => hp + kalkan4 5function kuleyeVur(kuleHp, hasar) {6    if (hasar > 0) {7        const kalanHp = kuleHp - hasar8    }9    return kalanHp10}11 12console.log(kuleyeVur(1000, 150))13setTimeout(console.log("Ejderha doğdu"), 1000)

C:\kod\ogren\ders10.js:1console.log(kalkanVer(80))            ^ ReferenceError: Cannot access 'kalkanVer' before initialization    at Object.<anonymous> (C:\kod\ogren\ders10.js:1:13)    ... Node.js v24.20.0

1const kalkanVer = (hp, kalkan = 40) => hp + kalkan2 3console.log(kalkanVer(80))4 5function kuleyeVur(kuleHp, hasar) {6    let kalanHp = kuleHp7    if (hasar > 0) {8        kalanHp = kuleHp - hasar9    }10    return kalanHp11}12 13console.log(kuleyeVur(1000, 150))14setTimeout(() => console.log("Ejderha doğdu"), 1000)15 16console.log(kuleyeVur(1000, 0))17console.log(kalkanVer(80, 0))

120850100080Ejderha doğdu

1let altin = 5002 3function satinAl(fiyat, adet) {4    altin = altin - fiyat * adet5    console.log(`Kalan altın: ${altin}`)6}7 8satinAl(150, 2)9satinAl(50)

Kalan altın: 200Kalan altın: NaN

let altin = 500altin = kalanAltin(altin, 150, 2)console.log(`Kalan altın: ${altin}`)altin = kalanAltin(altin, 50)console.log(`Kalan altın: ${altin}`)altin = kalanAltin(altin, 400)console.log(`Kalan altın: ${altin}`)

Kalan altın: 200Kalan altın: 150Kalan altın: 150

1const kalanAltin = (altin, fiyat, adet = 1) => {2    const toplamFiyat = fiyat * adet3    if (toplamFiyat > altin) {4        return altin5    }6    return altin - toplamFiyat7}8 9let altin = 50010altin = kalanAltin(altin, 150, 2)11console.log(`Kalan altın: ${altin}`)12altin = kalanAltin(altin, 50)13console.log(`Kalan altın: ${altin}`)14altin = kalanAltin(altin, 400)15console.log(`Kalan altın: ${altin}`)16 17console.log(kalanAltin(150, 150))18console.log(kalanAltin(150, 151))19console.log(kalanAltin(150, 50, 0))

Kalan altın: 200Kalan altın: 150Kalan altın: 1500150150

const komutlar = {    yenile: (altin) => altin - 2,    xp: (altin) => altin - 4,    kilitle: (altin) => altin}

console.log(komutCalistir("yenile", 10))console.log(komutCalistir(" XP ", 10))console.log(komutCalistir("xp", 4))console.log(komutCalistir("xp", 3))console.log(komutCalistir("kilitle", 0))console.log(komutCalistir("sat", 10))

Kalan altın: 8Kalan altın: 6Kalan altın: 0Yetersiz altınKalan altın: 0Bilinmeyen komut: sat

1const komutlar = {2    yenile: (altin) => altin - 2,3    xp: (altin) => altin - 4,4    kilitle: (altin) => altin5}6 7function komutCalistir(komut, altin) {8    const ad = komut.trim().toLowerCase()9    const islem = komutlar[ad]10    if (islem === undefined) {11        return `Bilinmeyen komut: ${ad}`12    }13    const yeniAltin = islem(altin)14    if (yeniAltin < 0) {15        return "Yetersiz altın"16    }17    return `Kalan altın: ${yeniAltin}`18}19 20console.log(komutCalistir("yenile", 10))21console.log(komutCalistir(" XP ", 10))22console.log(komutCalistir("xp", 4))23console.log(komutCalistir("xp", 3))24console.log(komutCalistir("kilitle", 0))25console.log(komutCalistir("sat", 10))

Kalan altın: 8Kalan altın: 6Kalan altın: 0Yetersiz altınKalan altın: 0Bilinmeyen komut: sat

const tahta = [    { isim: "Jinx", yildiz: 2, maliyet: 4 },    { isim: "Vi", yildiz: 1, maliyet: 1 },    { isim: "Ekko", yildiz: 3, maliyet: 2 },    { isim: "Lux", yildiz: 2, maliyet: 3 }]

1function kacTane(dizi, kosul) {2    let sayi = 03    for (const oge of dizi) {4        if (kosul(oge)) {5            sayi++6        }7    }8    return sayi9}10 11const tahta = [12    { isim: "Jinx", yildiz: 2, maliyet: 4 },13    { isim: "Vi", yildiz: 1, maliyet: 1 },14    { isim: "Ekko", yildiz: 3, maliyet: 2 },15    { isim: "Lux", yildiz: 2, maliyet: 3 }16]17 18console.log(kacTane(tahta, (birim) => birim.yildiz >= 2))19console.log(kacTane(tahta, (birim) => birim.maliyet === 4))20console.log(kacTane(tahta, (birim) => birim.yildiz === 2 && birim.maliyet >= 3))21console.log(kacTane([], (birim) => birim.yildiz >= 2))22console.log(kacTane(tahta, (birim) => birim.maliyet > 5))

31200

const benimSerim = seriTakipcisi()console.log(benimSerim("G"))console.log(benimSerim("G"))console.log(benimSerim("G"))console.log(benimSerim("G"))console.log(benimSerim("G"))console.log(benimSerim("M"))console.log(benimSerim("G")) const rakipSerisi = seriTakipcisi()console.log(rakipSerisi("G"))

Seri: 1 (en iyi: 1), bonus: 0 altınSeri: 2 (en iyi: 2), bonus: 1 altınSeri: 3 (en iyi: 3), bonus: 1 altınSeri: 4 (en iyi: 4), bonus: 2 altınSeri: 5 (en iyi: 5), bonus: 3 altınSeri bozuldu (en iyi: 5), bonus: 0 altınSeri: 1 (en iyi: 5), bonus: 0 altınSeri: 1 (en iyi: 1), bonus: 0 altın

1function seriTakipcisi() {2    let seri = 03    let enIyi = 04    return (sonuc) => {5        if (sonuc === "M") {6            seri = 07            return `Seri bozuldu (en iyi: ${enIyi}), bonus: 0 altın`8        }9        seri++10        if (seri > enIyi) {11            enIyi = seri12        }13        let bonus = 014        if (seri >= 5) {15            bonus = 316        } else if (seri === 4) {17            bonus = 218        } else if (seri >= 2) {19            bonus = 120        }21        return `Seri: ${seri} (en iyi: ${enIyi}), bonus: ${bonus} altın`22    }23}24 25const benimSerim = seriTakipcisi()26console.log(benimSerim("G"))27console.log(benimSerim("G"))28console.log(benimSerim("G"))29console.log(benimSerim("G"))30console.log(benimSerim("G"))31console.log(benimSerim("M"))32console.log(benimSerim("G"))33 34const rakipSerisi = seriTakipcisi()35console.log(rakipSerisi("G"))

Seri: 1 (en iyi: 1), bonus: 0 altınSeri: 2 (en iyi: 2), bonus: 1 altınSeri: 3 (en iyi: 3), bonus: 1 altınSeri: 4 (en iyi: 4), bonus: 2 altınSeri: 5 (en iyi: 5), bonus: 3 altınSeri bozuldu (en iyi: 5), bonus: 0 altınSeri: 1 (en iyi: 5), bonus: 0 altınSeri: 1 (en iyi: 1), bonus: 0 altın

#Kendini sına

const ikiKat = (x) => x * 2const ucKat = (x) => {    x * 3}console.log(ikiKat(5))console.log(ucKat(5))

console.log(selam("Lux")) const selam = function (isim) {    return `Merhaba ${isim}`}

const seviye = 1 function seviyeAtla() {    const seviye = 2    if (seviye > 1) {        const seviye = 3        console.log(seviye)    }    console.log(seviye)} seviyeAtla()console.log(seviye)

function cantaOlustur() {    let esya = 0    return () => {        esya = esya + 1        return esya    }} const a = cantaOlustur()const b = cantaOlustur()a()a()console.log(a(), b())

console.log("A")setTimeout(() => console.log("B"), 0)console.log("C")

const kdaHesapla = (k, d, a) => (k + a) / d const yazdir = (mesaj) => console.log(mesaj) function hasarVer(sampiyon) {    sampiyon.hp = sampiyon.hp - 10} const zarAt = () => Math.floor(Math.random() * 6) + 1

setTimeout(uyar(), 3000)

#Kayıt noktası

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

Bir sonraki derste callback'lerin en çok kullanıldığı yere geçiyorsun: map, filter, find ve reduce gibi dizi metotlarıyla, döngü yazmadan veriyi dönüştüreceksin.