JavaScript Rehberi | Burak Demiröz

JavaScript Nedir?

JavaScript, web tarayıcılarında çalışan, yüksek seviyeli, yorumlamalı bir programlama dilidir. 1995 yılında Brendan Eich tarafından Netscape için 10 günde geliştirilmiştir. Bugün web'in vazgeçilmez dili olarak frontend, backend (Node.js), mobil (React Native) ve masaüstü (Electron) uygulamalarında kullanılmaktadır.

JavaScript'in Temel Özellikleri:

• Yorumlamalı (interpreted) dil - derlemeye gerek yok
• Dinamik tipleme - değişken tipleri otomatik belirlenir
• Prototype-based nesne yönelimli
• First-class functions - fonksiyonlar değer olarak kullanılabilir
• Event-driven ve asenkron programlama
• Platform bağımsız - her modern tarayıcıda çalışır

JavaScript vs Java

Yaygın Yanılgı: İsimleri benzer olsa da JavaScript ve Java tamamen farklı dillerdir!

JavaScript: Web için, dinamik, yorumlamalı
Java: Genel amaçlı, statik tipli, derlenmiş

İsim benzerliği sadece 1995'teki pazarlama stratejisinden kaynaklanır.

JavaScript Nerede Çalışır?

// 1. Tarayıcıda (Browser)
const button = document.querySelector('button');
button.addEventListener('click', () => alert('Clicked!'));
// 2. Sunucuda (Node.js)
const express = require('express');
const app = express();
app.listen(3000);

Temel Söz Dizimi

JavaScript Kodunu Çalıştırma:

// 1. HTML içinde <script> etiketi
<script>
  console.log('Merhaba Dünya!');
</script>
// 2. Harici dosya
<script src="script.js"></script>
// 3. Tarayıcı konsolunda (F12 veya Ctrl+Shift+J)
console.log('Test');

Yorumlar (Comments):

// Tek satır yorum
/* 
   Çok satırlı
   yorum bloku
*/

Noktalı Virgül (Semicolon):

let x = 5;  // Noktalı virgül önerilir
let y = 10  // Opsiyonel (ASI - Automatic Semicolon Insertion)

En İyi Uygulama: Noktalı virgül kullanın! ASI'ye güvenmek beklenmedik hatalara yol açabilir. Modern linter'lar (ESLint) bunu zorunlu kılar.

Console Metotları:

console.log('Normal mesaj');
console.error('Hata mesajı');
console.warn('Uyarı mesajı');
console.info('Bilgi mesajı');
console.table([{name: 'Ali', age: 25}]); // Tablo olarak göster
console.clear(); // Konsolu temizle

Değişkenler (Variables)

Değişken Tanımlama: var, let, const

// var - Eski yöntem (kullanılması önerilmez)
  sehir: 'İstanbul',
  selamla: function() {
    return `Merhaba, ben ${this.isim}`;
  }
};
// Kısa metot söz dizimi (ES6)
const kisi2 = {
  isim: 'Veli',
  selamla() {
    return `Merhaba, ben ${this.isim}`;
  }
};

Obje Erişim:

const kisi = { isim: 'Ali', yas: 25 };
// Dot notation
console.log(kisi.isim); // "Ali"
// Bracket notation
console.log(kisi['yas']); // 25
// Dinamik erişim
const prop = 'isim';
console.log(kisi[prop]); // "Ali"

Obje Metotları:

const kisi = { isim: 'Ali', yas: 25, sehir: 'İstanbul' };
// Anahtarları al
Object.keys(kisi);   // ["isim", "yas", "sehir"]
// Değerleri al
Object.values(kisi); // ["Ali", 25, "İstanbul"]
// Anahtar-değer çiftleri
Object.entries(kisi); // [["isim", "Ali"], ["yas", 25], ...]
// Obje birleştir
const ek = { meslek: 'Mühendis' };
const birlesmis = Object.assign({}, kisi, ek);
// Spread ile birleştir (modern)
const birlesmis2 = { ...kisi, ...ek };

Obje Destructuring:

const kisi = { isim: 'Ali', yas: 25, sehir: 'İstanbul' };
// Temel destructuring
const { isim, yas } = kisi;
console.log(isim); // "Ali"
// Farklı isimle
const { isim: ad, yas: yil } = kisi;
console.log(ad); // "Ali"
// Varsayılan değer
const { isim, meslek = 'Bilinmiyor' } = kisi;
console.log(meslek); // "Bilinmiyor"

Computed Property Names:

const propName = 'yas';
const kisi = {
  isim: 'Ali',
  [propName]: 25,  // Dinamik anahtar
  ['tam' + 'Isim']: 'Ali Yılmaz'
};
console.log(kisi); // {isim: "Ali", yas: 25, tamIsim: "Ali Yılmaz"}

this Anahtar Kelimesi:

const kisi = {
  isim: 'Ali',
  selamla() {
    console.log(`Merhaba, ben ${this.isim}`);
  },
  hataVer: () => {
    console.log(this.isim); // undefined (arrow function)
  }
};
kisi.selamla(); // "Merhaba, ben Ali"

Arrow Function ve this:
Arrow function'lar kendi this'e sahip değildir, üst scope'un this'ini kullanır. Bu yüzden obje metotlarında regular function kullanın!

Optional Chaining (?.):

const user = {
  address: {
    city: 'İstanbul'
  }
};
// Eski yöntem
const city = user.address && user.address.city;
// Modern yöntem (ES2020)
const city2 = user?.address?.city;
const zipCode = user?.address?.zipCode; // undefined (hata vermez)

DOM Manipülasyonu

Element Seçme:

// ID ile
const element = document.getElementById('myId');
// Class ile
const elements = document.getElementsByClassName('myClass');
// Tag ile
const divs = document.getElementsByTagName('div');
// CSS selector ile (modern)
const element2 = document.querySelector('.myClass');
const elements2 = document.querySelectorAll('.myClass');

İçerik Değiştirme:

const div = document.querySelector('#myDiv');
// Metin içeriği
div.textContent = 'Yeni metin';
// HTML içeriği
div.innerHTML = '<strong>Kalın</strong> metin';
// Input değeri
const input = document.querySelector('input');
input.value = 'Yeni değer';

Stil Değiştirme:

const div = document.querySelector('div');
// Inline stil
div.style.color = 'red';
div.style.backgroundColor = 'yellow';
div.style.fontSize = '20px';
// CSS class ekle/çıkar (önerilen)
div.classList.add('active');
div.classList.remove('hidden');
div.classList.toggle('highlight');
div.classList.contains('active'); // true/false

Attribute İşlemleri:

const img = document.querySelector('img');
// Attribute al/set et
const src = img.getAttribute('src');
img.setAttribute('src', 'yeni.jpg');
img.removeAttribute('alt');
// Direkt property erişimi
img.src = 'yeni.jpg';
img.alt = 'Açıklama';

Element Oluşturma ve Ekleme:

// Yeni element oluştur
const newDiv = document.createElement('div');
newDiv.textContent = 'Yeni içerik';
newDiv.classList.add('box');
// Parent'a ekle
const container = document.querySelector('.container');
container.appendChild(newDiv);     // Sona ekle
container.prepend(newDiv);        // Başa ekle
container.append(newDiv);         // Sona ekle (modern)
// Element sil
newDiv.remove();
// veya
container.removeChild(newDiv);

Traversing (Gezinme):

const element = document.querySelector('.item');
// Parent
const parent = element.parentElement;
// Children
const children = element.children;
const firstChild = element.firstElementChild;
const lastChild = element.lastElementChild;
// Siblings
const next = element.nextElementSibling;
const prev = element.previousElementSibling;
// Closest parent (yukarı ara)
const container = element.closest('.container');

Modern DOM Manipülasyon:
• querySelector/querySelectorAll kullanın (CSS selector gücü)
• classList kullanın (style yerine)
• innerHTML yerine textContent (güvenlik)
• insertAdjacentHTML ile daha esnek ekleme

Event Handling

Event Listener Ekleme:

const button = document.querySelector('button');
// addEventListener (önerilen)
button.addEventListener('click', function() {
  console.log('Tıklandı!');
});
// Arrow function ile
button.addEventListener('click', () => {
  console.log('Tıklandı!');
});
// Event listener kaldır
const handleClick = () => console.log('Clicked');
button.addEventListener('click', handleClick);
button.removeEventListener('click', handleClick);

Yaygın Event Tipleri:

// Mouse events
element.addEventListener('click', handler);
element.addEventListener('dblclick', handler);
element.addEventListener('mouseenter', handler);
element.addEventListener('mouseleave', handler);
element.addEventListener('mousemove', handler);
// Keyboard events
element.addEventListener('keydown', handler);
element.addEventListener('keyup', handler);
element.addEventListener('keypress', handler);
// Form events
form.addEventListener('submit', handler);
input.addEventListener('input', handler);
input.addEventListener('change', handler);
input.addEventListener('focus', handler);
input.addEventListener('blur', handler);
// Window events
window.addEventListener('load', handler);
window.addEventListener('resize', handler);
window.addEventListener('scroll', handler);

Event Object:

button.addEventListener('click', (event) => {
  console.log(event.type);        // "click"
  console.log(event.target);      // Tıklanan element
  console.log(event.currentTarget); // Event listener'ı olan element
  
  // Mouse pozisyonu
  console.log(event.clientX, event.clientY);
  
  // Varsayılan davranışı engelle
  event.preventDefault();
  
  // Event yayılımını durdur
  event.stopPropagation();
});

Event Delegation:

// Parent'a listener ekle, child'ları dinle
const ul = document.querySelector('ul');
ul.addEventListener('click', (e) => {
  // Sadece li elementleri için
  if (e.target.matches('li')) {
    console.log('Li tıklandı:', e.target.textContent);
  }
})                    
                            break Kullanmayı Unutmayın!

                            switch-case'de break kullanmazsanız, sonraki case'ler de çalışır (fall-through). Bu genellikle istenmeyen bir durumdur.
                        

Döngüler (Loops)

for Döngüsü:

for (let i = 0; i < 5; i++) {
  console.log(i); // 0, 1, 2, 3, 4
}

while Döngüsü:

let i = 0;
while (i < 5) {
  console.log(i);
  i++;
}

do-while Döngüsü:

let i = 0;
do {
  console.log(i);
  i++;
} while (i < 5);

for...of Döngüsü (Dizi/İterable için):

const renkler = ['kırmızı', 'yeşil', 'mavi'];
for (const renk of renkler) {
  console.log(renk);
}

for...in Döngüsü (Obje özellikleri için):

const kisi = {
  isim: 'Ali',
  yas: 25,
  sehir: 'İstanbul'
};
for (const anahtar in kisi) {
  console.log(`${anahtar}: ${kisi[anahtar]}`);
}

break ve continue:

// break - döngüyü sonlandır
for (let i = 0; i < 10; i++) {
  if (i === 5) break;
  console.log(i); // 0, 1, 2, 3, 4
}
// continue - sonraki iterasyona geç
for (let i = 0; i < 5; i++) {
  if (i === 2) continue;
  console.log(i); // 0, 1, 3, 4 (2 atlandı)
}

Modern Alternatifler:
• Diziler için: forEach(), map(), filter(), reduce()
• for...of diziler için, for...in objeler için kullanın
• Performans kritikse klasik for döngüsü en hızlısıdır

Fonksiyonlar (Functions)

Function Declaration:

function selamla(isim) {
  return `Merhaba, ${isim}!`;
}
console.log(selamla('Ali')); // "Merhaba, Ali!"

Function Expression:

const topla = function(a, b) {
  return a + b;
};
console.log(topla(5, 3)); // 8

Arrow Function (ES6):

// Tek satır, implicit return
const kare = x => x * x;
// Çok parametreli
const topla = (a, b) => a + b;
// Çok satırlı, explicit return
const islemYap = (a, b) => {
  const sonuc = a + b;
  return sonuc * 2;
};

Varsayılan Parametreler (Default Parameters):

function selamla(isim = 'Misafir') {
  return `Merhaba, ${isim}!`;
}
console.log(selamla());        // "Merhaba, Misafir!"
console.log(selamla('Ali'));  // "Merhaba, Ali!"

Rest Parameters (...):

function topla(...sayilar) {
  return sayilar.reduce((toplam, sayi) => toplam + sayi, 0);
}
console.log(topla(1, 2, 3, 4, 5)); // 15

Callback Functions:

function islemYap(a, b, callback) {
  const sonuc = callback(a, b);
  return sonuc;
}
const sonuc1 = islemYap(5, 3, (a, b) => a + b);
const sonuc2 = islemYap(5, 3, (a, b) => a * b);
console.log(sonuc1); // 8
console.log(sonuc2); // 15

IIFE (Immediately Invoked Function Expression):

(function() {
  console.log('Bu fonksiyon hemen çalışır!');
})();
// Arrow function ile IIFE
(() => {
  console.log('Modern IIFE');
})();

Arrow Function vs Regular Function

Farklar:
• Arrow function'lar kendi this'e sahip değildir
• Arrow function'lar constructor olamaz
• Arrow function'larda arguments objesi yok
• Arrow function söz dizimi daha kısa

Ne zaman kullanmalı?
Callback'lerde ve kısa fonksiyonlarda arrow function tercih edin.

Diziler (Arrays)

Dizi Oluşturma:

// Literal notation
const sayilar = [1, 2, 3, 4, 5];
const karisik = [1, 'iki', true, null, {isim: 'Ali'}];
// Array constructor
const dizi = new Array(5); // 5 elemanlı boş dizi

Dizi Erişim ve Değiştirme:

const meyveler = ['elma', 'armut', 'muz'];
console.log(meyveler[0]); // "elma"
meyveler[1] = 'çilek'; // Değiştir
console.log(meyveler.length); // 3

Temel Dizi Metotları:

const arr = [1, 2, 3];
// Ekleme/Çıkarma
arr.push(4);         // Sona ekle: [1, 2, 3, 4]
arr.pop();           // Sondan çıkar: [1, 2, 3]
arr.unshift(0);     // Başa ekle: [0, 1, 2, 3]
arr.shift();        // Baştan çıkar: [1, 2, 3]
// Birleştirme ve Bölme
const arr2 = [4, 5];
const birlesmis = arr.concat(arr2); // [1, 2, 3, 4, 5]
const parcali = arr.slice(1, 3);   // [2, 3]
arr.splice(1, 2, 'a', 'b'); // [1, 'a', 'b']

Dizi İterasyon Metotları:

const sayilar = [1, 2, 3, 4, 5];
// forEach - her eleman için işlem
sayilar.forEach(sayi => console.log(sayi));
// map - yeni dizi oluştur
const kareler = sayilar.map(sayi => sayi * sayi);
// [1, 4, 9, 16, 25]
// filter - koşula uyan elemanlar
const ciftler = sayilar.filter(sayi => sayi % 2 === 0);
// [2, 4]
// reduce - tek değere indir
const toplam = sayilar.reduce((acc, sayi) => acc + sayi, 0);
// 15
// find - koşula uyan ilk eleman
const bulunan = sayilar.find(sayi => sayi > 3);
// 4
// some - en az bir eleman koşulu sağlar mı?
const varMi = sayilar.some(sayi => sayi > 4);
// true
// every - tüm elemanlar koşulu sağlar mı?
const tumü = sayilar.every(sayi => sayi > 0);
// true

Dizi Sıralama ve Arama:

const sayilar = [3, 1, 4, 1, 5];
// Sıralama
sayilar.sort();                    // [1, 1, 3, 4, 5]
sayilar.reverse();                // [5, 4, 3, 1, 1]
sayilar.sort((a, b) => a - b);   // Sayısal sıralama
// Arama
sayilar.indexOf(4);           // 2 (index)
sayilar.includes(3);          // true

Spread Operator (...):

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
// Dizileri birleştir
const birlesmis = [...arr1, ...arr2];
// [1, 2, 3, 4, 5, 6]
// Dizi kopyala
const kopya = [...arr1];

Destructuring:

const renkler = ['kırmızı', 'yeşil', 'mavi'];
const [ilk, ikinci, ucuncu] = renkler;
console.log(ilk); // "kırmızı"
// Bazı elemanları atla
const [, , son] = renkler;
console.log(son); // "mavi"
// Rest pattern
const [bas, ...geri] = renkler;
console.log(geri); // ["yeşil", "mavi"]

Performans İpuçları:
• push/pop baştan ekleme/çıkarmadan (shift/unshift) daha hızlıdır
• Büyük dizilerde splice yerine filter kullanın
• map, filter, reduce immutable işlemlerdir (orijinal diziyi değiştirmez)
• Zincirleme metot kullanırken dikkatli olun (performans)

Objeler (Objects)

Obje Oluşturma:

// Object literal
const kisi = {
  isim: 'Ali',
  yas: 25,
  sehir: // var - Eski yöntem (kullanılmamalı)
var eski = 'eski yöntem';
// let - Yeniden atanabilir (block-scoped)
let isim = 'Ali';
isim = 'Veli'; // OK
// const - Yeniden atanamaz (sabit)
const PI = 3.14159;
// PI = 3.14; // ERROR!

                            Değişken Adlandırma Kuralları:
                            • Harf, rakam, _ veya $ içerebilir
• Rakam ile başlayamaz
• Büyük/küçük harf duyarlıdır (myVar ≠ myvar)
• Rezerve kelimeler kullanılamaz (let, const, if, for, vb.)
• camelCase kullanın: myVariableName

                        
var vs let vs const:
                            
                            Karşılaştırma
                        

                            var: Function-scoped, hoisting var, yeniden tanımlanabilir (kullanmayın!)

                            let: Block-scoped, yeniden atanabilir, modern tercih

                            const: Block-scoped, yeniden atanamaz, obje/array içeriği değişebilir


                            Öneri: Varsayılan olarak const kullanın, gerekirse let, var kullanmayın!
                        
Scope (Kapsam):// Global scope
let global = 'heryerde';
function ornek() {
  // Function scope
  let fonksiyon = 'sadece burada';
  
  if (true) {
    // Block scope
    let blok = 'sadece if içinde';
    console.log(global); // OK
  }
  // console.log(blok); // ERROR!
}

                            Modern JavaScript Best Practice:

                            • Değişkenleri kullanacağınız yere en yakın tanımlayın

                            • const kullanın, mutasyona ihtiyaç varsa let kullanın

                            • Global değişkenlerden kaçının

                            • Anlamlı isimler verin: x yerine userAge
                        

Veri Tipleri (Data Types)

Primitive (İlkel) Tipler:

// 1. String (Metin)
let isim = "Ali";
let soyad = 'Yılmaz';
let mesaj = `Merhaba ${isim}!`; // Template literal
// 2. Number (Sayı)
let tam = 42;
let ondalik = 3.14;
let buyuk = 1e6; // 1000000
// 3. Boolean (Mantıksal)
let aktif = true;
let pasif = false;
// 4. Undefined (Tanımsız)
let tanimsiz;
console.log(tanimsiz); // undefined
// 5. Null (Boş)
let bos = null;
// 6. Symbol (ES6+)
let sembol = Symbol('açıklama');
// 7. BigInt (Çok büyük sayılar)
let cokBuyuk = 9007199254740991n;

Reference (Referans) Tipler:

// 1. Object (Obje)
let kisi = {
  isim: 'Ali',
  yas: 25
};
// 2. Array (Dizi)
let renkler = ['kırmızı', 'yeşil', 'mavi'];
// 3. Function (Fonksiyon)
let selamla = function() {
  return 'Merhaba!';
};

Tip Kontrolü:

typeof "merhaba";  // "string"
typeof 42;         // "number"
typeof true;       // "boolean"
typeof undefined;  // "undefined"
typeof null;       // "object" (JavaScript hatası!)
typeof {};          // "object"
typeof [];          // "object"
Array.isArray([]);  // true (dizi kontrolü için)

Tip Dönüşümleri:

// String'e dönüştürme
String(123);        // "123"
(123).toString();   // "123"
// Number'a dönüştürme
Number("123");      // 123
parseInt("123px");  // 123
parseFloat("3.14"); // 3.14
+"123";              // 123 (unary plus)
// Boolean'a dönüştürme
Boolean(1);         // true
Boolean(0);         // false
!!"text";            // true (double negation)

Falsy Değerler: JavaScript'te false olarak değerlendirilen değerler:
false, 0, -0, 0n, "", null, undefined, NaN

Bunun dışındaki her şey truthy'dir (true olarak değerlendirilir).

Operatörler (Operators)

Aritmetik Operatörler:

let a = 10, b = 3;
a + b;  // 13 (Toplama)
a - b;  // 7  (Çıkarma)
a * b;  // 30 (Çarpma)
a / b;  // 3.333... (Bölme)
a % b;  // 1  (Modül - Kalan)
a ** b; // 1000 (Üs alma - ES6)
// Increment/Decrement
let x = 5;
x++;    // x = 6 (post-increment)
++x;    // x = 7 (pre-increment)
x--;    // x = 6 (post-decrement)
--x;    // x = 5 (pre-decrement)

Atama Operatörleri:

let x = 10;
x += 5;  // x = x + 5  → 15
x -= 3;  // x = x - 3  → 12
x *= 2;  // x = x * 2  → 24
x /= 4;  // x = x / 4  → 6
x %= 5;  // x = x % 5  → 1
x **= 3; // x = x ** 3 → 1

Karşılaştırma Operatörleri:

// Eşitlik
== "5";   // true  (tip dönüşümü yapar)
=== "5";  // false (kesin eşitlik, tip kontrolü)
!= "5";   // false
!== "5";  // true  (kesin eşitsizlik)
// Büyüklük
> 3;     // true
< 3;     // false
>= 5;    // true
<= 4;    // false

Önemli: Her zaman === ve !== kullanın!
== ve != tip dönüşümü yaptığı için beklenmedik sonuçlar verebilir.

Örnek: 0 == false → true, "" == false → true

Mantıksal Operatörler:

// AND (ve)
true && true;    // true
true && false;   // false
// OR (veya)
true || false;   // true
false || false;  // false
// NOT (değil)
!true;           // false
!false;          // true

Ternary (Üçlü) Operatör:

// koşul ? doğruysa : yanlışsa
let yas = 20;
let durum = yas >= 18 ? 'Yetişkin' : 'Çocuk';
console.log(durum); // "Yetişkin"

Nullish Coalescing (??) - ES2020:

let a = null;
let b = a ?? 'varsayılan'; // "varsayılan"
let c = 0;
let d = c ?? 'varsayılan'; // 0 (sadece null/undefined için)
// || operatörü ile fark
let e = 0 || 'varsayılan'; // "varsayılan" (0 falsy)

Modern JavaScript Operatörleri:
• Optional Chaining: user?.address?.city
• Nullish Coalescing: value ?? defaultValue
• Logical Assignment: x ??= 10, x ||= 5, x &&= 3

Koşul İfadeleri (Conditionals)

if-else İfadesi:

let yas = 20;
if (yas >= 18) {
  console.log('Yetişkin');
} else {
  console.log('Çocuk');
}

else if Zinciri:

let not = 85;
if (not >= 90) {
  console.log('A');
} else if (not >= 80) {
  console.log('B');
} else if (not >= 70) {
  console.log('C');
} else {
  console.log('F');
}

switch-case İfadesi:

let gun = 'Pazartesi';
switch (gun) {
  case 'Pazartesi':
    console.log('Haftanın ilk günü');
    break;
  case 'Cuma':
    console.log('Haftanın son iş günü');
    break;
  case 'Cumartesi':
  case 'Pazar':
    console.log('Hafta sonu!');
    break;
  default:
    console.log('Hafta içi');
}

                            break Kullanmayı Unutmayın!

                            switch-case'de break kullanmazsanız, sonraki case'ler de çalışır (fall-through). Bu genellikle istenmeyen bir durumdur.
                        
ul.addEventListener('click', (e) => {
  // Sadece li elementleri için
  if (e.target.matches('li')) {
    console.log('Li tıklandı:', e.target.textContent);
  }
});

Event Delegation Avantajları:
• Dinamik eklenen elementler için de çalışır
• Performans - tek listener yerine çoklu listener'dan daha hızlı
• Memory - daha az event listener = daha az bellek kullanımı

Asenkron JavaScript

Callback Functions:

// setTimeout - belirli süre sonra çalıştır
setTimeout(() => {
  console.log('2 saniye sonra');
}, 2000);
// setInterval - belirli aralıklarla çalıştır
const intervalId = setInterval(() => {
  console.log('Her 1 saniyede');
}, 1000);
// Interval'i durdur
clearInterval(intervalId);

Promises:

// Promise oluşturma
const myPromise = new Promise((resolve, reject) => {
  const success = true;
  
  if (success) {
    resolve('Başarılı!');
  } else {
    reject('Hata oluştu!');
  }
});
// Promise kullanma
myPromise
  .then(result => console.log(result))
  .catch(error => console.error(error))
  .finally(() => console.log('Bitti'));

Promise Chaining:

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    console.log(data);
    return data.userId;
  })
  .then(userId => fetch(`/users/${userId}`))
  .then(response => response.json())
  .then(user => console.log(user))
  .catch(error => console.error(error));

async/await (ES2017):

// Async function tanımlama
async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
    return data;
  } catch (error) {
    console.error('Hata:', error);
  }
}
// Kullanım
fetchData();
// Arrow function ile
const fetchData2 = async () => {
  const data = await fetch('/api').then(r => r.json());
  return data;
};

Promise Utility Methods:

// Promise.all - tümü bitince
const promise1 = fetch('/api1');
const promise2 = fetch('/api2');
const promise3 = fetch('/api3');
Promise.all([promise1, promise2, promise3])
  .then(responses => console.log('Hepsi bitti'))
  .catch(error => console.log('Biri hata verdi'));
// Promise.race - ilk biten
Promise.race([promise1, promise2, promise3])
  .then(result => console.log('İlk biten'));
// Promise.allSettled - hepsi bitince (hata olsa da)
Promise.allSettled([promise1, promise2, promise3])
  .then(results => console.log(results));
// Promise.any - ilk başarılı olan
Promise.any([promise1, promise2, promise3])
  .then(result => console.log('İlk başarılı'));

async/await vs Promises

async/await Avantajları:
• Daha okunabilir (senkron kod gibi)
• Daha kolay hata yönetimi (try/catch)
• Debug etmesi daha kolay

Ne zaman Promise.then():
• Paralel işlemler için (Promise.all ile birlikte)
• Conditional chaining gerektiğinde

ES6+ Modern Özellikler

Template Literals:

const isim = 'Ali';
const yas = 25;
// String interpolation
const mesaj = `Benim adım ${isim} ve ${yas} yaşındayım`;
// Çok satırlı string
const html = `
  <div>
    <h1>${isim}</h1>
  </div>
`;

Destructuring Assignment:

// Array destructuring
const [a, b, c] = [1, 2, 3];
// Object destructuring
const { isim, yas } = { isim: 'Ali', yas: 25 };
// Function parametrelerinde
function printUser({ isim, yas }) {
  console.log(`${isim}, ${yas}`);
}

Spread & Rest Operators:

// Spread - dizileri yay
const arr1 = [1, 2];
const arr2 = [3, 4];
const combined = [...arr1, ...arr2]; // [1, 2, 3, 4]
// Spread - objeleri yay
const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };
const merged = { ...obj1, ...obj2 };
// Rest - parametreleri topla
function topla(...sayilar) {
  return sayilar.reduce((a, b) => a + b, 0);
}
topla(1, 2, 3, 4); // 10

Enhanced Object Literals:

const isim = 'Ali';
const yas = 25;
// Property shorthand
const kisi = { isim, yas }; // { isim: isim, yas: yas }
// Method shorthand
const obj = {
  selamla() {
    return 'Merhaba';
  }
};

Classes (ES6):

class Person {
  constructor(isim, yas) {
    this.isim = isim;
    this.yas = yas;
  }
  selamla() {
    return `Merhaba, ben ${this.isim}`;
  }
  // Static method
  static info() {
    return 'Person class';
  }
}
// Inheritance
class Student extends Person {
  constructor(isim, yas, okul) {
    super(isim, yas);
    this.okul = okul;
  }
  oku() {
    return `${this.okul}'da okuyorum`;
  }
}
const ogrenci = new Student('Ali', 20, 'ITÜ');

Map ve Set:

// Map - key-value pairs
const map = new Map();
map.set('isim', 'Ali');
map.set('yas', 25);
console.log(map.get('isim')); // "Ali"
map.has('yas'); // true
map.delete('yas');
// Set - benzersiz değerler
const set = new Set([1, 2, 3, 3, 4]);
console.log(set); // Set {1, 2, 3, 4}
set.add(5);
set.has(3); // true
set.delete(2);

Modern JavaScript İpuçları:
• Template literals kullanın (string concatenation yerine)
• Destructuring ile kod daha temiz olur
• Spread operator immutable işlemler için idealdir
• Map/Set object'lerden daha performanslıdır (büyük data için)

Modüller (ES6 Modules)

Export (Dışa Aktarma):

// Named exports (math.js)
export const PI = 3.14159;
export function topla(a, b) {
  return a + b;
}
export class Calculator {
  // ...
}
// Default export
export default function carp(a, b) {
  return a * b;
}

Import (İçe Aktarma):

// Named imports
import { PI, topla, Calculator } from './math.js';
// Alias ile import
import { topla as add } from './math.js';
// Tümünü import
import * as math from './math.js';
console.log(math.PI);
// Default import
import carp from './math.js';
// Default ve named birlikte
import carp, { PI, topla } from './math.js';

HTML'de Modül Kullanımı:

CORS Uyarısı: Modüller file:// protokolü ile çalışmaz. Local development için bir HTTP server kullanın (Live Server, http-server, vb.)

Fetch API

Temel GET İsteği:

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Hata:', error));

async/await ile:

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    
    const data = await response.json();
    console.log(data);
    return data;
  } catch (error) {
    console.error('Hata:', error);
  }
}

POST İsteği:

async function postData(url, data) {
  const response = await fetch(url, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(data)
  });
  
  return await response.json();
}
// Kullanım
postData('/api/users', { isim: 'Ali', yas: 25 })
  .then(data => console.log(data));

Diğer HTTP Metotları:

// PUT - Güncelleme
fetch('/api/users/1', {
  method: 'PUT',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ isim: 'Veli' })
});
// DELETE - Silme
fetch('/api/users/1', {
  method: 'DELETE'
});

Headers ve Authentication:

fetch('/api/protected', {
  headers: {
    'Authorization': 'Bearer YOUR_TOKEN',
    'Content-Type': 'application/json'
  }
});

Local Storage & Session Storage

localStorage (Kalıcı Depolama):

// Veri kaydet
localStorage.setItem('isim', 'Ali');
// Veri oku
const isim = localStorage.getItem('isim');
console.log(isim); // "Ali"
// Veri sil
localStorage.removeItem('isim');
// Tümünü temizle
localStorage.clear();

Obje Depolama (JSON):

const user = { isim: 'Ali', yas: 25 };
// Obje kaydet
localStorage.setItem('user', JSON.stringify(user));
// Obje oku
const storedUser = JSON.parse(localStorage.getItem('user'));
console.log(storedUser.isim); // "Ali"

sessionStorage (Oturum Depolama):

// Tab/pencere kapanınca silinir
sessionStorage.setItem('token', 'abc123');
const token = sessionStorage.getItem('token');
sessionStorage.removeItem('token');

localStorage vs sessionStorage:

localStorage:
• Kalıcı - tarayıcı kapatılsa bile kalır
• Aynı origin'deki tüm tab'lar paylaşır
• Manuel silinene kadar kalır

sessionStorage:
• Geçici - tab/pencere kapanınca silinir
• Her tab'ın kendi storage'ı var
• Oturum bazlı veriler için ideal

Güvenlik Uyarısı:
• localStorage/sessionStorage şifrelenmez!
• Hassas bilgileri (şifre, kredi kartı) saklamayın
• XSS saldırılarına açıktır
• Token'lar için httpOnly cookie tercih edilir
• ~5-10MB limit vardır

En İyi Uygulamalar ve İpuçları

Kod Yazım Standartları:

Clean Code Prensipleri

• Anlamlı değişken/fonksiyon isimleri kullanın
• Fonksiyonları küçük ve tek amaçlı tutun
• DRY (Don't Repeat Yourself) - tekrar etmeyin
• Yorum yazmak yerine açıklayıcı kod yazın
• Consistent indentation ve formatting
• ESLint ve Prettier kullanın

Performans İpuçları:

// ❌ Kötü - döngüde DOM erişimi
for (let i = 0; i < 100; i++) {
  document.getElementById('list').innerHTML += '<li>Item</li>';
}
// ✅ İyi - batch işlem
let html = '';
for (let i = 0; i < 100; i++) {
  html += '<li>Item</li>';
}
document.getElementById('list').innerHTML = html;

Hata Yönetimi:

try {
  // Riskli kod
  const data = JSON.parse(jsonString);
  processData(data);
} catch (error) {
  console.error('Hata oluştu:', error.message);
  // Kullanıcıya anlamlı mesaj göster
  showErrorMessage('Veri işlenirken hata oluştu');
} finally {
  // Her durumda çalışır (temizlik işlemleri)
  hideLoadingSpinner();
}

Debugging İpuçları:

// console.log alternatifleri
console.table(arrayOfObjects);  // Tablo göster
console.time('işlem');          // Süre ölç başlat
// ... kod ...
console.timeEnd('işlem');        // Süre ölç bitir
console.trace();                 // Stack trace
console.dir(object);             // Obje detayları
// Debugger statement
debugger; // Browser dev tools'da durur

Öğrenmeye Devam İçin:
• MDN Web Docs - en iyi JavaScript referansı
• JavaScript.info - detaylı tutorial
• FreeCodeCamp - interaktif öğrenme
• GitHub'da açık kaynak projelere katkı
• Günlük kod yazın - pratik yapın!
• LeetCode, HackerRank - problem çözün

Popüler JavaScript Framework'leri:
• React: Facebook - component-based UI
• Vue.js: Progressive framework
• Angular: Google - full-featured framework
• Node.js: Backend JavaScript
• Express.js: Node.js web framework
• Next.js: React framework (SSR)
• TypeScript: JavaScript with types

JavaScript Yolculuğuna Devam!

JavaScript web'in kalbi, modern uygulamaların dili. Öğrenmenin sonu yok - her gün yeni şeyler keşfedin ve projeler yapın!

Son Tavsiyeler

Pratik yapın: Teoriden çok kod yazın
Projeler yapın: To-do list, calculator, weather app...
Kod okuyun: GitHub'da başkalarının kodunu inceleyin
Dev Tools kullanın: Browser console'u en iyi arkadaşınız
Community'ye katılın: Stack Overflow, Reddit, Discord
Güncel kalın: JavaScript hızla gelişiyor

console.log('Happy Coding! 🚀');

Web'in dilini öğrendiniz!