Değişkenler Nedir?
Değişkenler, programlama dillerinde veri saklamak için kullandığımız konteynerlerdir. JavaScript’te değişkenler, sayılardan metinlere, objelerden fonksiyonlara kadar her türlü veriyi saklayabilir.
Değişken Tanımlama Yöntemleri
JavaScript’te üç farklı şekilde değişken tanımlayabiliriz:
// let - Modern, blok kapsamlı
let isim = 'Furkan';
// const - Sabit değerler için
const pi = 3.14159;
// var - Eski yöntem (kullanımı önerilmez)
var yas = 25;
let, const ve var Farkları
let Anahtar Kelimesi
let kullaniciAdi = 'john_doe';
console.log(kullaniciAdi); // 'john_doe'
// Değeri değiştirilebilir
kullaniciAdi = 'jane_doe';
console.log(kullaniciAdi); // 'jane_doe'
// Blok kapsamlı
if (true) {
let blokDegiskeni = 'sadece burada';
console.log(blokDegiskeni); // 'sadece burada'
}
// console.log(blokDegiskeni); // Hata! Tanımlı değil
const Anahtar Kelimesi
const siteAdi = 'Benim Blog Sitem';
console.log(siteAdi); // 'Benim Blog Sitem'
// Değeri değiştirilemez
// siteAdi = 'Başka Site'; // Hata!
// Tanımlanırken değer verilmeli
// const bos; // Hata!
// Objeler ve diziler için içerik değiştirilebilir
const kullanici = {
isim: 'Furkan',
yas: 25
};
kullanici.yas = 26; // Bu geçerli
console.log(kullanici); // {isim: 'Furkan', yas: 26}
var Anahtar Kelimesi (Eski Yöntem)
var eskiDegisken = 'eski yöntem';
// Fonksiyon kapsamlı
function test() {
if (true) {
var icDegisken = 'fonksiyon içinde her yerde erişilebilir';
}
console.log(icDegisken); // Çalışır (let ile çalışmaz)
}
// Yeniden tanımlanabilir
var eskiDegisken = 'yeni değer'; // Sorun yok ama kafa karıştırıcı
Uyarı
Modern JavaScript’te: var kullanımından kaçının. let ve const kullanın. Bu daha güvenli ve anlaşılır kod yazmanızı sağlar.
JavaScript Veri Türleri
JavaScript’te iki ana veri türü kategorisi vardır:
Primitive (İlkel) Veri Türleri
1. String (Metin)
let tek = 'Tek tırnak ile string';
let cift = "Çift tırnak ile string";
let template = `Template literal ile string`;
// String birleştirme
let isim = 'Furkan';
let soyisim = 'Çelik';
let tamIsim = isim + ' ' + soyisim;
// Template literal kullanımı (önerilen)
let mesaj = `Merhaba ${isim} ${soyisim}!`;
console.log(mesaj); // 'Merhaba Furkan Çelik!'
// Çok satırlı string
let uzunMetin = `Bu bir
çok satırlı
string örneğidir.`;
// String özellikleri ve metodları
console.log(isim.length); // 6
console.log(isim.toUpperCase()); // 'FURKAN'
console.log(isim.toLowerCase()); // 'furkan'
console.log(tamIsim.includes('Furkan')); // true
2. Number (Sayı)
// Tam sayılar
let yaş = 25;
let negatif = -10;
// Ondalıklı sayılar
let pi = 3.14159;
let yuzde = 0.75;
// Özel sayı değerleri
let sonsuz = Infinity;
let eksisonsuz = -Infinity;
let sayi_degil = NaN; // Not a Number
// Sayı işlemleri
let toplam = 10 + 5; // 15
let fark = 10 - 5; // 5
let carpim = 10 * 5; // 50
let bolum = 10 / 5; // 2
let kalan = 10 % 3; // 1 (mod işlemi)
let us = 2 ** 3; // 8 (2 üzeri 3)
// Sayı metodları
console.log(pi.toFixed(2)); // '3.14'
console.log(parseInt('123')); // 123
console.log(parseFloat('123.45')); // 123.45
console.log(Number.isNaN(sayi_degil)); // true
3. Boolean (Mantıksal)
let dogru = true;
let yanlis = false;
// Boolean dönüşümleri
console.log(Boolean(1)); // true
console.log(Boolean(0)); // false
console.log(Boolean('')); // false
console.log(Boolean('text')); // true
console.log(Boolean(null)); // false
console.log(Boolean(undefined)); // false
// Karşılaştırma işlemleri
let a = 5;
let b = 10;
console.log(a > b); // false
console.log(a < b); // true
console.log(a === b); // false (kesin eşitlik)
console.log(a !== b); // true (kesin eşitsizlik)
4. undefined
let tanimlanmamis;
console.log(tanimlanmamis); // undefined
function test() {
// return yoksa undefined döner
}
console.log(test()); // undefined
let obje = {isim: 'Furkan'};
console.log(obje.yas); // undefined (özellik yok)
5. null
let bos = null; // Kasıtlı olarak boş
// null vs undefined
console.log(null == undefined); // true (gevşek eşitlik)
console.log(null === undefined); // false (kesin eşitlik)
console.log(typeof null); // 'object' (JavaScript'te bilinen bug)
console.log(typeof undefined); // 'undefined'
6. Symbol (ES6+)
// Benzersiz kimlik oluşturma
let sembol1 = Symbol('açıklama');
let sembol2 = Symbol('açıklama');
console.log(sembol1 === sembol2); // false (her symbol benzersizdir)
// Obje özellik anahtarı olarak kullanım
let obje = {};
obje[sembol1] = 'değer1';
console.log(obje[sembol1]); // 'değer1'
Non-Primitive (Karmaşık) Veri Türleri
1. Object (Nesne)
// Nesne oluşturma
let kullanici = {
isim: 'Furkan',
yas: 25,
email: '[email protected]',
aktif: true
};
// Nesne özelliklerine erişim
console.log(kullanici.isim); // 'Furkan'
console.log(kullanici['yas']); // 25
// Özellik ekleme/değiştirme
kullanici.sehir = 'İstanbul';
kullanici.yas = 26;
// Metodlu nesne
let hesapMakinesi = {
topla: function(a, b) {
return a + b;
},
cikar: (a, b) => a - b // Arrow function
};
console.log(hesapMakinesi.topla(5, 3)); // 8
2. Array (Dizi)
// Dizi oluşturma
let sayilar = [1, 2, 3, 4, 5];
let karisik = ['metin', 42, true, null];
let bosDizi = [];
// Dizi elemanlarına erişim
console.log(sayilar[0]); // 1 (ilk eleman)
console.log(sayilar.length); // 5
// Dizi metodları
sayilar.push(6); // Sona eleman ekle
sayilar.pop(); // Son elemanı çıkar
sayilar.unshift(0); // Başa eleman ekle
sayilar.shift(); // İlk elemanı çıkar
// Modern dizi metodları
let kareler = sayilar.map(x => x * x);
let ciftler = sayilar.filter(x => x % 2 === 0);
console.log(kareler); // [1, 4, 9, 16, 25]
console.log(ciftler); // [2, 4]
Tür Kontrolü ve Dönüştürme
typeof Operatörü
console.log(typeof 42); // 'number'
console.log(typeof 'hello'); // 'string'
console.log(typeof true); // 'boolean'
console.log(typeof undefined); // 'undefined'
console.log(typeof null); // 'object' (bug!)
console.log(typeof {}); // 'object'
console.log(typeof []); // 'object'
console.log(typeof function(){}); // 'function'
Tür Dönüştürme
// String'e dönüştürme
let sayi = 42;
let string1 = String(sayi); // '42'
let string2 = sayi.toString(); // '42'
let string3 = sayi + ''; // '42'
// Number'a dönüştürme
let metin = '123';
let number1 = Number(metin); // 123
let number2 = parseInt(metin); // 123
let number3 = parseFloat('123.45'); // 123.45
let number4 = +metin; // 123
// Boolean'a dönüştürme
let bool1 = Boolean(1); // true
let bool2 = !!0; // false
Pratik Örnekler
Kullanıcı Profil Sistemi
// Kullanıcı bilgileri
const kullanici = {
id: 1,
isim: 'Furkan',
soyisim: 'Çelik',
yas: 25,
email: '[email protected]',
aktif: true,
roller: ['kullanici', 'editor'],
adres: {
sehir: 'İstanbul',
ilce: 'Kadıköy',
postaKodu: '34710'
}
};
// Kullanıcı bilgilerini işleme
function kullaniciBilgisiGetir(kullanici) {
const tamIsim = `${kullanici.isim} ${kullanici.soyisim}`;
const durum = kullanici.aktif ? 'Aktif' : 'Pasif';
const rolSayisi = kullanici.roller.length;
return {
tamIsim,
durum,
rolSayisi,
konum: `${kullanici.adres.sehir}, ${kullanici.adres.ilce}`
};
}
console.log(kullaniciBilgisiGetir(kullanici));
Basit Alışveriş Sepeti
let sepet = [];
function urunEkle(id, isim, fiyat, adet = 1) {
const urun = {
id: id,
isim: isim,
fiyat: fiyat,
adet: adet,
toplam: fiyat * adet
};
sepet.push(urun);
console.log(`${isim} sepete eklendi.`);
}
function sepetToplamı() {
let toplam = 0;
for (let urun of sepet) {
toplam += urun.toplam;
}
return toplam;
}
function sepetOzeti() {
console.log('=== SEPET ÖZETİ ===');
sepet.forEach(urun => {
console.log(`${urun.isim} - ${urun.adet} adet - ${urun.toplam}₺`);
});
console.log(`Toplam: ${sepetToplamı()}₺`);
}
// Kullanım
urunEkle(1, 'Laptop', 5000, 1);
urunEkle(2, 'Mouse', 150, 2);
sepetOzeti();
Pratik Egzersiz
Görev 1: Değişken Tanımlama
// Bu değişkenleri uygun anahtar kelimelerle tanımlayın:
// - Adınız (değişmez)
// - Yaşınız (değişebilir)
// - Favori renkleriniz listesi (değişebilir)
// - PI sayısı (değişmez)
// - Aktif kullanıcı durumu (değişebilir)
Görev 2: Veri Türü Kontrolleri
// Bu fonksiyonu tamamlayın
function veriTuruAnaliz(deger) {
// 1. Değerin türünü console'a yazdırın
// 2. Eğer string ise uzunluğunu gösterin
// 3. Eğer number ise pozitif/negatif olduğunu söyleyin
// 4. Eğer boolean ise true/false durumunu açıklayın
// 5. Eğer object ise özelllik sayısını gösterin
}
// Test edin:
veriTuruAnaliz('Merhaba');
veriTuruAnaliz(42);
veriTuruAnaliz(true);
veriTuruAnaliz({isim: 'Furkan', yas: 25});
Görev 3: Kişi Bilgi Sistemi
Bir kişi objesi oluşturun ve şu özellikleri ekleyin:
- İsim, soyisim, yaş
- İletişim bilgileri (email, telefon)
- Adres bilgileri (şehir, ülke)
- Hobiler (dizi olarak)
- Tam ismini döndüren bir metod
Ipucu
İpucu: Modern JavaScript’te nesne özellik kısayollarını kullanabilirsiniz: {isim, yas}
yerine {isim: isim, yas: yas}
Sıradaki Bölüm
Bir sonraki bölümde Operatörler ve Koşullu İfadeler öğreneceksiniz. JavaScript’te hesaplama yapma, karşılaştırma ve karar verme mekanizmalarını keşfedeceksiniz.
Öğrendikleriniz:
- ✅ let, const, var arasındaki farkları
- ✅ JavaScript’teki tüm veri türlerini
- ✅ Tür kontrolü ve dönüştürme işlemlerini
- ✅ Nesne ve dizi kullanımının temellerini
- ✅ Pratik örneklerle veri yönetimini
Artık JavaScript’te veri saklamanın ve yönetmenin temellerini biliyorsunuz! Sırada bu verilerle işlem yapmayı öğrenmek var. 📊