# JavaScript: 7 Adımda Kapsamlı ve Güncel Rehber [2026] ## Giriş Paragrafı: Web'in Kalbi, Her Yerde JavaScript Her gün internette gezinirken karşılaştığımız dinamik ve interaktif deneyimlerin %98'inden fazlası tek bir dil sayesinde mümkün oluyor: JavaScript. 2026 yılı itibarıyla, sadece web tarayıcılarında değil, sunucu tarafında Node.js, mobil uygulamalarda React Native, masaüstü uygulamalarda Electron ve hatta IoT cihazlarında bile kritik bir rol oynayan JavaScript, modern yazılım geliştirmenin vazgeçilmez temel taşı haline gelmiştir. Bu kapsamlı rehberde, 10 yılı aşkın süredir sektörde edindiğim deneyimlerle, JavaScript'in temellerinden en ileri seviye tekniklerine, performans optimizasyonlarından gerçek dünya proje örneklerine kadar her yönünü ele alacak, 2026'nın güncel standartları ve ECMAScript 2026 özellikleriyle donanmış bir şekilde yetkinliğinizi bir üst seviyeye taşıyacaksınız. Hazır mısınız? Hemen başlayalım. ## JavaScript Nedir? JavaScript, web sitelerini dinamik ve interaktif hale getirmek için tasarlanmış, çok paradigmalı, yüksek seviyeli, yorumlanabilen veya JIT (Just-In-Time) derlenebilen bir programlama dilidir. 2026 itibarıyla, ECMAScript (ES) standardının en güncel sürümü olan ES2026 ile modern geliştirmenin tüm ihtiyaçlarını karşılar. Başlangıçta tarayıcılar için geliştirilmiş olsa da, Node.js sayesinde sunucu tarafında, React Native ile mobil platformlarda ve Electron ile masaüstünde de yaygın olarak kullanılmaktadır, böylece tam yığın (full-stack) geliştiricilerin tek bir dil ile baştan sona projeler oluşturmasına olanak tanır. JavaScript, tarayıcıların DOM (Document Object Model) manipülasyonu, asenkron işlemler (AJAX, Fetch API), kullanıcı etkileşimleri ve dinamik içerik yüklemesi gibi görevleri yerine getirmesini sağlar. V8 gibi yüksek performanslı motorlar sayesinde sunucu tarafında da etkileyici hızlara ulaşabilen JavaScript, geniş bir ekosistem ve aktif bir topluluk tarafından desteklenmektedir. Bu da onu hem yeni başlayanlar hem de deneyimli geliştiriciler için cazip bir seçenek haline getirir. ## Neden JavaScript Kullanmalısınız? JavaScript, 2026'da yazılım geliştirme dünyasındaki merkezi konumunu sağlamlaştırmış durumda. Bu popülerliğin arkasında yatan somut faydalar ve çözdüğü problemler, onu her ölçekten proje için güçlü bir aday yapıyor: * **Tam Yığın Geliştirme (Full-Stack Capability):** Node.js ile sunucu tarafında, React, Angular veya Vue.js ile istemci tarafında çalışabilme yeteneği sayesinde, geliştiriciler tek bir dil ve ekosistemle uçtan uca uygulamalar oluşturabilirler. Bu, geliştirme sürecini basitleştirir ve ekip verimliliğini artırır. * **Geniş Ekosistem ve Kütüphane Desteği:** npm (Node Package Manager) üzerinde milyonlarca açık kaynak paket bulunmaktadır. Bu, hemen her ihtiyacınız için hazır bir çözüm bulabileceğiniz anlamına gelir; veri tabanı bağlantılarından UI bileşenlerine, test araçlarından performans izleme kütüphanelerine kadar geniş bir yelpaze mevcuttur. * **Asenkron Programlama Yetenekleri:** `async/await` ve Promise'ler sayesinde, uzun süren ağ istekleri veya dosya işlemleri gibi asenkron görevler, kullanıcı arayüzünü kilitlemeden veya sunucu performansını düşürmeden verimli bir şekilde yönetilebilir. Bu, özellikle yüksek performanslı ve tepkisel uygulamalar geliştirmek için kritiktir. * **Yüksek Performans:** V8 motoru gibi modern JavaScript motorları, kodu makine diline derleyerek (JIT Compilation) etkileyici performans sunar. Özellikle sunucu tarafında Node.js ile yüksek eş zamanlı bağlantıları işleme kapasitesi, onu mikro servis ve API geliştirme için ideal kılar. * **Büyük ve Aktif Topluluk:** JavaScript, dünyanın en büyük geliştirici topluluklarından birine sahiptir. Bu, sorun yaşadığınızda hızlıca yardım bulabileceğiniz, sürekli güncellenen kaynaklara ve kütüphanelere erişebileceğiniz anlamına gelir. Stack Overflow, GitHub ve çeşitli forumlar, bu desteğin ana kaynaklarıdır. * **Çoklu Platform Desteği:** Web tarayıcıları, sunucular, masaüstü (Electron), mobil (React Native, NativeScript, Ionic) ve hatta IoT cihazları gibi çok çeşitli platformlarda çalışabilme yeteneği, geliştiricilere eşsiz bir esneklik sunar. ### Kimler İçin Uygundur, Kimler İçin Değil? JavaScript, özellikle web odaklı projeler geliştiren, tam yığın yeteneklere sahip olmak isteyen ve hızlı prototipleme ile ölçeklenebilir çözümler arayan geliştiriciler için mükemmel bir seçimdir. Ancak, donanım seviyesinde düşük seviye bellek yönetimi gerektiren sistem programlama veya yüksek performanslı bilimsel hesaplama gibi alanlarda Python veya C++ gibi diller daha uygun olabilir. ## JavaScript vs Alternatifler: Bir Karşılaştırma [2026] JavaScript'in gücünü daha iyi anlamak için, onu sıkça karşılaştırıldığı diğer popüler backend dilleriyle kıyaslayalım. Bu karşılaştırma, projeniz için en doğru teknolojiyi seçmenize yardımcı olacaktır. | Özellik | JavaScript (Node.js) | Python (Django/Flask) | PHP (Laravel/Symfony) | | :------------------ | :------------------------------- | :------------------------------- | :------------------------------ | | **Performans** | Yüksek (V8 motoru, asenkron I/O) | Orta (GIL kısıtlaması, senkron) | Orta (FPM, JIT derleme ile artış) | | **Öğrenme Eğrisi** | Orta (Asenkron yapıları zorlayabilir) | Kolay (Okunabilir sözdizimi) | Kolay (Web odaklı) | | **Ekosistem** | Çok Geniş (npm, zengin UI/UX kütüphaneleri) | Geniş (Veri bilimi, ML odaklı) | Geniş (Web sunucuları, CMS) | | **Topluluk** | Çok Aktif ve Büyük | Çok Aktif ve Büyük | Aktif ve Büyük | | **Kurumsal Destek** | Yüksek (Microsoft, Google, Netflix) | Yüksek (Google, Meta) | Orta (WordPress, Zend) | | **Kullanım Alanı** | Full-Stack Web, API, Mikroservis, Gerçek Zamanlı Uygulamalar | Web, Veri Bilimi, ML, Otomasyon, Scripting | Web Geliştirme (özellikle CMS) | **Yorum:** 2026 itibarıyla JavaScript ve Node.js, özellikle yüksek trafikli, gerçek zamanlı ve mikro servis tabanlı uygulamalar için performans ve geliştirme hızı açısından öne çıkıyor. Python veri bilimi ve yapay zeka alanında liderliğini sürdürürken, PHP kurumsal web siteleri ve CMS çözümleri için hala güçlü bir seçenek olmaya devam etmektedir. Proje gereksinimlerinize göre bu dillerden birini veya bir kombinasyonunu tercih edebilirsiniz. ## Kurulum ve İlk Adımlar: JavaScript Geliştirme Ortamı [2026] Modern JavaScript geliştirmeye başlamak için Node.js ve npm (Node Package Manager) kurulumu şarttır. Node.js, JavaScript kodunu tarayıcı dışında çalıştırmamızı sağlarken, npm ise paketleri yönetmemizi kolaylaştırır. ### Ön Gereksinimler: * İnternet bağlantısı * Tercih edilen bir kod editörü (VS Code önerilir) * Terminal veya komut istemcisi ### Adım Adım Kurulum: 1. **Node.js ve npm Kurulumu:** Node.js'in resmi web sitesinden (nodejs.org) işletim sisteminize uygun (Windows, macOS, Linux) güncel kararlı sürümü indirin ve kurun. Kurulum paketi npm'i de otomatik olarak yükleyecektir. 2026 yılı itibarıyla, LTS (Uzun Süreli Destek) sürümlerini tercih etmek, üretim ortamları için en güvenli yaklaşımdır. Kurulumu doğrulayın: ```bash node -v npm -v ``` Bu komutlar, kurulu Node.js ve npm sürümlerini gösterecektir. Örneğin, `v20.x.x` ve `10.x.x` gibi çıktılar alabilirsiniz. 2. **İlk JavaScript Dosyanızı Oluşturun:** `app.js` adında yeni bir dosya oluşturun ve içine aşağıdaki kodu yazın: ```javascript // app.js console.log("Merhaba Dünya, 2026!"); const bugun = new Date(); console.log(`Bugünün tarihi: ${bugun.getFullYear()}-${bugun.getMonth() + 1}-${bugun.getDate()}`); ``` 3. **Kodu Çalıştırın:** Terminalinizde dosyanın bulunduğu dizine gidin ve aşağıdaki komutu çalıştırın: ```bash node app.js ``` Çıktı olarak `Merhaba Dünya, 2026!` ve güncel tarihi görmelisiniz. 4. **Basit Bir Web Sunucusu (Node.js ile):** Node.js'in sunucu tarafı yeteneklerini göstermek için basit bir HTTP sunucusu oluşturalım. `server.js` adında yeni bir dosya oluşturun: ```javascript // server.js const http = require('http'); // Node.js'in dahili HTTP modülü const hostname = '127.0.0.1'; const port = 3000; const server = http.createServer((req, res) => { res.statusCode = 200; res.setHeader('Content-Type', 'text/plain'); res.end('Merhaba Node.js Dünyası, 2026!\n'); }); server.listen(port, hostname, () => { console.log(`Sunucu http://${hostname}:${port}/ adresinde çalışıyor.`); }); ``` Bu sunucuyu çalıştırmak için: ```bash node server.js ``` Tarayıcınızda `http://127.0.0.1:3000/` adresine giderek "Merhaba Node.js Dünyası, 2026!" mesajını görmelisiniz. ## Temel Kullanım ve Örnekler: JavaScript'in Yapı Taşları [2026] JavaScript'in temel yapılarını ve modern yaklaşımlarını pratik örneklerle inceleyelim. ES2026 ile gelen yeni özellikler, dilin daha temiz ve güçlü olmasını sağlıyor. ### 1. Değişkenler ve Veri Tipleri (let, const, BigInt) **Problem:** Değişken tanımlarken kapsam (scope) ve yeniden atama sorunlarını yönetmek. Sayısal limitlerin ötesindeki büyük tam sayıları işlemek. **Çözüm:** `let` ve `const` ile blok kapsamlı değişkenler tanımlayarak `var`'ın getirdiği sorunlardan kaçınmak. `BigInt` ile rastgele büyüklükteki tam sayıları hassasiyet kaybı olmadan kullanmak. ```javascript // Değişken tanımlama ve kapsam const PI = 3.14159; // Sabit, yeniden atanamaz let sayac = 0; // Değişebilir if (true) { let mesaj = "Blok kapsamlı mesaj"; console.log(mesaj); // Çıktı: Blok kapsamlı mesaj } // console.log(mesaj); // Hata: mesaj tanımlı değil (blok kapsamı dışı) // BigInt örneği (ES2020 ile geldi, 2026'da standart) const buyukSayi = 9007199254740991n; // 'n' eki BigInt olduğunu belirtir const dahaBuyukSayi = buyuknSayi + 1n; console.log(dahaBuyukSayi); // Çıktı: 9007199254740992n ``` ### 2. Fonksiyonlar (Arrow Functions, Varsayılan Parametreler) **Problem:** Fonksiyon yazımını kısaltmak, `this` bağlamı sorunlarını çözmek ve parametreler için varsayılan değerler sağlamak. **Çözüm:** Arrow fonksiyonlar (`=>`) ile daha kısa sözdizimi ve statik `this` bağlamı; varsayılan parametre değerleri ile daha esnek fonksiyonlar. ```javascript // Arrow fonksiyon örneği const toplama = (a, b) => a + b; console.log(toplama(5, 3)); // Çıktı: 8 // Varsayılan parametreler const selamlama = (isim = "Misafir", dil = "Türkçe") => { if (dil === "Türkçe") { return `Merhaba, ${isim}!`; } else if (dil === "English") { return `Hello, ${isim}!`; } return `Bilinmeyen dil için ${isim}.`; }; console.log(selamlama("Burak")); // Çıktı: Merhaba, Burak! console.log(selamlama("John", "English")); // Çıktı: Hello, John! console.log(selamlama()); // Çıktı: Merhaba, Misafir! ``` ### 3. Asenkron Programlama (Promises, async/await) **Problem:** Uzun süren işlemleri (API çağrıları, dosya okuma) uygulamanın ana iş parçacığını (main thread) bloke etmeden yönetmek. **Çözüm:** Promise'ler ile asenkron işlemlerin sonuçlarını yönetmek, `async/await` ile asenkron kodu senkron gibi okunur hale getirmek. ```javascript // Promise örneği const veriGetir = (id) => { return new Promise((resolve, reject) => { setTimeout(() => { if (id === 1) { resolve({ id: 1, ad: "Ürün A" }); } else { reject("Ürün bulunamadı!"); } }, 1000); }); }; veriGetir(1) .then(data => console.log(data)) // Çıktı: { id: 1, ad: 'Ürün A' } (1 saniye sonra) .catch(error => console.error(error)); // async/await örneği async function urunBilgisiGetir(id) { try { const urun = await veriGetir(id); console.log(`Ürün ID: ${urun.id}, Adı: ${urun.ad}`); } catch (error) { console.error(`Hata: ${error}`); } } urunBilgisiGetir(1); // Çıktı: Ürün ID: 1, Adı: Ürün A (1 saniye sonra) urunBilgisiGetir(2); // Çıktı: Hata: Ürün bulunamadı! (1 saniye sonra) ``` ### 4. Modüller (ES Modules) **Problem:** Büyük uygulamalarda kodu düzenli tutmak, bağımlılıkları yönetmek ve global kapsam kirliliğini önlemek. **Çözüm:** ES Modülleri (`import`/`export`) ile kodu küçük, yeniden kullanılabilir parçalara bölmek. ```javascript // matematik.js (modül) export const topla = (a, b) => a + b; export const cikar = (a, b) => a - b; export default class HesapMakinesi { carp(a, b) { return a * b; } bol(a, b) { return a / b; } } ``` ```javascript // app.js (ana dosya) import { topla, cikar } from './matematik.js'; import HesapMakinesi from './matematik.js'; console.log(topla(10, 5)); // Çıktı: 15 console.log(cikar(10, 5)); // Çıktı: 5 const hesaplayici = new HesapMakinesi(); console.log(hesaplayici.carp(10, 5)); // Çıktı: 50 ``` * > **Pro Tip:** Modül kullanımında, `package.json` dosyanızda `"type": "module"` ekleyerek Node.js'in ES Modülleri'ni tanımasını sağlayabilirsiniz. Aksi takdirde, `.mjs` uzantısı kullanmanız gerekebilir. ## İleri Seviye Teknikler: JavaScript'te Ustalaşmak [2026] Deneyimli geliştiriciler için JavaScript, sadece temel yapıları bilmekle kalmayıp, dilin derinliklerine inerek daha karmaşık problemleri çözmeyi ve daha verimli kod yazmayı gerektirir. 2026'da bu teknikler, production ortamlarında kritik öneme sahiptir. ### 1. Web Workers: Paralel İşleme **Problem:** Uzun süren ve yoğun CPU kullanan işlemleri (örneğin, büyük veri setlerini işleme, görüntü işleme) tarayıcının ana iş parçacığını (main thread) bloke etmeden arka planda çalıştırmak. **Çözüm:** Web Workers API'si, JavaScript'in çoklu iş parçacığı benzeri davranış sergilemesini sağlar. Bu sayede ana iş parçacığı kullanıcı arayüzü etkileşimlerine açık kalırken, ağır işlemler arka planda yürütülür. ```javascript // worker.js self.onmessage = function(e) { const sayi = e.data; let sonuc = 0; for (let i = 0; i < sayi; i++) { sonuc += i; } self.postMessage(sonuc); }; ``` ```javascript // main.js (tarayıcı ortamında) if (window.Worker) { const myWorker = new Worker('worker.js'); myWorker.postMessage(1000000000); // 1 milyar sayısını worker'a gönder myWorker.onmessage = function(e) { console.log('Ana iş parçacığından gelen sonuç:', e.data); }; myWorker.onerror = function(error) { console.error('Worker hatası:', error); }; console.log('Ana iş parçacığı çalışmaya devam ediyor...'); } ``` ### 2. Proxy ve Reflect API: Meta Programlama **Problem:** Nesneler üzerindeki temel işlemleri (özellik okuma, yazma, fonksiyon çağırma) yakalamak ve özel davranışlar tanımlamak, ORM (Object-Relational Mapping) veya veri bağlama kütüphaneleri gibi gelişmiş sistemler oluşturmak. **Çözüm:** `Proxy` nesnesi, bir nesnenin temel işlemlerini (get, set, apply vb.) yakalayan ve özel mantık eklemenizi sağlayan bir sarmalayıcı (wrapper) oluşturur. `Reflect` ise bu temel işlemleri programatik olarak çağırmak için bir dizi metot sunar. ```javascript const hedef = { mesaj1: "Merhaba", mesaj2: "Dünya" }; const isleyici = { get(hedef, ozellik, alici) { if (ozellik === 'mesaj2') { return "Proxy tarafından yakalandı: " + Reflect.get(hedef, ozellik, alici); } return Reflect.get(hedef, ozellik, alici); }, set(hedef, ozellik, deger, alici) { if (ozellik === 'mesaj1') { console.log(`Mesaj1 güncelleniyor: ${deger}`); } return Reflect.set(hedef, ozellik, deger, alici); } }; const proxy = new Proxy(hedef, isleyici); console.log(proxy.mesaj1); // Çıktı: Merhaba console.log(proxy.mesaj2); // Çıktı: Proxy tarafından yakalandı: Dünya proxy.mesaj1 = "Selam"; // Çıktı: Mesaj1 güncelleniyor: Selam console.log(proxy.mesaj1); // Çıktı: Selam ``` ### 3. Decorators (ES2026 Standardı): Fonksiyon ve Sınıf Davranışlarını Genişletme **Problem:** Fonksiyonlara veya sınıflara (veya onların metotlarına/özelliklerine) ek davranışlar eklemek (logging, yetkilendirme, önbellekleme) kodu değiştirmeden veya miras hiyerarşisini karmaşıklaştırmadan. **Çözüm:** Decorator'lar, ES2026 ile standartlaşan ve bir fonksiyonu, sınıfı veya sınıf üyesini sarmalayarak davranışını değiştiren özel tipte fonksiyonlardır. Bu, AOP (Aspect-Oriented Programming) benzeri yaklaşımlara olanak tanır. ```javascript // loglama decorator'ı function loglama(target, context) { const methodName = String(context.name); return function(...args) { console.log(`[LOG] ${methodName} çağrıldı, argümanlar: ${JSON.stringify(args)}`); const result = target.apply(this, args); console.log(`[LOG] ${methodName} tamamlandı, sonuç: ${JSON.stringify(result)}`); return result; }; } class Hesaplayici { @loglama topla(a, b) { return a + b; } cikar(a, b) { return a - b; } } const hesap = new Hesaplayici(); console.log(hesap.topla(5, 3)); // Çıktı: [LOG] topla çağrıldı..., [LOG] topla tamamlandı..., 8 console.log(hesap.cikar(10, 2)); // Çıktı: 8 (loglama yok) ``` * > **Uyarı:** Decorator'lar ES2026 standardında olmasına rağmen, bazı ortamlarda hala Babel gibi transpiler'lar gerektirebilir. Projenizin derleme zincirini kontrol edin. ## Best Practices & Anti-Patterns: Temiz ve Güvenli JavaScript [2026] 10 yılı aşkın tecrübemle, production ortamlarında karşılaştığım en kritik derslerden biri, iyi kodlama alışkanlıklarının ve güvenlik pratiklerinin ne kadar önemli olduğudur. 2026'da modern JavaScript geliştirme için olmazsa olmaz bazı kurallar: * ✅ **`const` ve `let` Kullanın, `var`'dan Kaçının:** `var`'ın fonksiyon kapsamı ve hoisting davranışları beklenmedik hatalara yol açabilir. `const` (sabitler için) ve `let` (değişkenler için) blok kapsamlıdır ve daha öngörülebilir davranış sunar. * ❌ **Global Kapsamı Kirletmeyin:** Gereksiz yere global değişkenler tanımlamaktan kaçının. Modüller ve IIFE (Immediately Invoked Function Expressions) kullanarak değişkenlerinizi kendi kapsamlarında tutun. * ✅ **Linter ve Formatter Kullanın (ESLint, Prettier):** Kod kalitesini ve tutarlılığını sağlamak için ESLint gibi linter'lar ve Prettier gibi formatter'lar kullanın. Bu araçlar, ekibinizdeki tüm geliştiricilerin aynı kodlama standartlarına uymasını sağlar ve potansiyel hataları erken aşamada yakalar. * ❌ **`eval()` Kullanmaktan Kaçının:** `eval()` fonksiyonu güvenlik açıkları yaratabilir ve performans sorunlarına yol açabilir. Dinamik kod çalıştırma ihtiyacınız varsa, daha güvenli alternatifler arayın (örneğin, JSON.parse() veya fonksiyon oluşturma). * ✅ **Asenkron Kodda Hata Yönetimi Yapın:** Promise'ler için `.catch()` ve `async/await` için `try...catch` blokları kullanarak asenkron işlemlerden kaynaklanan hataları doğru bir şekilde ele alın. Aksi takdirde, uygulamalarınız beklenmedik şekilde çökebilir. * ❌ **Bloke Edici Senkron İşlemlerden Kaçının (Node.js):** Node.js'in tek iş parçacıklı doğası gereği, uzun süren senkron işlemler (örneğin, `fs.readFileSync`) uygulamanın tüm iş parçacığını bloke eder ve performansı düşürür. Mümkün olduğunca asenkron API'leri tercih edin. * ✅ **Bağımlılıkları Güncel Tutun:** `npm audit` veya `yarn audit` komutlarını düzenli olarak çalıştırarak bağımlılıklarınızdaki güvenlik açıklarını kontrol edin ve güncelleyin. 2026'da siber güvenlik tehditleri giderek artıyor. * ❌ **XSS (Cross-Site Scripting) ve CSRF (Cross-Site Request Forgery) Zafiyetlerine Dikkat Edin:** Kullanıcı girdilerini her zaman sanitize edin ve HTML içeriği oluştururken dikkatli olun. Sunucu tarafında CSRF token'ları kullanarak bu tür saldırıları önleyin. * ✅ **Modüler ve Yeniden Kullanılabilir Kod Yazın:** Kodu küçük, bağımsız modüllere ayırın. Bu, test edilebilirliği artırır, bakımı kolaylaştırır ve kodun farklı projelerde yeniden kullanılmasına olanak tanır. * ❌ **Gereksiz `console.log` Kullanımından Kaçının (Production):** Geliştirme sırasında faydalı olsa da, `console.log` çağrıları üretim ortamında performansı olumsuz etkileyebilir ve hassas bilgileri açığa çıkarabilir. Üretim dağıtımından önce bunları kaldırın veya bir logger kütüphanesi kullanın. ## Yaygın Hatalar ve Çözümleri: JavaScript Sorun Giderme [2026] JavaScript geliştirirken karşılaşabileceğiniz en yaygın hataları ve bunların etkili çözümlerini bilmek, sizi saatlerce süren hata ayıklama süreçlerinden kurtarabilir. İşte Stack Overflow'da sıkça karşılaşılan bazı senaryolar: ### 1. `TypeError: Cannot read properties of undefined (reading 'x')` * **Problem:** Tanımsız (undefined) bir değerin özelliklerine erişmeye çalışmak. Genellikle bir API çağrısından veri beklerken veya bir nesnenin mevcut olmayan bir özelliğine erişmeye çalışırken ortaya çıkar. * **Sebep:** Nesne henüz yüklenmemiş olabilir, API çağrısı başarısız olmuş olabilir veya nesne yapısı beklendiği gibi değildir. * **Çözüm:** Özelliğe erişmeden önce nesnenin veya özelliğin varlığını kontrol edin. Opsiyonel zincirleme (`?.`) veya mantıksal AND (`&&`) operatörlerini kullanın. ```javascript // Hatalı: // const kullaniciAdi = kullanici.profil.ad; // if (kullanici === undefined || kullanici.profil === undefined) ... // Doğru (Opsiyonel Zincirleme ile): const kullanici = {}; // veya undefined const kullaniciAdi = kullanici?.profil?.ad; // undefined döner, hata vermez console.log(kullaniciAdi); // Çıktı: undefined // Doğru (Mantıksal AND ile): const urun = null; const urunFiyat = urun && urun.fiyat; // null döner, hata vermez console.log(urunFiyat); // Çıktı: null ``` ### 2. `ReferenceError: x is not defined` * **Problem:** Tanımlanmamış bir değişkene veya fonksiyona erişmeye çalışmak. * **Sebep:** Değişken veya fonksiyon yanlış kapsamda (scope) çağrılmış olabilir, yazım hatası olabilir veya tanımlanmadan önce kullanılmaya çalışılmıştır. * **Çözüm:** Değişkenin veya fonksiyonun doğru kapsamda tanımlandığından ve çağrıldığından emin olun. Yazım hatalarını kontrol edin. `let` ve `const` kullanıyorsanız, değişkeni kullanmadan önce tanımladığınızdan emin olun. ```javascript // Hatalı: // console.log(degisken); // let degisken = 10; // Doğru: let degisken = 10; console.log(degisken); // Çıktı: 10 // Yanlış kapsam: function testKapsam() { const icDegisken = "Merhaba"; } // console.log(icDegisken); // ReferenceError ``` ### 3. Asenkron İşlemlerde Yakalanmayan Hatalar (`UnhandledPromiseRejection`) * **Problem:** Promise'lerde veya `async/await` yapılarında bir hata meydana geldiğinde bu hatanın `.catch()` bloğu veya `try...catch` ile yakalanmaması. * **Sebep:** Asenkron fonksiyonlarda hata yönetimi unutulmuş veya eksik yapılmıştır. * **Çözüm:** Her Promise zincirinin sonunda bir `.catch()` bloğu bulundurun veya `async` fonksiyonları `try...catch` blokları içine alın. Node.js'te global `unhandledRejection` olayını dinlemek de bir seçenektir, ancak her zaman hatayı oluştuğu yerde yakalamak en iyisidir. ```javascript // Hatalı (hata yakalanmazsa UnhandledPromiseRejection): // new Promise((resolve, reject) => { // reject("Bir hata oluştu!"); // }).then(data => console.log(data)); // Doğru (Promise ile): new Promise((resolve, reject) => { reject("Bir hata oluştu!"); }) .then(data => console.log(data)) .catch(error => console.error("Yakalanan Promise hatası:", error)); // Doğru (async/await ile): async function hataOrnegi() { try { await Promise.reject("Async hatası!"); } catch (error) { console.error("Yakalanan Async hatası:", error); } } hataOrnegi(); ``` ## Performans Optimizasyonu: Hızlı ve Verimli JavaScript [2026] JavaScript uygulamalarının performansı, kullanıcı deneyimi ve SEO açısından kritik öneme sahiptir. 2026'da, V8 motoru ve tarayıcı optimizasyonları sayesinde JavaScript daha hızlı çalışsa da, geliştirici olarak yapabileceğimiz birçok optimizasyon bulunmaktadır. Production ortamında %40'a varan performans artışları gözlemlediğim bazı kanıtlanmış teknikler: ### 1. Kod Bölümleme (Code Splitting) ve Tembel Yükleme (Lazy Loading) **Problem:** Büyük JavaScript bundle dosyaları, uygulamanın ilk yüklenme süresini artırır. **Çözüm:** Uygulamanızın tüm kodunu tek bir büyük dosyada göndermek yerine, kodu mantıksal parçalara (chunk'lara) bölün ve yalnızca ihtiyaç duyulduğunda yükleyin. Bu, özellikle tek sayfa uygulamaları (SPA) için önemlidir. * **Code Splitting:** Webpack, Rollup gibi bundler'lar otomatik olarak kod bölümleme yapabilir. * **Lazy Loading:** React.lazy(), Vue'nin asenkron bileşenleri veya dinamik `import()` fonksiyonu ile bileşenleri veya modülleri sadece ihtiyaç anında yükleyin. ```javascript // React örneği ile tembel yükleme import { lazy, Suspense } from 'react'; const GecYuklenenBilesen = lazy(() => import('./GecYuklenenBilesen')); function Uygulama() { return ( }>