JavaScript

JavaScript Nedir

JavaScript, web sayfalarını etkileşimli yapan programlama dilidir. HTML içeriği, CSS görünümü tanımlar; bir sayfa sabit bilgi göstermekten fazlasını yapıyorsa (menü açılıyor, form kontrol ediliyor, veri sunucudan geliyorsa) arkasında JavaScript vardır.¹ Aynı dil tarayıcının dışında Node.js ile de çalışır; React projelerindeki geliştirme sunucusu, build araçları ve paketler de JavaScript'tir.

Bu ders dilin tamamını anlatmaz. React'e geçmeden önce bilinmesi gereken temellere kısaca değinir, her konuda derinleşmek için kaynak gösterir.

JavaScript sayfaya <script> etiketiyle eklenir. Modern yöntem type="module" kullanmaktır; modül script'ler HTML işlenene kadar bekler, bu yüzden <head> içine koymak güvenlidir.¹

<script type="module" src="main.js"></script>

Kodu denemenin en kısa yolu tarayıcının DevTools konsoludur: herhangi bir sayfada konsolu açıp console.log("merhaba") yazmak yeterlidir.

Değişkenler ve Tipler

Değişken tanımlamanın üç yolu vardır. var eski ve hataya açık davranışları yüzünden artık kullanılmaz.²

const site = "ViraStack"; // yeniden atanamaz
let sayac = 0; // yeniden atanabilir
sayac = sayac + 1;

MDN'in kuralı kısadır: "Mümkünse const, gerekirse let."² const değişkenin yeniden atanmasını engeller, içindeki object'in değişmesini engellemez.

JavaScript dinamik tipli bir dildir: değişkenin tipi tanımlanmaz, aynı değişkene farklı tipte değerler atanabilir. Temel (primitive) tipler string, number, boolean, null, undefined, bigint ve symbol'dür; geri kalan her şey (array ve fonksiyon dahil) object'tir.³

Dil gerektiğinde tipleri kendiliğinden dönüştürür. Bu yüzden karşılaştırmada === kullanılır; == önce tip dönüştürür ve sonucu tahmin etmek zordur.⁴

0 == "0"; // true
0 === "0"; // false

Fonksiyonlar

Fonksiyon, tekrar kullanılabilen bir kod bloğudur. İki yaygın yazımı vardır: klasik function declaration ve daha kısa arrow function.⁶

function topla(a, b) {
  return a + b;
}

const carp = (a, b = 1) => a * b; // b verilmezse 1 olur

React component'leri ve olay işleyicileri çoğunlukla arrow function ile yazılır.

Closure

Bir fonksiyon, tanımlandığı yerdeki değişkenleri o kapsam bittikten sonra da hatırlar. Buna closure denir.⁶⁷

function sayacOlustur() {
  let sayi = 0;
  return () => ++sayi;
}

const say = sayacOlustur();
say(); // 1
say(); // 2

Closure, React'te hook'ların ve olay işleyicilerinin nasıl çalıştığını anlamanın temelidir; bir component'in içindeki fonksiyon, o render'daki state'i "hatırlar".

Object ve Array

Object anahtar ve değer çiftlerinden, array sıralı değerlerden oluşur. Sunucudan gelen veri neredeyse her zaman bu ikisinin birleşimidir.

const kullanici = { ad: "Ayşe", yas: 28 };
const urunler = [
  { ad: "Kalem", fiyat: 20 },
  { ad: "Defter", fiyat: 45 },
];

Destructuring ve spread

Destructuring, object ya da array'den değerleri tek satırda değişkene çıkarır. Spread (...) ise bir object ya da array'i başka birinin içine açar.⁸⁹

const { ad, yas } = kullanici;
const guncel = { ...kullanici, yas: 29 }; // yeni object, orijinal değişmez
const hepsi = [...urunler, { ad: "Silgi", fiyat: 10 }];

Spread sığ kopya üretir: iç içe object'ler kopyalanmaz, aynı referans paylaşılır.⁹ React'te state'i değiştirmek yerine bu şekilde yeni bir kopya oluşturursunuz.

Array metotları

En sık kullanılan metotlar şunlardır:¹⁰

const isimler = urunler.map((u) => u.ad); // ["Kalem", "Defter"]
const ucuzlar = urunler.filter((u) => u.fiyat < 30);
const toplam = urunler.reduce((t, u) => t + u.fiyat, 0); // 65

Eksik olabilecek değerler için iki kısa operatör vardır: kullanici.adres?.sehir adres yoksa hata vermek yerine undefined döner, deger ?? "varsayılan" ise değer null ya da undefined ise sağdakini kullanır.¹¹

DOM ve Olaylar

Tarayıcı HTML'i okuyup bir ağaç yapısına çevirir; buna DOM (Document Object Model) denir. JavaScript bu ağaca erişip içeriği okuyabilir ve değiştirebilir.¹²

const baslik = document.querySelector("h1");
baslik.textContent = "Yeni başlık";
baslik.classList.add("aktif");

Olaylar (event), sistemde olan ve kodunuzun tepki verebileceği şeylerdir: tıklama, tuşa basma, formun gönderilmesi. Tepki vermek için addEventListener kullanılır.¹³

const form = document.querySelector("form");

form.addEventListener("submit", (e) => {
  e.preventDefault(); // sayfanın yeniden yüklenmesini engeller
  console.log("Form gönderildi");
});

Asenkron Akış

Sunucudan veri çekmek gibi işlemler zaman alır. JavaScript bu süre boyunca beklemek yerine işini sürdürür ve sonuç gelince devam eder. Bu bekleme Promise ile temsil edilir: ileride tamamlanacak ya da başarısız olacak bir işlemin sonucunu taşıyan bir object.¹⁴

Promise ile çalışmanın okunaklı yolu async/await'tir. await, kodu senkron kod gibi yukarıdan aşağıya okunur hale getirir; hatalar try/catch ile yakalanır.¹⁵

async function urunleriGetir() {
  try {
    const yanit = await fetch("/api/urunler");
    if (!yanit.ok) {
      throw new Error(`Hata: ${yanit.status}`);
    }
    const urunler = await yanit.json();
    console.log(urunler);
  } catch (hata) {
    console.error(hata);
  }
}

Event loop

JavaScript tek bir iş parçacığında (thread) çalışır ve her işi bitirmeden bir sonrakine geçmez.¹⁷ Bekleyen işler (zamanlayıcılar, tamamlanan Promise'ler, tıklamalar) bir kuyrukta sıralanır ve event loop onları sırayla çalıştırır. Bu mekanizmayı görsel olarak anlamanın en kısa yolu Lydia Hallie'nin 12 dakikalık videosudur.¹⁸

Modüller

Projeler büyüdükçe kod dosyalara bölünür. Her dosya bir modüldür; dışarıya açmak istediğini export ile verir, başka bir dosyadan ihtiyacını import ile alır.¹⁹

// fiyat.js
export const KDV = 0.2;
export default function kdvEkle(tutar) {
  return tutar * (1 + KDV);
}

// main.js
import kdvEkle, { KDV } from "./fiyat.js";

Süslü parantezli olanlar named export'tur ve istenildiği kadar olabilir. Parantezsiz olan default export'tur ve modül başına bir tanedir.¹⁹ React projelerinde her component bir modüldür ve bu iki yazımı sürekli görürsünüz.

Detaylı Öğrenmek İçin

• Baştan sona rehber: javascript.info; dil ve tarayıcı (DOM, olaylar) bölümleri, güncel tutuluyor.²⁰

• Alıştırmalı kurs: MDN'in Dynamic scripting with JavaScript modülü.²¹

• Ücretsiz kitap: Marijn Haverbeke'nin Eloquent JavaScript kitabının 4. baskısı.²²

• React öncesi kontrol listesi: Kent C. Dodds'un "JavaScript to Know for React" yazısı.¹¹

• Konuşma: Philip Roberts'ın event loop konuşması (JSConf EU 2014, 27 dk).²³

• Konuşma: Jake Archibald'ın tarayıcı event loop'u konuşması (JSConf.Asia 2018, 35 dk).²⁴