JS Temelleri

Konu Anlatımı

JavaScript Temelleri

JavaScript, tarayıcıda çalışan ve sayfaya davrandırma kazandıran dil bilgisidir; HTML CSS ile duran, JavaScript ile hareket eden sayfayı mümkün kılar. 9. sınıftaki değişken ve döngü bilgisinin üzerine bu konu üç ileri başlık ekler: kapsamı doğru kurulan değişkenler ve fonksiyonlar, veriyi dönüştüren dizi metodları ile bekleyen işleri (istek, zamanlayıcı) yöneten asenkron yapı. Kodun okunabilirliği burada kazanılır; çünkü fonksiyonlar ve modüller paylaşımın temelidir.

1. Değişkenler, Türler ve Fonksiyonlar

Değişken bildirimi let ve const ile yapılır: let yeniden değer alabilir, const bağlandıktan sonra değiştirilemez (dizi ve nesnenin içi güncellenebilir, referans sabit kalır). Her ikisi de blok kapsamındadır; süslü parantez içinde tanımlanan değişken dışarıda görünmez. Temel türler sayı, metin, doğru-yanlış, null, undefined ve nesne'dir; typeof ile sorulur. Ok fonksiyonu kısa sözdizimi sunar ve this bağlamını çevreleyen kapsama devreder. Aşağıdaki örnek, fonksiyonu parametre, dönüş değeri ve şablon metniyle birlikte gösterir.

const topla = (a, b) => a + b; biçimindeki tek satırlık gövdede return yazmak gerekmez; gövde süslü parantezliyse return zorunludur. Metin birleştirme yerine şablon metni kullanılır: `${ad} hoş geldin`.

2. Dizi ve Nesne Metotları

Veri kümeleri üzerinde döngü yazmak yerine metot zinciri kurulur. Bu dört metot 11. sınıf düzeyinde ezber değil, anlamıyla bilinmelidir:

Nesnelerde alan okuması nesne.anahtar ya da köşeli parantezle olur; destructure ile alanlar tek satırda açılır, spread (...) ile dizi veya nesne kopyalanıp birleştirilir. JSON.stringify ve JSON.parse çifti, nesneyi metne çevirmede kullanılır.

3. Asenkron Programlama: Promise ve async-await

Tarayıcı tek iş parçacığında çalışır; uzun süren istek arayüzü kilitlememelidir. Bir işin sonucu hemen verilemiyorsa bir Promise döner ve bu nesnenin üç durumu vardır: bekliyor, çözüldü, reddedildi. Çözülme durumunda then, reddedilmede catch çalışır. async ile yazılan fonksiyon hep Promise döndürür, gövdede await yazılan iş bitene kadar akışı orada durdurur ve sonucu değere yazar. Hata yönetimi try-catch ile aynı yapıda kurulur: finally bloğu hata olsun ya da olmasın çalışır (yüzücüyü gizleme, yükleniyor durumunu temizleme).

Zamanlayıcılar da asenkron akışın parçasıdır: setTimeout işi kuyruğa atar, senkron kod bittikten sonra çalışır. Bu yüzden üst üste iki zamanlayıcının sırası, çağrı sırasıyla değil gecikme değeriyle belirlenir.

4. Modüller ve Hata Türleri

Uygulama büyüdükçe dosyalar bölünür: bir dosya işlevini export ile açar, kullanan dosya import ile alır. Böylece aynı işlev iki yerde kopyalanmaz, değişiklik tek noktadan yapılır. Yaygın hata türleri şunlardır: tip uyuşmazlığı kaynaklı TypeError, tanımsız değere erişimde ReferenceError ve ağ/çözümleme kaynaklı çalışma zamanı hatası. Hata yakalanırken kullanıcının anlayacağı Türkçe mesaj verilir, ham yığın izi gösterilmez.

5. Sınav Odaklı Özet

Sınavda en çok üç şey sorulur: map ve filter'ın dönüş değeri (ikisi de yeni dizi döner, forEach döndürmez), Promise durumları ve async-await'in hatayı try-catch ile yakalaması. Döngü ile metot karşılaştırmasında uzunluk azalıyorsa filter, tek sayısal sonuç aranıyorsa reduce düşünülür. const'un nesneyi kilitlediği ama içeriğini kilitlemediiği de klasik bir ayrım sorusudur.

Ne Öğreneceğiz

Değişkenler, ok fonksiyonlar, dizi metodları, modüller ve asenkron programlama temelleri. Bu konuda ögrenme çıktıları:

• let ve const ile blok kapsamını, temel türleri ve ok fonksiyonlarını açıklar.
• Dizi ve nesne metodlarıyla veri dönüştürme işlemleri (map, filter, reduce) uygular.
• Promise ve async-await ile asenkron akışı ve hata yönetimini kurar.
• Modüller arası export-import ilişkisini kod bölme açısından değerlendirir.
• try-catch ile hata türlerini ayırt edip kullanıcıya anlamlı geri bildirim verir.

Ön Bilgi

Bu konuya başlamadan önce temel kavram ve ön koşulları kavramanız yardımcı olacaktır. Konunun çerçevesinde şu kavramlar dikkat ister:

• const bağlamadan sonra atama hatası verir; dizi ve nesnenin içi yine güncellenebilir.
• forEach bir değer döndürmez; sonuç gerekiyorsa map veya reduce kullanılır.
• await yalnız async fonksiyonun içinde yazılabilir.
• Reddedilen Promise yakalanmazsa kullanıcıya yansımayan sessiz hata oluşur.
• Kodun tekrarını önleyen birim export-import ile modüllere bölünür.
• Kullanıcıya gösterilen hata metni güvenli ve açıklayıcı olmalıdır.

Basit Örnek ve Günlük Yaşam

Günlük yaşamda ve mesleki bağlamda bir uygulama:

Soru: Bir puan tablosunda iki puanın toplamını ve yüzde dönüşümünü veren işlevler yazılacaktır. Sözdizimi nasıl kurulur?

1. Adım 1: Toplama işlevi tek satırda ok fonksiyonu olarak yazılır: (a, b) => a + b.
2. Adım 2: Yüzde işlevine varsayılan parametre eklenir: (puan, toplam = 100) => puan / toplam * 100.
3. Adım 3: Değerler const ile bağlanır, sonuç şablon metniyle yazdırılır.
4. Adım 4: Eksik ikinci argümanın 100 varsayımıyla çalıştığı denenir.

Sonuç/cevap: İşlevler çağrıldığında toplam ve yüzde hesaplanır; parametre verilmezse toplam 100 kabul edilir.

Adım Adım Çözülmüş Örnek

Örnek 1: Ok Fonksiyonu ve Varsayılan Parametre konusunun adımları:

1. Adım 1: Toplama işlevi tek satırda ok fonksiyonu olarak yazılır: (a, b) => a + b.
2. Adım 2: Yüzde işlevine varsayılan parametre eklenir: (puan, toplam = 100) => puan / toplam * 100.
3. Adım 3: Değerler const ile bağlanır, sonuç şablon metniyle yazdırılır.
4. Adım 4: Eksik ikinci argümanın 100 varsayımıyla çalıştığı denenir.

Karşılaştırma Tablosu

Sık Yapılan Hatalar

forEach ile sonuç beklemek: Bu metot undefined döndürür; diziye değer atamak yerine map veya reduce kullanılmalıdır.

await satırını normal fonksiyonda yazmak: await yalnızca async fonksiyon içinde geçerlidir, aksi hâlde sözdizimi hatası oluşur.

Reddedilen Promise'i yakalamamak: catch yoksa hata konsola düşer, kullanıcı hata mesajını hiç görmez.

const ile nesne içeriğini de sanmak: const referansı bağlar; nesne alanlarını değiştirmek hataya yol açmaz.

Hata durumunda sayfayı dondurmak: Kullanıcıya ham hata yığını göstermek yerine açıklayıcı mesaj verilir.

Kendini Dene

Soru: Yönerge: Bir sınav notu dizisini işlemek için kısa bir JavaScript bloğu yaz. Diziden 60 ve üzeri notları filter ile seç, seçilen notların ortalamasını reduce ile hesapla, sonucu şablon metniyle ekrana yaz ve tüm işlemleri try-catch içinde koruyarak hatayı üç bölümlü (ne oldu, neden, ne yapılmalı) bir mesajla göster. Ardından filter, map ve reduce'nin ne zaman kullanılacağını birer cümleyle karşılaştır.

Örnek cevap: Puanlama anahtarı: filter ile 60 ve üzeri elemanların seçildiğinin yazılması 3 puan; reduce ile ortalamanın toplam / uzunluk biçiminde hesaplandığının yazılması 4 puan; şablon metninde dolar aksanı ile ifade gömme kullanımının 3 puan; try bloğu ile catch ve finally kullanımının yazılması 3 puan; hata mesajının üç bölümünün yazılması 3 puan; filter-map-reduce karşılaştırmasının (koşul, dönüşüm, tek değer) 4 puan. Toplam 20 puan. Model cevap: filter geçerli notları, reduce ortalamayı üretir, şablon metni sonucu yazar; hata yakalanıp anlaşılır mesajla kullanıcıya bildirilir.