JavaScript Nedir? Tarayıcıda Nasıl Çalışır, ECMAScript ve İlk Satırın

Sürüm notu: Bu yazıdaki kodlar ES2026 ve güncel tarayıcılar (Chrome, Edge, Firefox, Safari) içindir.

Önce Tahmin Et

Daha hiçbir şey anlatmadan küçük bir soruyla başlayalım. Aşağıdaki iki satır konsola ne yazdırır?

console.log(2 + 2);
console.log("2" + 2);

Okumaya devam etmeden önce bir tahmin yap ve aklının bir köşesine yaz. Cevabı yazının ortasında, kendi tarayıcında birlikte çalıştırırken göreceğiz. Bu seri boyunca bu alışkanlığı sık sık kullanacağız: önce tahmin, sonra deneme, en son açıklama. Tahminin tuttuğunda bilgin pekişir, tutmadığında ise o konuyu bir daha unutmazsın.

Bir Web Sayfasının Üç Katmanı

Bir web sayfasını bir ev gibi düşün. HTML evin iskeletidir: duvarlar, kapılar, odalar. CSS boyası, mobilyası, ışıklandırmasıdır; evi güzel gösterir. JavaScript ise elektrik tesisatıdır. Düğmeye bastığında ışığın yanmasını, kapının zile basınca açılmasını, termostatın sıcaklığa göre çalışmasını o sağlar.

Yani JavaScript, sayfaya davranış kazandıran dildir. Bir butona tıklandığında menünün açılması, bir form gönderilmeden önce e-posta adresinin kontrol edilmesi, sayfa yenilenmeden yeni ürünlerin listeye eklenmesi, hepsi JavaScript'in işidir. HTML ve CSS tek başına durağandır; JavaScript devreye girdiği anda sayfa kullanıcıya cevap vermeye başlar.

Kısa Bir Tarih: On Günde Yazılan Dil

JavaScript 1995'te Netscape'te çalışan Brendan Eich tarafından, rivayete göre yaklaşık on günde tasarlandı. Adındaki "Java" tamamen pazarlama kararıdır; Java ile isim benzerliği dışında neredeyse hiçbir ortak noktası yoktur. Bu, yazılım dünyasının en kalıcı kafa karışıklıklarından biri olarak hâlâ yaşıyor.

Dil hızla yayıldı ve farklı tarayıcılar kendi yorumlarını yapmaya başlayınca bir standarda ihtiyaç doğdu. Bu standardın adı ECMAScript. Kısacası JavaScript, ECMAScript standardını uygulayan dilin günlük adıdır. Bir özelliğin "ES2015 ile geldi" ya da "ES2023'te eklendi" dendiğini duyduğunda, kastedilen bu standardın o yılki sürümüdür.

ECMAScript ve TC39: Dil Nasıl Gelişiyor?

Standardı TC39 adlı bir komite yönetir. Tarayıcı üreticileri, büyük şirketler ve bağımsız uzmanlar bu komitede bir araya gelir. Yeni bir özellik önce bir öneri olarak ortaya çıkar, aşama aşama olgunlaşır ve son aşamaya ulaştığında o yılın sürümüne girer.

2015'ten beri her yıl yeni bir sürüm yayımlanıyor. ES2015 (ES6 olarak da bilinir) dilin çehresini değiştiren büyük bir güncellemeydi; let, const, arrow function, class ve module gibi bugün her gün kullandığımız şeyler o sürümle geldi. Sonraki yıllardaki sürümler daha küçük ama düzenli adımlar attı. Bu yazıyı yazdığımız sırada en güncel sürüm Haziran 2026'da onaylanan ES2026.

Bunun sana pratik bir faydası var: bir özelliği kullanmadan önce hangi sürümle geldiğini ve tarayıcıların onu destekleyip desteklemediğini bilirsen, kullanıcılarının bir kısmında çalışmayan kod yazmaktan kurtulursun. Seri boyunca yeni bir özelliğe değindiğimizde hangi sürüme ait olduğunu da söyleyeceğiz.

Motor: Kodunu Kim Çalıştırıyor?

Tarayıcı JavaScript kodunu anlamak için içinde bir JavaScript motoru (engine) taşır. Chrome ve Edge'de V8, Firefox'ta SpiderMonkey, Safari'de JavaScriptCore çalışır. Motorun işi, senin yazdığın metni okuyup makinenin anlayacağı talimatlara çevirmek ve çalıştırmaktır.

Modern motorlar inanılmaz derecede akıllıdır. Kodu önce hızlıca çalıştırmaya başlar, sık çalışan kısımları fark eder ve onları arka planda daha hızlı makine koduna derler. Buna JIT (Just-In-Time) derleme denir. Bu sayede JavaScript, yorumlanan bir dil olarak başlayıp bugün oldukça performanslı bir hâle geldi. Motorun içinde neler olduğunu, call stack ve event loop gibi kavramlarla ilerleyen yazılarda detaylandıracağız.

Küçük bir not: JavaScript yalnızca tarayıcıda yaşamaz. Aynı dil, V8 motoru sayesinde sunucuda da çalışabilir; bunu Node.js ile yapıyoruz ve ona ayrı bir seride değineceğiz. Bu seride odağımız JavaScript'in kendisi ve tarayıcıdaki hayatı.

İlk Satırın: Tarayıcı Konsolu

JavaScript yazmaya başlamak için hiçbir şey kurman gerekmiyor. Bilgisayarındaki tarayıcı zaten bir JavaScript ortamı. Herhangi bir sayfadayken geliştirici araçlarını aç: Windows ve Linux'ta F12 ya da Ctrl+Shift+J, macOS'ta Cmd+Option+J. Açılan panelde Console sekmesine geç. Satırın başında yanıp sönen imleç, motorla doğrudan konuşabileceğin yerdir.

Bunu konsola yapıştırıp Enter'a bas:

console.log("Hello JavaScript!");

Altında yazdığın mesajı göreceksin. console.log, içine verdiğin değeri konsola yazdıran bir fonksiyondur ve bu seri boyunca en yakın dostun olacak. Şimdi baştaki soruya dönelim; iki satırı da konsola yapıştır:

console.log(2 + 2);   // 4
console.log("2" + 2); // "22"

İlk satır beklediğin gibi 4. İkincisi ise 22. Tırnak içindeki "2" bir sayı değil, bir metin (string). JavaScript bir string ile bir sayıyı + ile buluşturduğunda toplama yapmak yerine ikisini yan yana ekler. Bu davranışın adı type coercion, yani tiplerin kendiliğinden dönüştürülmesi. JavaScript'in en çok şaşırtan yanlarından biridir ve operatörler yazısında bütün inceliğiyle ele alacağız.

Konsolda Biraz Daha Oynayalım

Konsol bir hesap makinesi gibi de çalışır. console.log yazmadan bir ifade girersen sonucu doğrudan gösterir:

10 * 3
"Java" + "Script"
Math.max(4, 19, 7)

Sırasıyla 30, "JavaScript" ve 19 göreceksin. Bir de şunu dene:

document.title

Açık olan sayfanın başlığı geldi. document, tarayıcının sana sunduğu ve o anki sayfayı temsil eden object'tir. Şimdi biraz daha cesur bir satır:

document.body.style.background = "gold";

Sayfanın arka planı altın sarısına döndü. Endişelenme, sayfayı yenilediğinde her şey eski hâline gelir; değişiklik sadece senin tarayıcında ve sadece o an için geçerli. Ama az önce JavaScript ile bir web sayfasını canlı olarak değiştirdin. DOM adını verdiğimiz bu yapıyı ilerleyen yazılarda adım adım öğreneceğiz.

Bu Seriler Nasıl İlerleyecek?

JavaScript'i üç seri hâlinde anlatıyoruz. Temel seride dilin yapı taşlarını öğreneceğiz: değişkenler, veri tipleri, operatörler, koşullar, döngüler, string'ler, array'ler, fonksiyonlar, object'ler ve JSON. Ardından tarayıcıya geçip DOM, event'ler, formlar ve tarayıcı object'leriyle ilk etkileşimli sayfalarımızı kuracağız.

Orta seride modern syntax'ı, closure ve this gibi dilin derin kavramlarını, class'ları ve asenkron programlamayı, yani promise'leri, async/await ve Fetch API'yi ele alacağız. İleri seride ise prototype'lar, event loop'un iç işleyişi, bellek yönetimi, performans, Web Worker'lar ve Web Components gibi konulara ineceğiz.

Her yazıda örnekleri kendi tarayıcında çalıştırmanı istiyoruz. Okumak bir şey, kendi elinle çalıştırıp bozmak bambaşka bir şey.

Küçük Bir Deneme

★☆☆ Konsolu aç ve console.log ile kendi adını, yaşını ve en sevdiğin şehri ayrı ayrı yazdır. Ardından üçünü tek bir console.log içinde virgülle ayırarak yazdır ve çıktının farkına bak.

★★☆ Çalıştırmadan önce tahmin et, sonra dene: "5" - 2, "5" + 2, "5" * "2". Toplamada string'in kazandığını gördük; peki çıkarma ve çarpmada ne oluyor? Tahminlerinden hangileri tuttu?

★★☆ Sevdiğin bir sitede konsolu aç ve document.title = "My Page" yaz. Tarayıcı sekmesindeki başlığa bak. Sonra sayfayı yenile ve neden eski hâline döndüğünü kendi cümlelerinle açıkla.

Konsol denemeler için harika ama gerçek bir sayfanın kodu bir dosyada yaşar. Bir sonraki yazıda JavaScript'i bir HTML dosyasına nasıl bağladığımızı, defer ile async farkını ve geliştirici araçlarıyla hata ayıklamaya ilk adımı göreceğiz.