JavaScript Eğitimi #2: Değişkenler ve Veri Tipleri - Verilerle Çalışmanın Temeli
JavaScript'te değişkenler nasıl tanımlanır? let, const ve var arasındaki farklar nelerdir? String, number, boolean gibi veri tiplerini öğrenin.
JavaScript Eğitimi #2: Değişkenler ve Veri Tipleri
Bir önceki derste JavaScript'e giriş yaptık ve geliştirme ortamımızı hazırladık. Şimdi programlamanın en temel kavramlarından biriyle tanışacağız: değişkenler. Değişkenler, verileri saklamamıza ve onlarla işlem yapmamıza olanak tanır. Her programlama dilinin temelinde bu kavram yer alır.
Düşünün ki bir hesap makinesi yapıyorsunuz. Kullanıcının girdiği sayıları bir yerde saklamanız, sonra bu sayılarla işlem yapmanız gerekiyor. İşte değişkenler tam olarak bu işi yapar. Verileri hafızada tutar ve istediğinizde kullanmanıza olanak tanır.
İçindekiler
- Değişken Nedir?
- var, let ve const Farkları
- Değişken İsimlendirme Kuralları
- Primitive Veri Tipleri
- String (Metin) İşlemleri
- Number (Sayı) İşlemleri
- Boolean (Mantıksal) Değerler
- null ve undefined
- typeof Operatörü
- Tip Dönüşümleri
- Template Literals
- Sık Sorulan Sorular
- Sonuç
Değişken Nedir?
Değişkeni bir kutu gibi düşünebilirsiniz. Bu kutuya bir isim verirsiniz ve içine bir değer koyarsınız. Daha sonra o ismi kullanarak kutunun içindeki değere ulaşabilirsiniz.
// Bir değişken tanımlayalım
let isim = "Ahmet";
// Şimdi bu değişkeni kullanalım
console.log(isim); // Çıktı: Ahmet
// Değerini değiştirelim
isim = "Mehmet";
console.log(isim); // Çıktı: MehmetBu örnekte isim adında bir kutu (değişken) oluşturduk. İçine "Ahmet" değerini koyduk. Sonra aynı kutuya "Mehmet" değerini koyduk. Kutu aynı, içindeki değer değişti.
Gerçek hayattan bir benzetme yapalım. Bir dosya dolabınız var. Her çekmecenin üzerinde bir etiket var: "Faturalar", "Sözleşmeler", "Kişisel Belgeler". Bu etiketler değişken isimleri gibi. Çekmecenin içindeki belgeler ise değerler. "Faturalar" çekmecesini açtığınızda faturaları bulursunuz. Aynı şekilde faturalar değişkenini çağırdığınızda içindeki veriyi elde edersiniz.
var, let ve const Farkları
JavaScript'te değişken tanımlamanın üç yolu var: var, let ve const. Modern JavaScript'te genellikle let ve const kullanılır.
var - Eski Yöntem
var, JavaScript'in orijinal değişken tanımlama yöntemi. Hâlâ çalışır ama bazı sorunları var.
var yas = 25;
console.log(yas); // 25
var yas = 30; // Aynı isimle tekrar tanımlayabilirsiniz - bu sorunlu!
console.log(yas); // 30var ile tanımlanan değişkenler yeniden tanımlanabilir. Bu, büyük projelerde beklenmedik hatalara yol açabilir. Bir yerde yas değişkenini tanımladınız, başka bir yerde unutup tekrar tanımladınız, ve ilk değer kayboldu.
let - Modern Değişken
let, ES6 (2015) ile gelen modern değişken tanımlama yöntemi. Değeri değiştirilebilir ama yeniden tanımlanamaz.
let sehir = "İstanbul";
console.log(sehir); // İstanbul
sehir = "Ankara"; // Değer değiştirilebilir
console.log(sehir); // Ankara
// let sehir = "İzmir"; // HATA! Aynı isimle tekrar tanımlanamazlet kullanın: Değeri daha sonra değişecek değişkenler için.
const - Sabit Değer
const, değeri değiştirilemeyen sabitler için kullanılır. Bir kez tanımladıktan sonra değiştirilemez.
const PI = 3.14159;
console.log(PI); // 3.14159
// PI = 3.14; // HATA! const değişkeni değiştirilemez
const SITE_ADI = "Beydemir.dev";
// SITE_ADI = "Başka Site"; // HATA!const kullanın: Değeri hiç değişmeyecek sabitler için. Örneğin matematik sabitleri, konfigürasyon değerleri, API anahtarları.
Hangisini Ne Zaman Kullanmalı?
Basit bir kural: Önce const kullanın. Değeri değiştirmeniz gerektiğini fark ederseniz let'e çevirin. var kullanmaktan kaçının.
// Değişmeyecek değerler için const
const VERGIORANI = 0.18;
const KULLANICI_ID = 12345;
const renkler = ["kırmızı", "mavi", "yeşil"]; // Dizi de olsa const olabilir
// Değişecek değerler için let
let sayac = 0;
let toplamFiyat = 100;
let aktifMi = true;Dikkat: const ile tanımlanan bir dizi veya nesnenin içeriği değiştirilebilir, sadece kendisi yeniden atanamaz:
const meyveler = ["elma", "armut"];
meyveler.push("muz"); // Bu çalışır!
console.log(meyveler); // ["elma", "armut", "muz"]
// meyveler = ["kiraz"]; // HATA! Yeniden atama yapılamazDeğişken İsimlendirme Kuralları
JavaScript'te değişken isimlerinde bazı kurallar var. Bu kurallara uymak zorunlu, bazı öneriler ise kodunuzu daha okunabilir kılar.
Zorunlu Kurallar
// Harf, alt çizgi (_) veya dolar işareti ($) ile başlamalı
let isim = "değer"; // Geçerli
let _ozel = "değer"; // Geçerli
let $fiyat = "değer"; // Geçerli
// let 1sayi = "değer"; // HATA! Rakamla başlayamaz
// Büyük-küçük harf duyarlı
let Isim = "Ali";
let isim = "Veli";
let ISIM = "Can";
// Bunlar üç farklı değişken!
// Boşluk ve özel karakterler kullanılamaz
// let kullanıcı adı = "değer"; // HATA!
// let fiyat% = "değer"; // HATA!
// Rezerve kelimeler kullanılamaz
// let let = "değer"; // HATA!
// let const = "değer"; // HATA!
// let function = "değer"; // HATA!Önerilen Pratikler
// camelCase kullanın (JavaScript standardı)
let kullaniciAdi = "ahmet123";
let toplamFiyat = 150.50;
let aktifKullaniciSayisi = 42;
// Açıklayıcı isimler verin
let x = 5; // Kötü - ne olduğu belirsiz
let kullaniciYasi = 5; // İyi - amacı belli
// Boolean değişkenleri için soru formatı
let aktifMi = true;
let girisYapildiMi = false;
let varMi = true;
// Sabitler için UPPER_SNAKE_CASE
const MAX_DENEME_SAYISI = 3;
const API_URL = "https://api.example.com";
const VERGI_ORANI = 0.18;Türkçe Karakter Kullanımı
Teknik olarak Türkçe karakterler kullanılabilir ama önerilmez:
let şehir = "İstanbul"; // Çalışır ama önerilmez
let sehir = "İstanbul"; // Tercih edilen
let öğrenciSayısı = 30; // Çalışır ama önerilmez
let ogrenciSayisi = 30; // Tercih edilenUluslararası projelerde veya farklı klavye düzenlerinde sorun çıkarabilir. İngilizce karakterler kullanmak daha güvenli.
Primitive Veri Tipleri
JavaScript'te veriler farklı tiplere ayrılır. Önce temel (primitive) tipleri öğrenelim:
| Tip | Açıklama | Örnek |
|---|---|---|
| string | Metin verisi | "Merhaba", 'Dünya' |
| number | Sayısal veri | 42, 3.14, -10 |
| boolean | Mantıksal değer | true, false |
| undefined | Tanımsız değer | undefined |
| null | Boş değer | null |
| symbol | Benzersiz tanımlayıcı | Symbol('id') |
| bigint | Büyük tam sayılar | 9007199254740991n |
Şimdilik en çok kullanılan ilk beşine odaklanacağız.
String (Metin) İşlemleri
String, metin verilerini temsil eder. Tek tırnak, çift tırnak veya backtick ile tanımlanır.
let isim = "Ahmet"; // Çift tırnak
let soyisim = 'Yılmaz'; // Tek tırnak
let mesaj = `Merhaba ${isim}`; // Template literal (backtick)
console.log(mesaj); // Merhaba AhmetString Oluşturma
// Üç yöntem de geçerli
let str1 = "Merhaba";
let str2 = 'Merhaba';
let str3 = `Merhaba`;
// İç içe tırnak kullanımı
let cumle1 = "O 'merhaba' dedi";
let cumle2 = 'O "merhaba" dedi';
let cumle3 = `O "merhaba" dedi ve 'güldü'`;String Özellikleri ve Metodları
let metin = "JavaScript";
// Uzunluk
console.log(metin.length); // 10
// Karaktere erişim (index 0'dan başlar)
console.log(metin[0]); // "J"
console.log(metin[4]); // "S"
console.log(metin.charAt(0)); // "J"
// Büyük-küçük harf dönüşümü
console.log(metin.toUpperCase()); // "JAVASCRIPT"
console.log(metin.toLowerCase()); // "javascript"
// Arama
console.log(metin.indexOf("Script")); // 4 (bulunduğu index)
console.log(metin.indexOf("Python")); // -1 (bulunamadı)
console.log(metin.includes("Java")); // true
console.log(metin.startsWith("Java")); // true
console.log(metin.endsWith("ipt")); // true
// Kesme (slice)
console.log(metin.slice(0, 4)); // "Java"
console.log(metin.slice(4)); // "Script"
console.log(metin.slice(-6)); // "Script" (sondan 6 karakter)
// Değiştirme
let yeniMetin = metin.replace("Java", "Type");
console.log(yeniMetin); // "TypeScript"
// Bölme
let cumle = "elma,armut,muz";
let meyveler = cumle.split(",");
console.log(meyveler); // ["elma", "armut", "muz"]
// Boşluk temizleme
let bosluklu = " Merhaba ";
console.log(bosluklu.trim()); // "Merhaba"String Birleştirme
let ad = "Ahmet";
let soyad = "Yılmaz";
// + operatörü ile
let tamAd1 = ad + " " + soyad;
console.log(tamAd1); // "Ahmet Yılmaz"
// concat metodu ile
let tamAd2 = ad.concat(" ", soyad);
console.log(tamAd2); // "Ahmet Yılmaz"
// Template literal ile (modern ve önerilen)
let tamAd3 = `${ad} ${soyad}`;
console.log(tamAd3); // "Ahmet Yılmaz"Number (Sayı) İşlemleri
JavaScript'te tam sayılar ve ondalıklı sayılar aynı number tipindedir.
let tamSayi = 42;
let ondalikli = 3.14;
let negatif = -10;
let buyuk = 1000000;
let bilimsel = 2.5e6; // 2.5 x 10^6 = 2,500,000
console.log(typeof tamSayi); // "number"
console.log(typeof ondalikli); // "number"Temel Matematik İşlemleri
let a = 10;
let b = 3;
console.log(a + b); // 13 (toplama)
console.log(a - b); // 7 (çıkarma)
console.log(a * b); // 30 (çarpma)
console.log(a / b); // 3.333... (bölme)
console.log(a % b); // 1 (mod - kalan)
console.log(a ** b); // 1000 (üs alma - 10^3)
// Arttırma ve azaltma
let sayac = 5;
sayac++; // 6 oldu
sayac--; // 5 oldu
sayac += 10; // 15 oldu (sayac = sayac + 10)
sayac -= 3; // 12 oldu
sayac *= 2; // 24 oldu
sayac /= 4; // 6 olduMath Nesnesi
JavaScript'in yerleşik Math nesnesi matematiksel işlemler için kullanışlı metodlar sunar:
// Yuvarlama
console.log(Math.round(4.5)); // 5 (en yakın tam sayıya)
console.log(Math.round(4.4)); // 4
console.log(Math.floor(4.9)); // 4 (aşağı yuvarla)
console.log(Math.ceil(4.1)); // 5 (yukarı yuvarla)
console.log(Math.trunc(4.9)); // 4 (ondalık kısmı at)
// Mutlak değer
console.log(Math.abs(-5)); // 5
// Üs ve kök
console.log(Math.pow(2, 3)); // 8 (2^3)
console.log(Math.sqrt(16)); // 4 (karekök)
// En büyük ve en küçük
console.log(Math.max(1, 5, 3, 9, 2)); // 9
console.log(Math.min(1, 5, 3, 9, 2)); // 1
// Rastgele sayı (0-1 arası)
console.log(Math.random()); // 0.xxxxx
// 1-100 arası rastgele tam sayı
let rastgele = Math.floor(Math.random() * 100) + 1;
console.log(rastgele);
// Sabitler
console.log(Math.PI); // 3.141592653589793
console.log(Math.E); // 2.718281828459045Dikkat Edilmesi Gerekenler
// Ondalık sayı hassasiyeti sorunu
console.log(0.1 + 0.2); // 0.30000000000000004 (!)
// Çözüm: toFixed ile yuvarlama
let sonuc = (0.1 + 0.2).toFixed(2);
console.log(sonuc); // "0.30" (string döner)
console.log(Number(sonuc)); // 0.3 (number'a çevir)
// NaN (Not a Number)
console.log("merhaba" * 2); // NaN
console.log(parseInt("abc")); // NaN
console.log(isNaN("merhaba" * 2)); // true
// Infinity
console.log(1 / 0); // Infinity
console.log(-1 / 0); // -InfinityBoolean (Mantıksal) Değerler
Boolean, sadece iki değer alabilir: true (doğru) veya false (yanlış). Koşullu ifadelerde çok kullanılır.
let aktif = true;
let silindi = false;
console.log(typeof aktif); // "boolean"
// Karşılaştırmalar boolean döner
console.log(5 > 3); // true
console.log(5 < 3); // false
console.log(5 === 5); // true
console.log(5 !== 5); // false
// Koşulda kullanım
let yas = 20;
let yetiskin = yas >= 18;
console.log(yetiskin); // trueTruthy ve Falsy Değerler
JavaScript'te her değer boolean bağlamında true veya false olarak değerlendirilir.
Falsy değerler (false olarak değerlendirilen):
console.log(Boolean(false)); // false
console.log(Boolean(0)); // false
console.log(Boolean(-0)); // false
console.log(Boolean("")); // false (boş string)
console.log(Boolean(null)); // false
console.log(Boolean(undefined)); // false
console.log(Boolean(NaN)); // falseTruthy değerler (true olarak değerlendirilen):
console.log(Boolean(true)); // true
console.log(Boolean(1)); // true
console.log(Boolean(-1)); // true
console.log(Boolean("merhaba")); // true
console.log(Boolean(" ")); // true (boşluk karakteri var)
console.log(Boolean([])); // true (boş dizi)
console.log(Boolean({})); // true (boş nesne)Bu kavram koşullu ifadelerde önemli:
let kullaniciAdi = "";
if (kullaniciAdi) {
console.log("Kullanıcı adı var");
} else {
console.log("Kullanıcı adı boş"); // Bu çalışır
}null ve undefined
Bu iki değer sıkça karıştırılır ama farklı anlamları var.
undefined
Bir değişken tanımlanmış ama değer atanmamışsa undefined olur:
let x;
console.log(x); // undefined
let obj = { isim: "Ali" };
console.log(obj.yas); // undefined (olmayan property)
function selamla() {
console.log("Merhaba");
}
console.log(selamla()); // undefined (return yok)null
null, bilinçli olarak "değer yok" demektir. Programcı tarafından atanır:
let seciliKullanici = null; // Henüz kullanıcı seçilmedi
// Daha sonra değer atanabilir
seciliKullanici = { id: 1, isim: "Ali" };
// Tekrar boşaltılabilir
seciliKullanici = null;Karşılaştırma
console.log(null == undefined); // true (değer olarak eşit)
console.log(null === undefined); // false (tip olarak farklı)
console.log(typeof null); // "object" (JavaScript'in tarihi bir hatası)
console.log(typeof undefined); // "undefined"typeof Operatörü
Bir değerin tipini öğrenmek için typeof kullanılır:
console.log(typeof "Merhaba"); // "string"
console.log(typeof 42); // "number"
console.log(typeof 3.14); // "number"
console.log(typeof true); // "boolean"
console.log(typeof undefined); // "undefined"
console.log(typeof null); // "object" (tarihsel hata)
console.log(typeof Symbol("x")); // "symbol"
console.log(typeof {}); // "object"
console.log(typeof []); // "object"
console.log(typeof function(){}); // "function"Dikkat: typeof null "object" döner. Bu JavaScript'in bilinen bir hatasıdır ve geriye dönük uyumluluk için düzeltilmedi.
Tip Dönüşümleri
Bazen bir veri tipini başka bir tipe çevirmeniz gerekir.
String'e Dönüştürme
let sayi = 42;
// String() fonksiyonu
let str1 = String(sayi);
console.log(str1, typeof str1); // "42" string
// toString() metodu
let str2 = sayi.toString();
console.log(str2, typeof str2); // "42" string
// Boş string ile birleştirme
let str3 = sayi + "";
console.log(str3, typeof str3); // "42" string
// Boolean'dan
console.log(String(true)); // "true"
console.log(String(false)); // "false"Number'a Dönüştürme
let metin = "42";
// Number() fonksiyonu
let num1 = Number(metin);
console.log(num1, typeof num1); // 42 number
// parseInt ve parseFloat
let num2 = parseInt("42");
let num3 = parseFloat("3.14");
console.log(num2, num3); // 42, 3.14
// Unary + operatörü
let num4 = +"42";
console.log(num4, typeof num4); // 42 number
// Karışık metinler
console.log(parseInt("42abc")); // 42 (baştan oku, hata olunca dur)
console.log(Number("42abc")); // NaN (tamamı sayı değilse NaN)
// Boolean'dan
console.log(Number(true)); // 1
console.log(Number(false)); // 0
// Boş ve null
console.log(Number("")); // 0
console.log(Number(null)); // 0
console.log(Number(undefined)); // NaNBoolean'a Dönüştürme
// Boolean() fonksiyonu
console.log(Boolean(1)); // true
console.log(Boolean(0)); // false
console.log(Boolean("abc")); // true
console.log(Boolean("")); // false
// Çift ünlem ile
console.log(!!"merhaba"); // true
console.log(!!""); // false
console.log(!!42); // true
console.log(!!0); // falseOtomatik Tip Dönüşümü (Type Coercion)
JavaScript bazen otomatik tip dönüşümü yapar. Bu beklenmedik sonuçlara yol açabilir:
// String ile + kullanımı
console.log("5" + 3); // "53" (3 string'e dönüştü)
console.log(5 + "3"); // "53"
console.log("5" + "3"); // "53"
// Diğer operatörler sayıya çevirir
console.log("5" - 3); // 2
console.log("5" * "3"); // 15
console.log("10" / 2); // 5
// Karşılaştırmalarda
console.log("5" == 5); // true (tip dönüşümü yapılır)
console.log("5" === 5); // false (tip kontrolü de yapılır)Bu yüzden karşılaştırmalarda === (katı eşitlik) kullanmak önerilir.
Template Literals
ES6 ile gelen template literal, string işlemlerini çok kolaylaştırır. Backtick (`) karakteri kullanılır.
let isim = "Ahmet";
let yas = 25;
// Eski yöntem
let mesaj1 = "Merhaba, ben " + isim + ". " + yas + " yaşındayım.";
// Template literal (modern)
let mesaj2 = `Merhaba, ben ${isim}. ${yas} yaşındayım.`;
console.log(mesaj1); // Merhaba, ben Ahmet. 25 yaşındayım.
console.log(mesaj2); // Merhaba, ben Ahmet. 25 yaşındayım.İfade Kullanımı
${} içinde herhangi bir JavaScript ifadesi kullanabilirsiniz:
let fiyat = 100;
let kdv = 0.18;
console.log(`Fiyat: ${fiyat} TL`);
console.log(`KDV: ${fiyat * kdv} TL`);
console.log(`Toplam: ${fiyat + (fiyat * kdv)} TL`);
// Fonksiyon çağrısı
function buyukHarf(str) {
return str.toUpperCase();
}
console.log(`İsim: ${buyukHarf("ahmet")}`); // İsim: AHMET
// Ternary operatör
let puan = 85;
console.log(`Sonuç: ${puan >= 50 ? "Geçti" : "Kaldı"}`);Çok Satırlı String
// Eski yöntem
let html1 = "<div>\n" +
" <h1>Başlık</h1>\n" +
" <p>İçerik</p>\n" +
"</div>";
// Template literal ile
let html2 = `
<div>
<h1>Başlık</h1>
<p>İçerik</p>
</div>
`;
console.log(html2);Çok satırlı stringler HTML şablonları, SQL sorguları, log mesajları için çok kullanışlıdır.
Sık Sorulan Sorular
let mi const mu kullanmalıyım?
Değeri değişmeyecekse const, değişecekse let kullanın. Pratik kural: Her şeyi const ile başlatın, değiştirmeniz gerekirse let'e çevirin. Bu şekilde yanlışlıkla değiştirmemeniz gereken bir değeri değiştirmenizi engeller.
var hâlâ kullanılıyor mu?
Eski projelerde görebilirsiniz ama yeni kod yazarken kullanmayın. let ve const, var'ın tüm işlevlerini daha güvenli şekilde yapar.
String için tek tırnak mı çift tırnak mı kullanmalıyım?
Teknik olarak fark yok. Tutarlı olmak önemli. Birçok proje tek tırnak kullanır çünkü daha az tuşa basarsınız. HTML içeren stringlerde çift tırnak daha pratik olabilir: let html = '<div class="box">'
NaN değerini nasıl kontrol ederim?
isNaN() fonksiyonu veya Number.isNaN() kullanın. İkincisi daha güvenilir:
console.log(isNaN("merhaba")); // true (string'i kontrol eder)
console.log(Number.isNaN("merhaba")); // false (sadece gerçek NaN için true)
console.log(Number.isNaN(NaN)); // trueDeğişken tanımlamadan kullanabilir miyim?
Strict mode'da hayır (ki kullanmanız önerilir). Normal modda JavaScript değişkeni global olarak oluşturur ama bu kötü bir pratiktir ve hatalara yol açar.
Template literal her zaman mı kullanmalıyım?
Değişken içermeyen basit stringler için gerekli değil. Ama değişken veya ifade içeriyorsa template literal çok daha okunabilir.
Sonuç
Bu derste JavaScript'in temel yapı taşlarını öğrendik. Değişkenlerin nasıl tanımlandığını, let, const ve var arasındaki farkları gördük. Primitive veri tiplerini (string, number, boolean, null, undefined) ve bunlarla yapılan işlemleri inceledik. Tip dönüşümlerini ve template literal kullanımını öğrendik.
Bu konular programlamanın temeli. Her yazdığınız kodda değişkenler ve veri tipleri kullanacaksınız. Şimdi öğrendiklerinizi pekiştirmek için pratik yapın:
- Kendinizi tanıtan değişkenler oluşturun (isim, yaş, şehir, hobiler)
- Template literal ile bu bilgileri içeren bir paragraf oluşturun
- Math metodlarıyla basit hesaplamalar yapın (daire alanı, üçgen çevresi)
- Farklı tiplerdeki değerleri birbirine dönüştürmeyi deneyin
Sonraki Ders
Bir sonraki derste Operatörler ve Koşullu İfadeler konusunu işleyeceğiz. Karşılaştırma operatörlerini, mantıksal operatörleri ve if-else yapısını öğreneceğiz. Programların karar verme mekanizmasını anlayacağız.
JavaScript Eğitimi #3: Operatörler ve Koşullu İfadeler →
Kaynaklar
Projenizi Hayata Geçirelim
Web sitesi, mobil uygulama veya yapay zeka çözümü mü arıyorsunuz? Fikirlerinizi birlikte değerlendirelim.
Ücretsiz Danışmanlık Alın