JavaScript Rehberi: Modern Web ve Full Stack Programlama
Yazar: Burak Balkı | Kategori: Full Stack Development | Okuma Süresi: 7 dk
JavaScript'in çalışma mantığından asenkron programlamaya, V8 motorundan performans optimizasyonuna kadar tüm teknik detayları içeren kapsamlı rehber.
## JavaScript: Modern Web Ekosisteminin Temel Taşı
**JavaScript**, günümüz web teknolojilerinin kalbinde yer alan, hem istemci hem de sunucu tarafında çalışan çok yönlü bir programlama dilidir. Başlangıçta basit etkileşimler için tasarlanmış olsa da, günümüzde karmaşık kurumsal uygulamaların ve yüksek performanslı sistemlerin temelini oluşturur.
### JavaScript Motoru ve Çalışma Prensibi
JavaScript'in nasıl çalıştığını anlamak için **V8 Engine** gibi motorların mimarisini bilmek gerekir. JavaScript, **Just-In-Time (JIT)** derleme yöntemini kullanır. Bu süreçte kod, çalışma anında makine koduna dönüştürülür. Bellek yönetimi ise **Stack** ve **Heap** yapıları üzerinden yürütülür.
| Kavram | Açıklama |
| :--- | :--- |
| **Call Stack** | Fonksiyon çağrılarının ve yerel değişkenlerin tutulduğu LIFO yapısı. |
| **Memory Heap** | Nesnelerin ve dinamik verilerin depolandığı bellek alanı. |
| **Garbage Collector** | Kullanılmayan belleği otomatik olarak temizleyen mekanizma. |
## JavaScript Veri Tipleri ve Değişken Yönetimi
JavaScript'te değişken tanımlarken `var`, `let` ve `const` anahtar kelimeleri kullanılır. Modern standartlarda `var` kullanımı, **scope** (kapsam) sorunları nedeniyle tercih edilmemektedir.
```javascript
// Değişken Tanımlama Örnekleri
const pi = 3.14159; // Sabit değerler için
let counter = 0; // Değişebilir değerler için
// İlkel (Primitive) Tipler
let name = "Kurumsal Proje";
let isActive = true;
let data = null;
let undefinedValue;
```
> **Not:** `const` ile tanımlanan bir nesnenin içeriği değiştirilebilir ancak referansı değiştirilemez. Bu, mutability (değişebilirlik) kavramını anlamak için kritiktir.
## Scope, Hoisting ve Closures Mekanizmaları
JavaScript'te **Scope**, bir değişkenin erişilebilir olduğu alanı belirler. **Hoisting**, değişken ve fonksiyon tanımlamalarının derleme aşamasında en üste taşınmasıdır. **Closure** ise bir fonksiyonun, tanımlandığı dış kapsamdaki değişkenlere, o kapsam kapansa bile erişebilmesidir.
```javascript
function createCounter() {
let count = 0;
return function() {
count++;
return count;
};
}
const increment = createCounter();
console.log(increment()); // 1
console.log(increment()); // 2
```
## Modern JavaScript: ES6 ve Sonrası Yenilikler
ES6 (ECMAScript 2015) ile gelen özellikler, JavaScript yazım standartlarını kökten değiştirmiştir. **Arrow Functions**, **Destructuring**, **Template Literals** ve **Spread/Rest** operatörleri kodun okunabilirliğini artırır.
```javascript
// Arrow Function ve Destructuring
const user = { id: 1, name: 'Ahmet', role: 'Admin' };
const getDetails = ({ name, role }) => `Kullanıcı: ${name}, Rol: ${role}`;
console.log(getDetails(user));
// Spread Operatörü
const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5];
```
## Asenkron Programlama: Promises ve Async/Await
JavaScript tek iş parçacıklı (**single-threaded**) bir dildir. Bu nedenle uzun süren işlemler (API çağrıları, dosya okuma) ana iş parçacığını engellememelidir. **Asenkron programlama** bu noktada devreye girer.
```javascript
// Async/Await Kullanımı
async function fetchUserData(userId) {
try {
const response = await fetch(`https://api.example.com/users/${userId}`);
if (!response.ok) throw new Error('Veri alınamadı');
const data = await response.json();
return data;
} catch (error) {
console.error('Hata:', error.message);
}
}
```
## Event Loop ve Concurrency Modeli
JavaScript, eşzamanlılık (concurrency) modelini **Event Loop** sayesinde yönetir. Event Loop, Call Stack boşaldığında **Callback Queue** ve **Microtask Queue** içerisindeki görevleri sırayla Stack'e taşır.
1. Call Stack'teki işlemler tamamlanır.
2. Microtask Queue (Promises) kontrol edilir ve boşaltılır.
3. Callback Queue (setTimeout, DOM events) kontrol edilir.
4. Render işlemleri gerçekleştirilir.
## Nesne Yönelimli Programlama (OOP) ve Prototipler
JavaScript, prototip tabanlı bir dildir. ES6 ile gelen `class` yapısı, aslında prototip zinciri üzerine inşa edilmiş bir **syntactic sugar** (yazım kolaylığı) işlemidir.
```javascript
class BaseService {
constructor(baseUrl) {
this.baseUrl = baseUrl;
}
logConnection() {
console.log(`Bağlanıyor: ${this.baseUrl}`);
}
}
class UserService extends BaseService {
getUser(id) {
super.logConnection();
return { id, name: 'Sistem Kullanıcısı' };
}
}
const service = new UserService('api.v1.com');
```
## Modüler Yapı ve Bağımlılık Yönetimi
Büyük ölçekli uygulamalarda kodun parçalara ayrılması yönetilebilirliği artırır. **ES Modules (ESM)** standartları ile `import` ve `export` kullanımı yaygınlaşmıştır.
```javascript
// mathUtils.js
export const add = (a, b) => a + b;
export default class Calculator {}
// main.js
import Calculator, { add } from './mathUtils.js';
```
## Performans Optimizasyonu ve Best Practices
JavaScript performansını artırmak için şu teknikler uygulanmalıdır:
- **Debouncing ve Throttling:** Sık tetiklenen eventleri (scroll, resize) sınırlayın.
- **Lazy Loading:** Gereksiz modülleri sadece ihtiyaç anında yükleyin.
- **Memory Leak Önleme:** Event listener'ları işleri bittiğinde `removeEventListener` ile kaldırın.
- **Immutable Veri Yapıları:** Durum yönetiminde veriyi doğrudan değiştirmek yerine kopyasını oluşturun.
## Sık Yapılan Hatalar ve Çözümleri
1. **`this` Bağlamını Kaybetmek:** Arrow function kullanarak veya `bind()` metoduyla bağlamı koruyun.
2. **Floating Point Hataları:** `0.1 + 0.2 !== 0.3` durumu için hassas hesaplamalarda kütüphane kullanın veya tam sayılara çevirin.
3. **Callback Hell:** Derin iç içe geçmiş fonksiyonlar yerine `async/await` yapısına geçin.
## JavaScript Geliştirme Araçları
Modern bir geliştirici şu araçlara hakim olmalıdır:
- **Linter:** ESLint (Kod standartları için)
- **Formatter:** Prettier (Kod düzeni için)
- **Debugger:** Chrome DevTools
- **Package Manager:** NPM veya PNPM
## Sık Sorulan Sorular
1. **JavaScript ile Java aynı mıdır?**
Hayır, isim benzerliği dışında tamamen farklı dillerdir. Java derlenen bir dildir, JavaScript ise yorumlanan/JIT derlenen bir dildir.
2. **TypeScript kullanmalı mıyım?**
Büyük ölçekli projelerde tip güvenliği ve hata payını azaltmak için TypeScript şiddetle önerilir.
3. **Node.js nedir?**
JavaScript'in tarayıcı dışında, sunucu tarafında çalışmasını sağlayan bir çalışma ortamıdır (runtime).
4. **Event Delegation nedir?**
Alt elemanların her birine ayrı ayrı event eklemek yerine, ortak bir üst elemana tek bir event ekleme tekniğidir.
5. **Strict Mode nedir?**
`'use strict';` ifadesiyle etkinleştirilen, JavaScript'in daha katı hata kontrolü yapmasını sağlayan moddur.
## Özet ve Sonuç
JavaScript, basit scriptlerden karmaşık sistemlere kadar uzanan geniş bir yelpazede hüküm sürmektedir. **Event Loop**, **Asenkron yapı** ve **Modern ES6+** standartlarına hakim olmak, profesyonel bir yazılımcı için zorunluluktur. Bu rehberde ele alınan teknik detaylar, sağlam ve ölçeklenebilir uygulamalar geliştirmeniz için bir temel oluşturacaktır.