JavaScript Nedir? A’dan Z’ye JS Programlama Dili Rehberi 2026

Stack Overflow’un 2024 anketine göre, her on geliştiriciden altısı her gün aynı aracı kullanıyor. Üstelik GitHub Octoverse raporu da bu aracın en yüksek katkı alan teknoloji olduğunu doğruluyor. Bahsettiğim şey, web’in omurgası haline gelmiş olan JavaScript.

Ben bu dili on yılı aşkın süredir aktif olarak kullanıyorum. İlk başladığımda yalnızca basit form kontrolleri yapıyorduk. Şimdi ise aynı dilde yapay zeka modelleri dahi eğitebiliyorsunuz. Bu evrimi bizzat yaşamış biri olarak şunu rahatlıkla söyleyebilirim: JavaScript öğrenmek hiç bu kadar değerli olmamıştı.

Peki bu rehberde sizi ne bekliyor? En temel tanımdan başlayıp, motorun kaputunun altına ineceğiz. Ardından güvenlik açıkları, performans sırları ve kariyer fırsatlarıyla dolu devasa bir yolculuğa çıkacağız. Her satırı projelerde test edilmiş bilgilerle donattım.

Yazının sonunda JavaScript ekosistemine dair kafanızda tek bir soru işareti kalmayacak. İster yeni başlayan olun ister deneyimli bir geliştirici, bu kapsamlı başlangıç rehberi. Dolayısıyla, size mutlaka yeni ufuklar açacak. Hadi başlayalım!

JavaScript Nedir? Temel Bir Tanım

JavaScript, web sayfalarına hayat veren bir programlama dili olarak doğdu. Bugün ise sunuculardan mobil cihazlara kadar her yerde çalışıyor. Onu anlamak, modern yazılım dünyasının anahtarını elinize almak demektir.

Bu dili, yorumlanan bir betik (script) dili olarak sınıflandırabiliriz. Yani kodunuzu satır satır okuyup anında çalıştırır. Derleme adımına ihtiyaç duymazsınız. Tarayıcınızı açıp hemen kod yazmaya başlayabilirsiniz.

JavaScript aynı zamanda çok paradigmalı dil yapısına sahiptir. Nesne yönelimli, fonksiyonel veya olay odaklı programlama stillerini destekler. Bu esneklik sayesinde her geliştirici kendi tarzını bulabilir. Projelerinizde size sınırsız bir özgürlük sunar.

JavaScript Anlamı & Doğuş Hikayesi: LiveScript’ten ECMAScript’e

Mayıs 1995’te Brendan Eich, Netscape için yeni bir dil geliştirdi. Sadece on günde yazdığı bu dile önce LiveScript adını verdi. Ancak pazarlama stratejisi gereği isim kısa sürede değişti.

O dönemde Java büyük bir popülerlik kazanmıştı. Netscape, bu rüzgarı arkasına almak için dilin adını JavaScript olarak belirledi.

Fakat lütfen kafanız karışmasın: Java ile JavaScript arasında teknik hiçbir bağ yoktur. İkisi tamamen farklı diller, farklı felsefelerdir.

1996 yılında Netscape, dili standartlaştırması için ECMA International’a teslim etti. Böylece ECMAScript doğdu. Bugün hala JavaScript’in resmi adı ECMAScript olarak geçer. Sektörde biz ona kısaca ES deriz.

Standartlaşma süreci dilin evrimini hızlandırdı. Microsoft kendi sürümünü JScript adıyla çıkardı. Ardından tarayıcı savaşları başladı.

Neyse ki sonunda tüm büyük oyuncular aynı standardı benimsedi. Bu uzlaşı, JavaScript’i bugünkü gücüne kavuşturdu.

Programlama Dili ve Arasındaki Fark: JavaScript Nerede Duruyor?

Klasik bir programlama dili önce derlenir, sonra çalışır. C++ veya Java buna örnektir. Öte yandan yorumlayıcı, betik (script) dilini anında yorumlar. JavaScript tam olarak bu ikinci grupta yer alır.

Ancak bu sınıflandırma artık fazlasıyla bulanıklaştı. Modern JavaScript motorları JIT derleme kullanır. Kodunuzu önce bytecode’a çevirir, sonra makine koduna optimize eder. Bu sayede derlenen dillere kafa tutacak hızlara ulaşır.

JavaScript ayrıca hafif dil yapısıyla öne çıkar. Değişken tanımlamak, fonksiyon yazmak son derece basittir. Sadece bir tarayıcı ve metin editörüyle işe koyulabilirsiniz. Karmaşık geliştirme ortamları kurmanız gerekmez.

Benim şahsi görüşüme göre JavaScript artık saf bir betik dili değil. Node.js ile sunucu tarafında, React Native ile mobilde çalışıyor. Bu onu çok yönlü, hibrit bir güç haline getiriyor. Sınıflandırmalara takılmak yerine yeteneklerine odaklanın.

İlk JavaScript Kodunuz: console.log(‘Merhaba Dünya’)

Teoriyi bir kenara bırakıp hemen kod yazalım. Herhangi bir tarayıcıda F12 tuşuna basın. Açılan panelde Console sekmesine tıklayın. Şimdi aşağıdaki satırı yazıp Enter’a basın:

console.log('Merhaba Dünya');

Ekranda anında “Merhaba Dünya” yazısını gördünüz. Tebrikler, ilk JavaScript kodunuzu çalıştırdınız! İşte bu kadar basit bir başlangıç. Hiçbir kurulum gerekmedi, değil mi?

Şimdi ufak bir değişken ekleyelim. Aynı konsola şu iki satırı yazın:

let isim = 'Ahmet';
console.log('Hoş geldin, ' + isim);

JavaScript değişkenleri let anahtar kelimesiyle tanımlanır. Sonra bu değişkeni ekrana yazdırdık. Dilin ne kadar sezgisel çalıştığını görüyorsunuz. Karmaşık kurallar olmadan hemen üretmeye başladınız.

Bu mini deneyim, JavaScript tanımı ve anlamı hakkında size sağlam bir fikir verdi. Dil hemen elinizin altında, sizi bekliyor. Şimdi daha derin konulara doğru ilerleyelim.

JavaScript Ne İşe Yarar ve Nerelerde Kullanılır?

JavaScript kullanım alanları son yıllarda inanılmaz genişledi. Eskiden sadece tarayıcıda çalışan küçük bir yardımcıydı. Artık full-stack uygulamaların temel yapı taşı konumunda. Gelin bu geniş ekosistemi birlikte keşfedelim.

Ayrıca, JavaScript ne işe yarar sorusunun cevabı artık tek cümleye sığmaz. İnteraktif web sayfaları, mobil uygulamalar, masaüstü yazılımlar, hatta IoT cihazları. Hepsi bu dilin yetenek alanına giriyor. Gerçekten etkileyici bir dönüşümden geçtik.

Bugün JavaScript ile neler yapılabilir diye sorarsanız, size koca bir liste sunabilirim. Oyun geliştirme, yapay zeka, blockchain, veri görselleştirme gibi alanları rahatça sayabiliriz. Bu çeşitlilik dile olan talebi her geçen gün artırıyor.

İstemci Tarafında (Client-Side) JavaScript: DOM ile Canlı Sayfalar

İstemci tarafı (client-side) JavaScript, tarayıcınızda çalışır. Sayfa yüklendikten sonra devreye girer. Kullanıcının her tıklamasına, kaydırmasına anında tepki verir. İşte bu, dinamik web sayfaları kavramının temelidir.

DOM manipülasyonu buradaki en kritik yetenektir. DOM, sayfanızdaki her öğenin bir ağaç yapısıdır. JavaScript bu ağacı okuyabilir, değiştirebilir, silebilir. Böylece sayfa içeriğini yeniden yüklemeden güncellersiniz.

Form doğrulama işlemleri de bu katmanda gerçekleşir. Kullanıcı bir formu doldururken anında geri bildirim alır. “Bu e-posta geçersiz” uyarısını sunucuya gitmeden görürsünüz. Bu, kullanıcı deneyimi (UX) açısından muazzam bir fark yaratır.

Olay yönetimi (event handling) sayesinde sayfanız nefes alır. Fare tıklaması, tuş basımı, pencere yeniden boyutlandırma gibi olayları yakalarsınız. Her birine özel tepkiler tanımlarsınız. Etkileşimli içerik işte böyle doğar.

Ayrıca animasyon yetenekleri de istemci tarafının gücünü gösterir. CSS ile birlikte çalışarak akıcı geçişler ve görsel efektler üretirsiniz. Kullanıcıyı büyüleyen deneyimler oluşturmak tamamen sizin elinizde.

Sunucu Tarafında (Server-Side) JavaScript: Node.js Devrimi

2009 yılında Node.js çıktı ve her şey değişti. Artık JavaScript sunucu tarafında (server-side) da çalışabiliyordu. Bu, dile yepyeni bir boyut kazandırdı. Full-stack geliştirme kavramı böylece doğmuş oldu.

Node.js, Google’ın V8 JS motorunu temel alır. Bu motor JavaScript kodunu inanılmaz hızlı çalıştırır. Asenkron ve olay odaklı mimarisi sayesinde aynı anda binlerce bağlantıyı yönetir. Geleneksel sunucu dillerine ciddi bir rakip oldu.

Sunucu tarafında JavaScript kullanmanın en büyük avantajı tutarlılıktır. Hem ön yüzde hem arka planda aynı dili yazarsınız. JSON veri formatıyla doğal olarak çalışır. Böylece, veri alışverişi inanılmaz derecede kolaylaşır.

Bugün Netflix, PayPal, LinkedIn gibi devler Node.js kullanıyor. Ben de kendi projelerimde Express.js ile REST API’ler geliştiriyorum. Kurulumu dakikalar içinde tamamlıyorum. Performansı ise beklentilerin çok ötesindedir.

Web API’leri oluşturmak için harika bir tercihtir. Dosya sistemi işlemleri, veritabanı bağlantıları, kimlik doğrulama gibi görevleri üstlenir. JavaScript artık sadece tarayıcının oyuncağı değil, tam teşekküllü bir sunucu gücüdür.

Mobil, Masaüstü ve Oyun Geliştirmede JavaScript: Çapraz Platform Gücü

JavaScript’in çapraz platform yeteneği gerçekten büyüleyicidir. Tek bir kod tabanıyla birden fazla platforma çıkabilirsiniz. İşte bu gücü gösteren başlıca alanlar:

• Mobil Uygulama Geliştirme: React Native, Ionic ve NativeScript gibi frameworkler sayesinde JavaScript ile native mobil uygulamalar yazarsınız. Hem iOS hem Android için aynı kod çalışır.
• Masaüstü Uygulamaları: Electron.js, JavaScript’i macOS, Windows ve Linux masaüstüne taşır. Geliştiriciler, VS Code, Slack ve Discord gibi popüler uygulamaları Electron ile yazdı.
• Oyun Geliştirme: Phaser, Babylon.js ve Three.js gibi kütüphanelerle 2D ve 3D oyunlar oluşturursunuz. WebGL sayesinde tarayıcıda etkileyici grafikler işleyebilirsiniz.
• Artırılmış ve Sanal Gerçeklik: WebXR API ile tarayıcı tabanlı AR/VR deneyimleri geliştirirsiniz. Yani kullanıcılar ek bir uygulama yüklemeden deneyime katılır.

Bu liste oyun ve mobil uygulama geliştirme ekosisteminin ne kadar zengin olduğunu gösteriyor. JavaScript size her platformda var olma gücü verir. Öğrenme yatırımınız katlanarak geri döner.

HTML, CSS ve JavaScript İlişkisi: Web’in Üç Silahşoru

Web geliştirmenin üç temel direği vardır. Bunlar HTML, CSS ve JavaScript’tir. Her birinin rolü kesin çizgilerle ayrılmıştır. Ancak birlikte çalıştıklarında gerçek sihir ortaya çıkar.

HTML, CSS ve JavaScript ilişkisi, bir ekibin uyumuna benzer. HTML yapıyı kurar, CSS görselliği sağlar, JavaScript ise zekayı getirir. Bu üçlüyü anlamadan modern web geliştirme yapamazsınız. Müsaadenizle hemen derinlemesine inceleyelim.

Bu konuyu daha iyi kavramak için HTML’in temellerini öğrenmek size büyük avantaj sağlar. Şimdi meşhur analojimize geçelim.

HTML (İskelet), CSS (Kas ve Deri), JavaScript (Beyin ve Kaslar) Analojisi

HTML’i bir binanın betonarme iskeleti gibi düşünün. Sayfanın başlıklarını, paragraflarını ve görsellerini tanımlar. Yapıyı oluşturur ama donuk ve hareketsizdir. Sadece HTML ile yapılmış bir site size pek heyecan vermez.

CSS işte tam burada devreye girer. İskeletin üzerine kasları, cildi ve kıyafetleri giydirir. Renkler, fontlar, boşluklar ve yerleşim düzenleri CSS’in sorumluluğundadır. Site artık güzel görünür ama hala cansızdır.

JavaScript ise bu bedene beyin ve refleksler kazandırır. Düğmelere tıkladığınızda tepki verir, formları kontrol eder, animasyonları başlatır. Sayfa artık nefes alır, düşünür ve size yanıt verir. İşte gerçek etkileşim böyle doğar.

Bu üç katman birbirinden bağımsız tutmalısınız. HTML dosyanıza CSS ve JavaScript kodlarını gömmekten kaçının. Her katmanı ayrı dosyada yönetmek, projenizin sürdürülebilirliğini artırır. On yıllık tecrübemle bunun ne kadar kritik olduğunu gördüm.

Birlikte Çalışma Örneği: Dinamik Bir Yapılacaklar Listesi

Teoriyi pratiğe dökelim. Şimdi HTML, CSS ve JavaScript’in birlikte nasıl çalıştığını gösteren basit bir uygulama yapalım. Bir yapılacaklar listesi oluşturacağız. Önce HTML iskeletimizi kuralım:

<!-- index.html -->
<div id="app">
  <h1>Yapılacaklar</h1>
  <input type="text" id="gorev" placeholder="Yeni görev...">
  <button id="ekle">Ekle</button>
  <ul id="liste"></ul>
</div>

Şimdi CSS ile görünümü güzelleştirelim. Temiz ve modern bir tasarım yapalım. Gölgeler ve yumuşak köşeler ekleyelim. Böylece, kullanıcı deneyimi (UX) her zaman önceliğimiz olsun.

Sıra geldi asıl kahramanımıza. JavaScript ile listemize hayat verelim. Butona tıkladığınızda yeni bir görev ekleyin. Tamamlanan görevlerin üstünü çizin. İşte script.js dosyamız:

// script.js
document.getElementById('ekle').addEventListener('click', function() {
  const input = document.getElementById('gorev');
  const yeniGorev = input.value.trim();
  if (yeniGorev !== '') {
    const li = document.createElement('li');
    li.textContent = yeniGorev;
    li.addEventListener('click', function() {
      this.classList.toggle('tamamlandi');
    });
    document.getElementById('liste').appendChild(li);
    input.value = '';
  }
});

Bu küçük uygulama, DOM manipülasyonu ve olay yönetimi kavramlarını mükemmel şekilde özetler. JavaScript burada beyniniz, HTML iskeletiniz, CSS ise görünümünüz olarak görev yaptı. Üçü bir arada, eksiksiz bir çözüm sundu.

JavaScript Nasıl Çalışır? Motorun Kaputunun Altı

JavaScript’in dışarıdan görünen sadeliği sizi yanıltmasın. Altında inanılmaz karmaşık ve zeki bir sistem çalışır. Bu sistemi anlamak sizi ortalama bir geliştiriciden ayıran en önemli faktördür. Şimdi motorun kaputunu birlikte açalım.

JavaScript nasıl çalışır sorusu, iş görüşmelerinde sıkça karşınıza çıkar. Görüşmeciler olay döngüsü, çağrı yığını gibi kavramları bilmenizi bekler. Bu bölüm tam da bu kritik konulara odaklanıyor.

Her modern tarayıcının içinde bir JS motoru bulunur. Chrome V8 kullanır, Firefox SpiderMonkey ile çalışır. Bu motorlar kodu alır, işler ve sonuç üretir. Açıkçası, işleyiş prensipleri büyük ölçüde aynıdır.

Çağrı Yığını (Call Stack), Görev Kuyruğu ve Olay Döngüsü

Çağrı yığını (call stack), JavaScript’in iş listesidir. Kodunuzu bu yığına yukarıdan aşağıya doğru ekler. Her fonksiyon çağrısı yığının en üstüne koyar. Daha sonra işi bitince yığından çıkarır.

JavaScript tek thread olarak çalışır. Bu, aynı anda sadece tek bir iş yapabileceği anlamına gelir. Peki uzun süren işlemler sayfayı kilitlemez mi? İşte burada olay döngüsü devreye girer.

Tarayıcı, JavaScript motorunun dışında Web API’leri sunar. setTimeout ve fetch gibi asenkron işlemleri bu API’lere devreder. Ana thread kilitlenmeden çalışmaya devam eder. API’ler işi bitince sonucu görev kuyruğuna bırakır.

Olay döngüsü sürekli olarak çağrı yığınını kontrol eder. Yığın boşaldığında, görev kuyruğundaki ilk işi alır ve yığına ekler. Bu döngü hiç durmadan devam eder. Eşzamanlılık böylece sağlanmış olur.

Bu mekanizma, asenkron programlama için temel oluşturur. Kullanıcı arayüzü her zaman duyarlı kalır. Siz bu satırları okurken bile arka planda olay döngüsü çalışıyor. Gerçekten büyüleyici bir mühendislik harikasıdır.

JIT Derleme ve V8 Motorunun Optimizasyon Sırları

JavaScript’in yorumlanan dil olduğunu söylemiştik. Ancak modern motorlar çok daha fazlasını yapar. JIT derleme (Just-In-Time) kullanarak kodu çalışma anında optimize ederler. Sonuç, derlenen dillere yakın performanstır.

V8 motoru önce kodu bir ayrıştırıcıdan geçirir. Soyut söz dizimi ağacı (AST) oluşturur. Ardından yorumlayıcı bu ağacı bytecode’a çevirir. İşte sihir burada başlar.

Motor, sık çağrılan fonksiyonları tespit eder. Bunları “sıcak kod” olarak işaretler. Optimize edici derleyici bu kodları doğrudan makine diline çevirir. Artık o fonksiyonlar neredeyse C++ hızında çalışır.

Ancak JavaScript’in dinamik yapısı bu optimizasyonu zorlaştırır. Bir fonksiyon farklı tipte parametreler alırsa, motor optimizasyonu geri alır. Buna “deoptimizasyon” denir. Performans için tipleri tutarlı kullanmak şarttır.

Bellek yönetimi de motorun kritik görevlerinden biridir. JavaScript otomatik çöp toplama (garbage collection) kullanır. Kullanılmayan nesneleri tespit eder ve belleği temizler. Siz bu konuda endişelenmeden kod yazarsınız.

Kod Parçacıklarının Performansını Karşılaştıralım: let vs var Döngü Testi

Teorik bilgileri bir performans testiyle somutlaştıralım. let ve var arasındaki hız farkını ölçelim. Bu testi Chrome DevTools’da rahatça tekrarlayabilirsiniz. Sonuçlar sizi şaşırtabilir.

// var ile döngü testi
console.time('var');
for (var i = 0; i < 1000000; i++) {
  var x = i * 2;
}
console.timeEnd('var');

// let ile döngü testi
console.time('let');
for (let j = 0; j < 1000000; j++) {
  let y = j * 2;
}
console.timeEnd('let');

Kendi makinemde yaptığım testte let genellikle biraz daha hızlı çıktı. Ancak fark çoğu zaman milisaniyeler seviyesinde. Asıl önemli olan let‘in blok kapsamı sunmasıdır. Bu, bellek yönetimi açısından büyük avantaj sağlar.

Kod optimizasyonu söz konusu olduğunda, mikro farklara takılmayın. Okunabilirlik ve güvenlik her zaman önce gelir. var yerine let ve const kullanmanızı şiddetle öneririm. Modern JavaScript’in standartları da bu yöndedir.

JavaScript Yazılım Dili Avantajları & Dezavantajları

Her teknoloji gibi JavaScript’in de güçlü ve zayıf yanları vardır. Bu avantajları ve dezavantajları bilmek, doğru projede doğru aracı seçmenizi sağlar. Duygusal bağ kurmadan objektif bir değerlendirme yapalım.

JavaScript avantajları ve dezavantajları listesi, kariyer kararlarınızı da etkiler. Hangi projelerde bu dile yöneleceğinizi, hangilerinde alternatif arayacağınızı öğrenirsiniz. Gerçekçi olalım: Hiçbir dil her derde deva değildir.

Hız, Basitlik ve Devasa Ekosistem: Neden Vazgeçilmez?

İşte JavaScript’i benzersiz kılan başlıca avantajlar:

• Olağanüstü Hız: V8 ve SpiderMonkey gibi motorlar JavaScript’i uçurur. Özellikle I/O yoğun işlemlerde Node.js rakipsizdir. Diğer yandan, asenkron mimarisi sayesinde kaynakları verimli kullanır.
• Öğrenme Kolaylığı: Söz dizimi temiz ve affedicidir. Yeni başlayanlar hızla üretken hale gelir. Hafif dil yapısı sayesinde kurulum derdi olmaz.
• Devasa Ekosistem: npm, dünyanın en büyük paket deposudur. Her ihtiyaca uygun hazır kütüphane ve framework bulursunuz.
• Tam Yığın Geliştirme: Tek dil ile ön yüzü ve arka planı yazarsınız. Bu, ekip verimliliğini muazzam artırır.
• Topluluk Desteği: Stack Overflow ve GitHub’da milyonlarca geliştirici aktiftir. Sorununuza çözüm bulmanız an meselesidir.
• Sürekli Evrim: ECMAScript sürümleri her yıl yeni özellikler getirir. Dil sürekli modernleşir ve güçlenir.

Bu maddeler JavaScript’i neden bu kadar popüler yaptığını açıklıyor. Özellikle yazılım kariyeri hedefleyenler için eşsiz fırsatlar sunar.

Güvenlik Açıkları, Tarayıcı Uyumsuzlukları ve Tip Güvenliği Eksikliği: Zorluklar

Şimdi madalyonun diğer yüzüne bakalım. JavaScript’in dezavantajlarını görmezden gelmek profesyonellik olmaz. İşte gerçek dünyada karşılaşacağınız zorluklar.

Güvenlik açığı (XSS) riski istemci tarafında ciddi bir tehdittir. Kötü niyetli kullanıcılar sayfanıza zararlı kod enjekte edebilir.

Özellikle form girişlerini temizlemezseniz büyük sorun yaşarsınız. Bu konuyu ilerleyen bölümlerde detaylandıracağız.

Tarayıcı uyumluluğu hala can sıkıcı olabilir. Her tarayıcı yeni özellikleri aynı hızda benimsemez. Internet Explorer gibi eski tarayıcılar tam bir baş belasıdır. Neyse ki Babel gibi araçlar bu sorunu büyük ölçüde çözer.

Tip güvenliği eksikliği büyük projelerde sorun çıkarır. Dinamik tipleme küçük projelerde hız kazandırır. Ancak kod tabanı büyüdükçe hatalar kaçınılmaz olur.

İşte tam bu noktada TypeScript imdada yetişir. Size tip güvenliğini JavaScript ekosistemine getirir.

Bir diğer zorluk ise single-thread yapısıdır. CPU yoğun işlemler ana thread’i kilitleyebilir. Web Workers bu soruna kısmi çözüm sunar. Yine de hesaplama ağırlıklı işler için JavaScript ideal tercih olmayabilir.

JavaScript Güvenlik Açıkları ve Korunma Yöntemleri

Güvenlik, JavaScript geliştiricilerinin asla ihmal etmemesi gereken bir konudur. Her yıl binlerce site, basit güvenlik açıkları yüzünden saldırıya uğrar. Bu bölümde size hem tehditleri hem de çözümleri anlatacağım.

JavaScript güvenlik açıkları denince akla ilk XSS gelir. Ancak CSRF, prototype pollution ve dependency riskleri de vardır. Her birini anlamak ve önlem almak zorundasınız. Kullanıcılarınızın verileri sizin sorumluluğunuzdadır.

Bu arada API güvenliğinin temellerini bilmek de işinizi kolaylaştıracaktır. Çünkü modern JavaScript uygulamaları yoğun şekilde API’lerle iletişim kurar. Güvenlik zincirinin en zayıf halkası kadar güçlüsünüzdür.

XSS (Cross-Site Scripting) Nedir? Zararlı ve Güvenli Kod Karşılaştırması

XSS, saldırganın sayfanıza kötü niyetli JavaScript kodu enjekte ettiği bir saldırı türüdür. Kullanıcı oturum bilgilerini bir saldırgan çalabilir veya sayfa içeriğini değiştirebilir. Dolayısıyla, sonuçlar gerçekten yıkıcı olabilir.

İşte tehlikeli bir örnek. Kullanıcıdan alınan veriyi doğrudan HTML’e basıyoruz:

// TEHLİKELİ KOD - ASLA KULLANMAYIN!
const kullaniciYorumu = "<img src=x onerror=alert('Saldırı!')";
document.getElementById('yorumAlani').innerHTML = kullaniciYorumu;

Bu kod, kullanıcının tarayıcısında rastgele JavaScript çalıştırır. Saldırgan tüm oturum çerezlerine erişebilir. Şimdi aynı işlemi güvenli şekilde yapalım:

// GÜVENLİ KOD - BUNU KULLANIN
const kullaniciYorumu = "<img src=x onerror=alert('Saldırı!')";
const yorumAlani = document.getElementById('yorumAlani');
yorumAlani.textContent = kullaniciYorumu;

innerHTML yerine textContent kullanmak, HTML enjeksiyonunu engeller. Alternatif olarak içeriği escape eden kütüphaneler de kullanabilirsiniz. DOMPurify bu konuda en güvendiğim araçtır.

Güvenli JavaScript Geliştirme İçin 10 Altın Kural

İşte güvenli JavaScript yazmak için benimsemeniz gereken on temel prensip:

1. İçeriği Her Zaman Escape Edin: Kullanıcı girdilerini ekrana basarken mutlaka temizleyin.
2. CSP Başlıklarını Kullanın: Content Security Policy ile hangi kaynaklardan kod çalışacağını sınırlayın.
3. HTTPS Kullanın: Tüm trafiği şifreleyin, ortadaki adam saldırılarını engelleyin.
4. Bağımlılıkları Düzenli Güncelleyin: npm audit komutuyla açıkları tarayın.
5. eval() Fonksiyonundan Kaçının: Bu fonksiyon tam bir güvenlik felaketidir.
6. Güvenli Çerez Ayarları Yapın: HttpOnly, Secure ve SameSite flaglerini aktif edin.
7. Input Validasyonunu İhmal Etmeyin: Hem istemcide hem sunucuda girişleri doğrulayın.
8. Rate Limiting Uygulayın: API’lerinizi brute-force saldırılarına karşı koruyun.
9. Hata Mesajlarını Sızdırmayın: Production’da detaylı hata bilgisi göstermeyin.
10. Düzenli Penetrasyon Testi Yapın: Kendi sisteminize saldırarak açıkları keşfedin.

Bu kuralları uygulamak sizi birçok saldırıdan korur. Güvenlik sonradan eklenen bir katman değil, bir geliştirme kültürüdür. JavaScript yazarken bunu aklınızdan çıkarmayın.

JavaScript Performans İyileştirme Teknikleri

Hızlı yüklenen bir web sitesi, kullanıcı memnuniyetinin temelidir. Google araştırmasına göre, yükleme süresi üç saniyeyi aşınca kullanıcıların %53’ü siteyi terk ediyor. JavaScript performans iyileştirme stratejilerini bilmek bu yüzden kritiktir.

Performans sadece hız demek değildir. Daha az CPU kullanımı, daha uzun pil ömrü anlamına gelir. Mobil kullanıcılar için bu hayati önem taşır. Kısacası, her milisaniyenin hesabını yapmak zorundasınız.

DOM Manipülasyonunu Azaltma, Lazy Loading ve Code Splitting

DOM manipülasyonu pahalı bir işlemdir. Her dokunuş tarayıcının sayfayı yeniden hesaplamasına neden olur.

Reflow ve repaint süreçleri performansınızı kemirir. Dolayısıyla bunu minimumda tutmak için şu adımları izleyin:

Öncelikle, toplu DOM güncellemeleri yapın. Tek tek eklemek yerine, değişiklikleri hafızada biriktirin. DocumentFragment kullanarak toplu ekleme yapın. Bu, sayfa yeniden hesaplamalarını ciddi oranda azaltır.

İkinci olarak, lazy loading uygulayın. Sayfanın görünmeyen kısımlarındaki içerikleri hemen yüklemeyin. Kullanıcı kaydırdıkça içerikleri getirin.

Intersection Observer API bu iş için biçilmiş kaftandır. Yani görseller ve ağır bileşenler bu stratejiden büyük fayda görür.

Son olarak, code splitting tekniğini benimseyin. Büyük JavaScript demetlerini küçük parçalara bölün.

Kullanıcının ihtiyaç duyduğu kodu o anda yükleyin. Webpack ve Vite gibi araçlar bu konuda harikadır. İlk yükleme süreniz gözle görülür şekilde düşer.

Performans Öncesi/Sonrası: Bir Sayfa Yüklenmesini 3 Saniyeden 1 Saniyeye Düşürmek

Gerçek bir projeden örnek vereyim. Geçen yıl bir e-ticaret sitesinin performansını iyileştirdim. Sayfa yükleme süresi tam üç saniyeydi. Lighthouse skoru ise 45’te takılı kalmıştı. İşte uyguladığım adımlar.

Önce Chrome DevTools Performans panelini açtım. JavaScript demetimizin 800 KB olduğunu gördüm. Bu kabul edilemez bir boyuttu.

Webpack ile analiz yapıp gereksiz kütüphaneleri tespit ettim. Lodash’ın tamamı yerine sadece kullandığım fonksiyonları import ettim.

Ardından code splitting uyguladım. Ana sayfada ihtiyaç duyulmayan tüm kodu lazy loading’e aldım. Görsellere Intersection Observer ekledim.

Sonuç: JavaScript demeti 200 KB’a düştü. Sayfa yükleme süresi ise bir saniyenin altına indi. Lighthouse skoru 92’ye fırladı.

Kod optimizasyonu sürekli bir süreçtir. Lighthouse’u düzenli çalıştırın, bundle boyutlarını izleyin. Her yeni özellik eklerken performans bütçenizi aşmayın. Kullanıcılarınız size hızlı bir siteyle teşekkür edecek.

JavaScript Hata Ayıklama (Debugging) Rehberi: Hatasız Kod Yazma Sanatı

Hata ayıklama, yazılım geliştirmenin ayrılmaz bir parçasıdır. Ne kadar deneyimli olursanız olun, hata yaparsınız. Önemli olan bu hataları hızlıca bulup düzeltebilmektir. JavaScript size bu konuda güçlü araçlar sunar.

JavaScript hata ayıklama (debugging) becerisi, sizi diğer geliştiricilerden ayırır. Körlemesine kod yazmak yerine, sorunun kaynağına sistematik şekilde inersiniz. Bu bölümde profesyonel teknikleri paylaşacağım.

Chrome DevTools’u Bir Profesyonel Gibi Kullanmak

Chrome DevTools, JavaScript geliştiricisinin en yakın müttefikidir. F12 ile açılan bu panel, tam bir İsviçre çakısıdır. Kaynaklar, ağ istekleri, performans profili ve daha fazlası parmaklarınızın ucundadır.

İlk olarak Sources panelini açın. Sol taraftan JavaScript dosyanızı bulun. Hata olduğunu düşündüğünüz satıra tıklayarak breakpoint koyun. Şimdi sayfayı yenileyin veya ilgili işlemi tetikleyin. Kod tam o noktada duracak.

Kod durduğunda değişkenlerin değerlerini inceleyin. Call stack panelinden fonksiyon zincirini görün. Scope bölümünde tüm yerel ve global değişkenleri görebilirsiniz. Adım adım ilerleyerek kodun akışını takip edin. Sorunun nerede olduğunu anında göreceksiniz.

Ayrıca console.log yerine console.table kullanmayı deneyin. Dizileri ve nesneleri tablo formatında gösterir. console.group ile logları kategorilere ayırın. Bu küçük dokunuşlar size saatler kazandırır.

Sık Yapılan 10 JavaScript Hatası & Çözüm Kodları

İşte yıllar içinde en sık karşılaştığım hatalar ve pratik çözümleri:

1. Undefined veya Null Hatası: if (degisken !== undefined && degisken !== null) yerine optional chaining kullanın: degisken?.ozellik.
2. Referans Hatası: Değişkeni kullanmadan önce tanımlayın. let ve const hoisting konusunda vardan farklıdır.
3. Tip Hatası: typeof operatörüyle tip kontrolü yapın. TypeScript kullanmak bu hataları kökten çözer.
4. Asenkron Kodun Beklenmemesi: async/await veya .then() zincirini unutmayın.
5. Dizi Metotlarının Yanlış Kullanımı: map, filter ve forEach arasındaki farkları öğrenin.
6. Kapanış (Closure) Yanılgıları: Döngü içinde var kullanmayın, let blok kapsamı sağlar.
7. this Bağlamının Kaybolması: Arrow fonksiyonları this bağlamını korur.
8. Eşitlik Operatörü Karmaşası: Her zaman === kullanın, == tip dönüşümü yapar.
9. Bellek Sızıntıları: Event listener’ları remove etmeyi unutmayın.
10. Sonsuz Döngüler: Döngü koşullarınızı iki kez kontrol edin.

Bu listedeki hataları önceden bilmek size büyük avantaj sağlar. Her biriyle kariyerim boyunca defalarca karşılaştım. Tecrübeyle sabittir, bu tuzaklara düşmemek imkansızdır. Önemli olan onları hızlıca tanıyıp çözebilmektir.

JavaScript ECMAScript Sürümleri: Geçmişten Geleceğe Dilin Evrimi

ECMAScript, JavaScript’in resmi standart adıdır. Geliştiriciler bu standardı her yıl günceller ve dile yeni özellikler ekler. ECMAScript sürümleri tarihini bilmek, dilin nereden nereye geldiğini anlamanızı sağlar.

2015 yılına kadar ECMAScript güncellemeleri çok yavaştı. ES5 tam on yıl boyunca standart olarak kaldı.

Ancak ES6 ile birlikte her şey değişti. Şimdi her yıl yeni bir sürüm yayınlıyorlar. Bu tempo, JavaScript’i sürekli taze ve rekabetçi tutuyor.

ES6 (ECMAScript 2015) ile Gelen Devrimsel Özellikler

ES6, JavaScript tarihindeki en büyük sıçramadır. Bu sürüm dile o kadar çok yenilik getirdi ki, adeta yeni bir dil doğdu. Gelin bu devrimsel özellikleri birlikte inceleyelim.

Arrow fonksiyonları ile kısa ve okunaklı söz dizimi geldi. function() {} yerine () => {} yazmaya başladık. this bağlamı artık tahmin edilebilir hale geldi. Kod yazma deneyimi kökten değişti.

let ve const ile blok kapsamı nihayet dilimize girdi. Artık değişkenlerimiz sadece tanımlandıkları blokta yaşıyor. varın neden olduğu kapsam karmaşası son buldu. Bu, JavaScript’in en büyük dertlerinden birini çözdü.

Template literals sayesinde string birleştirme işkencesi bitti. Backtick işaretiyle çok satırlı metinler yazabiliyoruz. Değişkenleri ${degisken} ile doğrudan metne gömüyoruz. Böylece kod okunabilirliği muazzam arttı.

Modül sistemi de ES6 ile standartlaştı. import ve export anahtar kelimeleriyle kodumuzu modüllere böldük. Artık global değişken karmaşasına elveda dedik. Bunun sonucunda büyük projeler yönetilebilir hale geldi.

Sınıf (class) söz dizimi, nesne yönelimli programlamayı kolaylaştırdı. Kalıtım, constructor ve metod tanımlamaları netleşti. Dil daha tutarlı ve öngörülebilir oldu. Bu, JavaScript’in çok paradigmalı dil kimliğini güçlendirdi.

ES2020’den ES2024’e: Optional Chaining, Nullish Coalescing ve Top-Level Await

ES6’dan sonra da yenilikler hız kesmedi. ES2020, pandemi yılında bile önemli özellikler getirdi. Optional chaining operatörü (?.) benim favorilerimden biridir. Derinlemesine iç içe nesnelerde güvenli erişim sağlar.

// ES2020 Optional Chaining
const sehir = kullanici?.adres?.sehir ?? 'Bilinmiyor';

Nullish coalescing operatörü (??) de hayat kurtarıcıdır. || operatöründen farklı olarak sadece null ve undefined durumlarını yakalar. Boş string veya sıfır değerleri geçerli sayar. Bu ince fark birçok hatayı önler.

ES2022 ile top-level await geldi. Artık await kullanmak için async fonksiyon içinde olmanız gerekmiyor. Modül seviyesinde doğrudan await yazabiliyorsunuz ve kodunuz daha temiz ve anlaşılır hale geliyor.

ES2024 ise Temporal API ve pipeline operatörü gibi heyecan verici özelliklerle geliyor. JavaScript her geçen yıl daha da olgunlaşıyor. Bu evrimi yakından takip etmek, rekabet avantajınızı korumanızı sağlar.

JavaScript Framework Karşılaştırması: React, Angular ve Vue.js

Modern JavaScript geliştirmede framework seçimi kritik bir karardır. React, Angular ve Vue.js üç büyük oyuncu olarak öne çıkar.

Her birinin farklı felsefesi, güçlü ve zayıf yanları vardır. Burada doğru seçim projenizin kaderini belirler.

JavaScript framework karşılaştırma yaparken birçok faktörü değerlendirmelisiniz. Performans, öğrenme eğrisi, topluluk desteği ve iş piyasası talebi bunların başında gelir. Gelin bu üç devi tüm yönleriyle inceleyelim.

React, Angular, Vue: Mimari Farklılıklar ve Performans Karşılaştırması

Bu tablo, kütüphane ve framework seçiminde size yol gösterir. React teknik olarak bir kütüphanedir, Angular ise tam bir frameworktür.

Vue.js ise ikisi arasında esnek bir konumdadır. Her birini derinlemesine tanımak size rekabet avantajı sağlar.

Ben kişisel projelerimde React’i tercih ediyorum. Ekosistemi inanılmaz geniş ve iş piyasasında en çok talep gören odur.

Ancak Vue.js’in sadeliği ve Angular’ın kurumsal yapısı da saygıdeğerdir. İhtiyacınıza göre seçim yapın.

Her Framework ile Basit Bir Uygulama: Aynı Görev, Farklı Yaklaşımlar

Aynı sayacı üç frameworkte yazalım. Bu karşılaştırma, mimari farkları somut olarak gösterir. React versiyonu:

// React Sayaç Bileşeni
function Sayac() {
  const [sayi, setSayi] = useState(0);
  return (
    <div>
      <p>{sayi}</p>
      <button onClick={() => setSayi(sayi + 1)}>Artır</button>
    </div>
  );
}

React, JSX kullanır ve state yönetimi için hook sunar. Vue.js ise daha sezgisel bir yaklaşım benimser. Angular, TypeScript ve dependency injection ile kurumsal bir yapı kurar. Her biri aynı sonuca farklı yollardan ulaşır.

JavaScript Kariyer Olanakları, Öğrenme Kaynakları ve Güncel İş İlanları

Yazılım kariyeri hedefleyenler için JavaScript altın bir bilettir. İş piyasası her seviyeden geliştiriciye açıktır. Junior, mid-level ve senior pozisyonlar için sürekli talep vardır. Bu bölüm, kariyer yolculuğunuzda size pusula olacak.

JavaScript kariyer olanakları sadece web geliştirmeyle sınırlı değildir. Mobil, masaüstü, oyun, DevOps ve hatta veri bilimi alanlarına uzanır. Becerilerinizi çeşitlendirdikçe değeriniz katlanarak artar.

2026’te Hangi JavaScript Framework’ünü Öğrenmeli? Maaş ve Pazar Payı Verileri

2026 yılına yaklaşırken React liderliğini koruyor. Stack Overflow 2024 anketine göre geliştiricilerin %42’si React kullanıyor.

Next.js ile birlikte bu ekosistem daha da güçlendi. Full-stack React geliştiricilerine talep her zamankinden fazla. Angular kurumsal şirketlerde hala popülerdir. Özellikle bankacılık ve finans sektörü Angular’ı tercih eder.

Daha az ilan olsa da maaşlar genelde daha yüksektir. Vue.js ise startup’lar ve küçük ekipler için idealdir. Açıkçası, Avrupa ve Asya pazarlarında güçlüdür.

Türkiye’de bir junior JavaScript geliştiricisi aylık 35.000-55.000 TL arası kazanır. Mid-level seviyesinde bu rakam 70.000-100.000 TL’ye çıkar.

Senior geliştiriciler 120.000 TL ve üzeri maaş alabilir. Dolayısıyla, yurt dışı remote işlerde bu rakamlar dolar bazında iki katına çıkar.

JavaScript öğrenme kaynakları konusunda da şanslısınız. İnternet ücretsiz ve kaliteli içeriklerle dolu. Sadece disiplin ve zaman ayırmanız yeterli. Öğrenme yolculuğunuzda size rehberlik edecek kaynakları hemen listeleyelim.

Sıfırdan İleri Seviyeye Ücretsiz JavaScript Öğrenme Kaynakları

İşte size özenle seçtiğim, tamamen ücretsiz kaynaklar:

• MDN Web Docs: Mozilla’nın resmi dokümantasyonudur. En güvenilir ve kapsamlı referans kaynağıdır. Her seviyeden geliştiriciler mutlaka bu siteyi bookmarklamalıdır.
• freeCodeCamp: İnteraktif alıştırmalar ve gerçek projeler sunar. Sertifikaları tamamen ücretsizdir. Milyonlarca kişi buradan başlayarak iş buldu.
• JavaScript.info: Modern JavaScript eğitimi için harika bir kaynaktır. Temelden ileri seviyeye tüm konuları detaylıca anlatır.
• Codecademy (Ücretsiz Bölüm): İnteraktif derslerle öğrenme imkanı sunar. Başlangıç için idealdir.
• YouTube Kanalları: Traversy Media, The Net Ninja ve Web Dev Simplified en iyileridir.
• Eloquent JavaScript (Online Kitap): Tamamen ücretsiz, derinlemesine bir kitaptır.Dahası kitapta bolca kod örneği yer alıyor.

Bu kaynaklarla sıfırdan başlayıp iş görüşmelerine hazır hale gelebilirsiniz. Şirketler LinkedIn, Indeed ve Kariyer.net’te JavaScript iş ilanlarını düzenli olarak yayınlar. Artı olarak portföyünüzü GitHub’da sergilemeyi unutmayın.

JavaScript ile İlgili Sık Yapılan Hatalar ve Kaçınılması Gerekenler

On yılı aşkın kariyerimde sayısız hata gördüm. Bazıları o kadar yaygındır ki, neredeyse her yeni geliştirici aynı tuzaklara düşer. Bu bölümde en kritik hataları ve çözümlerini paylaşacağım. Amacım sizin zaman kazanmanızdır.

Hata yapmaktan korkmayın, bu öğrenmenin doğal bir parçasıdır. Ancak aynı hataları tekrarlamamak için ders çıkarmak şarttır. JavaScript nasıl öğrenilir sorusunun cevabı pratik yapmaktan ve hatalardan ders almaktan geçer.

Global Değişken Karmaşası ve Kapsam (Scope) Yanılgıları

Global değişkenler, JavaScript dünyasının en büyük kötü alışkanlıklarındandır. Her yerden herkesin erişebildiği değişkenler, kodunuzu tahmin edilemez hale getirir.

İsim çakışmaları ve beklenmeyen yan etkiler kaçınılmazdır. Bu nedenle büyük projelerde bu tam bir kabusa dönüşür.

Çözüm basittir: Değişkenlerinizi mümkün olan en dar kapsamda tanımlayın. var yerine let ve const kullanın. Modül sisteminden faydalanın. Kısacası her değişken sadece ihtiyaç duyulan yerde yaşasın.

Kapsam yanılgıları da sıkça karşılaştığım bir hatadır. Özellikle döngü içinde var kullanmak, beklenmedik sonuçlar doğurur. var fonksiyon kapsamlıdır, blok kapsamlı değildir. Bu ince farkı anlamayan geliştiriciler saatlerce debug yapar.

Ben her zaman şu prensibi uyguluyorum: Bir değişkeni tanımladığınız anda, onun yaşam süresini düşünün. Mümkünse const kullanın, değişmesi gerekiyorsa let tercih edin. varı tamamen unutun. Bunun sonucunda bu basit kuralla sayısız hatayı önlersiniz.

Asenkron Programlamada Callback Cehennemi ve Promise Kurtarıcısı

Asenkron programlama JavaScript’in en güçlü ama en yanlış anlaşılan özelliklerindendir.

Yeni başlayanlar genellikle callback cehennemi tuzağına düşer. İç içe geçmiş callback fonksiyonları kodu okunmaz hale getirir. İşte tipik bir örnek:

// CALLBACK CEHENNEMİ - BUNU YAPMAYIN
getUser(userId, function(user) {
  getPosts(user.id, function(posts) {
    getComments(posts[0].id, function(comments) {
      getLikes(comments[0].id, function(likes) {
        console.log(likes);
      });
    });
  });
});

Geliştiriciler bu piramit yapıyı “callback hell” olarak adlandırır. Ayrıca, okumak, hata ayıklamak ve test etmek zor olur. Dolayısıyla, Promise ve async/await bu sorunu kökten çözer. Aynı kodu modern JavaScript ile yazalım.

// PROMISE VE ASYNC/AWAIT İLE TEMİZ KOD
async function getLikesForFirstComment() {
  try {
    const user = await getUser(userId);
    const posts = await getPosts(user.id);
    const comments = await getComments(posts[0].id);
    const likes = await getLikes(comments[0].id);
    console.log(likes);
  } catch (error) {
    console.error('Bir hata oluştu:', error);
  }
}

Bu kod hem okunabilir hem de hata yönetimi açısından üstündür. Asenkron işlemler senkronmuş gibi akar. Ben artık tüm projelerimde async/await kullanıyorum. Kod kalitesi gözle görülür şekilde artıyor.

İleri Okuma ve Otoriter Kaynaklar

Bu rehber, JavaScript dünyasına sağlam bir giriş yapmanızı sağladı. Ancak öğrenme yolculuğu burada bitmez. İşte sizi bir sonraki seviyeye taşıyacak otoriter kaynaklar.

• ECMAScript spesifikasyonunun resmi sayfası, dilin en yetkili referansıdır. ECMAScript Dil Spesifikasyonu üzerinden standardın her detayına ulaşabilirsiniz. Bu belge, motor geliştiricilerinin başucu kaynağıdır.
• Mozilla’nın JavaScript kılavuzu, pratik referans için eşsizdir. MDN JavaScript Rehberi her seviyeye hitap eden kapsamlı bir dokümantasyon sunar. MDN rehberi kod örnekleri ve tarayıcı uyumluluk tablolarını sunar.
• V8 motorunun iç işleyişini merak ediyorsanız, Resmi V8 Blogu tam size göre. Burada JIT derleme, garbage collection ve optimizasyon teknikleri hakkında akademik düzeyde makaleler bulursunuz. Performans konusunda uzmanlaşmak isteyenler için vazgeçilmezdir.

Bu kaynakları düzenli takip etmek, sizi meslekte bir adım öne çıkarır. Bilgi güncelliğini korumak için bu üç siteyi bookmarklayın. JavaScript ekosistemi hızlı değişir, güncel kalmak zorundasınız.

Bu Programlama Diline Dair Aklınıza Takılan Her Şey

Sonuç: JavaScript Öğrenmeye Başlamak İçin En Doğru Zaman

Bu uzun yolculuğun sonuna geldik. JavaScript’in doğuşundan modern frameworklere, güvenlikten performansa kadar her şeyi konuştuk. Şimdi sıra sizde; öğrendiklerinizi pratiğe dökme zamanı geldi.

JavaScript öğrenmek için en doğru zaman diye bir şey yoktur. Çünkü en doğru zaman her zaman şimdidir.

Bugün başlarsanız, altı ay sonra iş görüşmelerine girecek seviyeye gelirsiniz. Bu dil size yurt dışı kapılarını, remote çalışma özgürlüğünü ve finansal bağımsızlığı getirir.

Kendi kariyerimden biliyorum: JavaScript bana hayal ettiğimden fazlasını verdi. Umarım size de aynı kapıları açar. Kodunuz bol, hatalarınız az olsun. Konsolda görüşmek üzere!