Bir e-ticaret sitesi düşünün. Yüzlerce ürün var: telefonlar, bilgisayarlar, kulaklıklar... Her ürünün adı, fiyatı, stok miktarı var. Her biri için ayrı ayrı değişkenler mi tanımlayacağız?
javascript
const telefon1Adi = "iPhone 15";
const telefon1Fiyat = 45000;
const telefon1Stok = 50;
const telefon2Adi = "Samsung S24";
const telefon2Fiyat = 42000;
const telefon2Stok = 30;
// 100 ürün için 300 değişken mi?!Bu yaklaşım hem kaotik hem de sürdürülemez. İşte Object-Oriented Programming (OOP) - Nesne Yönelimli Programlama - tam da bu sorunu çözmek için var.
OOP Nedir?
Object-Oriented Programming, kodu nesneler etrafında organize eden bir programlama yaklaşımıdır.
Temel Fikir
Gerçek dünyadaki kavramları (ürün, kullanıcı, sipariş, araba, hayvan...) kod içinde nesneler olarak modelliyoruz. Her nesne:
- Özellikler (Properties): Nesnenin verileri (isim, fiyat, renk...)
- Metotlar (Methods): Nesnenin yapabildiği işlemler (hesapla, göster, kaydet...)
metin
┌─────────────────────────────────────┐
│ ÜRÜN NESNESİ │
├─────────────────────────────────────┤
│ Özellikler: │
│ - ad: "Laptop" │
│ - fiyat: 25000 │
│ - stok: 15 │
│ - kategori: "Elektronik" │
├─────────────────────────────────────┤
│ Metotlar: │
│ - indirimUygula() │
│ - stokAzalt() │
│ - bilgiGoster() │
└─────────────────────────────────────┘Neden OOP?
1. Organizasyon
İlgili veri ve fonksiyonlar bir arada tutulur:
javascript
// OOP olmadan - dağınık
const kullaniciAdi = "Ahmet";
const kullaniciEmail = "ahmet@mail.com";
function kullaniciBilgiGoster(ad, email) {
console.log(`${ad} - ${email}`);
}
// OOP ile - organize
const kullanici = {
ad: "Ahmet",
email: "ahmet@mail.com",
bilgiGoster() {
console.log(`${this.ad} - ${this.email}`);
}
};2. Yeniden Kullanılabilirlik
Aynı "şablon"dan istediğiniz kadar nesne üretebilirsiniz:
javascript
// Bir şablon tanımla, istediğin kadar kullan
const urun1 = new Urun("Telefon", 15000);
const urun2 = new Urun("Tablet", 12000);
const urun3 = new Urun("Laptop", 25000);
// Hepsi aynı yapıya sahip, farklı değerlerle3. Bakım Kolaylığı
Bir değişiklik yapmanız gerektiğinde tek bir yerde yaparsınız:
javascript
// Şablondaki metodu güncelle
// Tüm nesneler otomatik güncellenirŞablon (Template) Kavramı
OOP'nin özü şablon kavramıdır. Bir kurabiye kalıbı düşünün:
metin
KURABIYE KALIBI (Şablon)
│
┌───────┼───────┐
│ │ │
▼ ▼ ▼
🍪 🍪 🍪
Kurabiye Kurabiye Kurabiye
1 2 3
Hepsi aynı şekilden, ama farklı süslemelerleJavaScript'te de aynı mantık:
metin
ÜRÜN ŞABLONU (Class/Constructor)
│
┌───────┼───────┐
│ │ │
▼ ▼ ▼
{Telefon} {Tablet} {Laptop}
45000 12000 25000
Hepsi aynı yapıda, ama farklı değerlerleGerçek Hayat Örneği: Banka Hesabı
Bir banka uygulaması düşünelim. Her hesabın:
- Hesap numarası
- Sahip adı
- Bakiye
- Para yatırma/çekme işlemleri
javascript
// Tek bir hesap nesnesi
const hesap1 = {
hesapNo: "TR123456",
sahip: "Ayşe Yılmaz",
bakiye: 5000,
paraYatir(miktar) {
this.bakiye += miktar;
console.log(`${miktar} TL yatırıldı. Yeni bakiye: ${this.bakiye} TL`);
},
paraCek(miktar) {
if (miktar > this.bakiye) {
console.log("Yetersiz bakiye!");
return;
}
this.bakiye -= miktar;
console.log(`${miktar} TL çekildi. Yeni bakiye: ${this.bakiye} TL`);
},
bakiyeGoster() {
console.log(`Hesap: ${this.hesapNo} | Bakiye: ${this.bakiye} TL`);
}
};
// Kullanım
hesap1.paraYatir(1000); // 1000 TL yatırıldı. Yeni bakiye: 6000 TL
hesap1.paraCek(500); // 500 TL çekildi. Yeni bakiye: 5500 TL
hesap1.bakiyeGoster(); // Hesap: TR123456 | Bakiye: 5500 TLGüzel! Ama ikinci bir hesap için tüm bu kodu tekrar mı yazacağız?
Problem: Kod Tekrarı
Her yeni hesap için aynı yapıyı tekrar yazmak:
javascript
const hesap2 = {
hesapNo: "TR789012",
sahip: "Mehmet Kaya",
bakiye: 10000,
paraYatir(miktar) {
this.bakiye += miktar;
console.log(`${miktar} TL yatırıldı. Yeni bakiye: ${this.bakiye} TL`);
},
paraCek(miktar) {
if (miktar > this.bakiye) {
console.log("Yetersiz bakiye!");
return;
}
this.bakiye -= miktar;
console.log(`${miktar} TL çekildi. Yeni bakiye: ${this.bakiye} TL`);
},
bakiyeGoster() {
console.log(`Hesap: ${this.hesapNo} | Bakiye: ${this.bakiye} TL`);
}
};Sorunlar:
- Aynı metotlar defalarca yazılıyor
- Bir metotta değişiklik yapınca HER hesapta güncelleme gerekiyor
- 1000 hesap = 1000 kez aynı metot kopyası (hafıza israfı!)
Çözüm: Şablon Kullanmak
OOP'de bu sorunu çözmek için şablonlar kullanırız. JavaScript'te şablon oluşturmanın birkaç yolu var:
| Yöntem | Açıklama | Modern mi? |
|---|---|---|
| Factory Functions | Nesne üreten fonksiyonlar | Evet |
| Constructor Functions | new keyword ile çalışan fonksiyonlar | Eski ama önemli |
| Classes | ES6 ile gelen modern syntax | Evet (önerilen) |
Önizleme: Factory Function
javascript
// Şablon: Hesap üreten fonksiyon
function hesapOlustur(hesapNo, sahip, baslangicBakiye) {
return {
hesapNo: hesapNo,
sahip: sahip,
bakiye: baslangicBakiye,
paraYatir(miktar) {
this.bakiye += miktar;
},
paraCek(miktar) {
if (miktar <= this.bakiye) {
this.bakiye -= miktar;
}
}
};
}
// Artık istediğimiz kadar hesap üretebiliriz!
const hesap1 = hesapOlustur("TR123", "Ayşe", 5000);
const hesap2 = hesapOlustur("TR456", "Mehmet", 10000);
const hesap3 = hesapOlustur("TR789", "Zeynep", 7500);Önizleme: Class (Modern Yöntem)
javascript
// Şablon: Hesap class'ı
class Hesap {
constructor(hesapNo, sahip, baslangicBakiye) {
this.hesapNo = hesapNo;
this.sahip = sahip;
this.bakiye = baslangicBakiye;
}
paraYatir(miktar) {
this.bakiye += miktar;
}
paraCek(miktar) {
if (miktar <= this.bakiye) {
this.bakiye -= miktar;
}
}
}
// Kullanım
const hesap1 = new Hesap("TR123", "Ayşe", 5000);
const hesap2 = new Hesap("TR456", "Mehmet", 10000);JavaScript'te Zaten OOP Kullanıyorsunuz!
Farkında olmasanız da JavaScript'in birçok yerinde OOP görüyorsunuz:
1. Array'ler
javascript
const liste1 = [1, 2, 3];
const liste2 = [4, 5, 6];
// İkisi de aynı şablondan (Array) üretildi
// İkisinde de aynı metotlar var
liste1.push(4);
liste2.push(7);
// Farklı değerler, aynı yapı2. DOM Elemanları
javascript
const btn1 = document.querySelector("#btn1");
const btn2 = document.querySelector("#btn2");
// İkisi de HTMLButtonElement şablonundan
// İkisinde de aynı özellik ve metotlar
btn1.addEventListener("click", ...);
btn2.addEventListener("click", ...);3. Date Nesneleri
javascript
const tarih1 = new Date();
const tarih2 = new Date("2024-01-15");
// İkisi de Date şablonundan
tarih1.getFullYear();
tarih2.getMonth();4. XMLHttpRequest / Fetch
javascript
const xhr1 = new XMLHttpRequest();
const xhr2 = new XMLHttpRequest();
// İkisi de aynı şablondan, aynı metotlarla
xhr1.open("GET", "/api/users");
xhr2.open("POST", "/api/orders");OOP'nin Temel Kavramları
1. Class (Sınıf)
Nesneler için şablon/kalıp. Özellikleri ve metotları tanımlar.
javascript
class Araba {
// Şablon tanımı
}2. Object (Nesne) / Instance (Örnek)
Şablondan üretilen somut nesne.
javascript
const benimArabam = new Araba(); // Bir "instance"3. Property (Özellik)
Nesnenin tuttuğu veriler.
javascript
benimArabam.marka = "Toyota";
benimArabam.model = "Corolla";4. Method (Metot)
Nesnenin yapabildiği işlemler.
javascript
benimArabam.calistir();
benimArabam.hizlan(50);5. Constructor (Yapıcı)
Nesne oluşturulurken çalışan özel fonksiyon.
javascript
class Araba {
constructor(marka, model) {
this.marka = marka;
this.model = model;
}
}6. Inheritance (Miras)
Bir class'ın başka bir class'tan özellik/metot devralması.
javascript
class ElektrikliAraba extends Araba {
// Araba'nın tüm özelliklerini miras alır
// + kendi özelliklerini ekler
}OOP vs Prosedürel Programlama
| Prosedürel | OOP |
|---|---|
| Fonksiyonlar ve veriler ayrı | Veri ve fonksiyonlar bir arada |
hesapBakiyeGoster(hesap) | hesap.bakiyeGoster() |
| Veri açıkta | Veri nesne içinde korunur |
| Kod tekrarı fazla | Şablonla tekrar azalır |
Prosedürel Yaklaşım
javascript
// Veri
const kullanici = { ad: "Ali", puan: 100 };
// Fonksiyonlar ayrı
function puanEkle(kullanici, miktar) {
kullanici.puan += miktar;
}
function puanGoster(kullanici) {
console.log(kullanici.puan);
}
// Kullanım
puanEkle(kullanici, 50);
puanGoster(kullanici);OOP Yaklaşımı
javascript
// Veri ve fonksiyonlar bir arada
const kullanici = {
ad: "Ali",
puan: 100,
puanEkle(miktar) {
this.puan += miktar;
},
puanGoster() {
console.log(this.puan);
}
};
// Kullanım
kullanici.puanEkle(50);
kullanici.puanGoster();Özet
| Kavram | Açıklama |
|---|---|
| OOP | Kodu nesneler etrafında organize eden yaklaşım |
| Nesne | Veri (özellikler) ve davranış (metotlar) içeren yapı |
| Şablon | Benzer nesneler üretmek için kalıp (Class) |
| Instance | Şablondan üretilen somut nesne |
| Avantajlar | Organizasyon, yeniden kullanılabilirlik, bakım kolaylığı |
Sırada Ne Var?
OOP'nin ne olduğunu ve neden önemli olduğunu anladık. Şimdi JavaScript'te nesne şablonları oluşturmanın ilk yöntemini öğreneceğiz.
Bir sonraki makalede Factory Functions konusunu işleyeceğiz - fonksiyonlar kullanarak nasıl nesne "fabrikası" oluşturabileceğimizi göreceğiz.
