Başlangıç Seviyesi

Bu bölümde JavaScript değişkenlerini adım adım öğreneceksiniz. Başlangıç seviyesi içeriklerle, karmaşık terimlerden uzak durarak mantığı kavrayacağınız örneklerle ilerleyeceğiz.

Ana Başlık

Kod Örneği

~20

Dakika

JavaScript Değişkenleri - Başlangıç Seviyesi

JavaScript Değişkenleri: Bilginin Dijital Kutuları Temel Kavramlar

Kod yazarken sürekli farklı bilgilerle uğraşırız:

Bir kullanıcının adı, bir oyunun skoru veya bir sepetin toplam tutarı. Bu bilgileri daha sonra kullanabilmek için bir yere kaydetmemiz gerekir. İşte değişkenler, bu bilgileri bilgisayarın hafızasında sakladığımız isimlendirilmiş dijital kutulardır.

Temel Kavramlar

Değişken Nedir? (Analoji)

Bir taşınma sürecinde olduğunuzu düşünün. Eşyalarınızı kolilere koyarsınız ve üzerine "Mutfak Eşyaları" veya "Kitaplar" yazarsınız.

Kutu: Bilgisayarın belleğidir.
Kutunun Üstündeki Yazı: Değişkenin adıdır.
Kutunun İçindeki Eşya: Değişkenin değeridir.

</>

Isınma Turu: İlk Değişkenim ()

Mühendislik Laboratuvarına Geç

// Sadece bir kutu oluştur ve içine ismini yaz
let benimIsmim = "Gökhan"; 

// Bilgisayara bu kutunun içinde ne olduğunu sor
console.log(benimIsmim);

Kod Açıklamaları

Değişken Tanımlama

let benimIsmim = "Gökhan";

Bu satırda aslında bilgisayara şunu söylüyoruz: "Bana bir kutu hazırla, adını benimIsmim koy ve içine "Gökhan" yazısını koy."

let kelimesi, "bana bir kutu ver" demek. Bu kutunun adı benimIsmim ve içinde "Gökhan" yazıyor. İstediğin zaman bu kutunun içindekini değiştirebilirsin, çünkü let ile oluşturduk.

Tırnak işaretleri önemli! "Gökhan" şeklinde yazdığımızda bilgisayar bunun bir yazı (metin) olduğunu anlıyor. Tırnak olmadan yazsaydık, bilgisayar bunu başka bir şey sanabilirdi.

Konsola Yazdırma

console.log(benimIsmim);

Bu satır bilgisayara şunu soruyor: "Hey, benimIsmim adlı kutunun içinde ne var? Bana göster!"

console.log aslında bir komut. Bu komut, kutunun içindekini ekranda göstermek için kullanılır. Tarayıcının geliştirici araçlarını açtığında (F12 tuşu), orada "Gökhan" yazısını göreceksin.

Parantez içine yazdığımız benimIsmim, kutunun adı. Bilgisayar bu kutuyu bulup içindekini ekrana yazdırıyor. Eğer tırnak içinde "benimIsmim" yazsaydık, ekranda "benimIsmim" yazısını görürdük, ama biz kutunun içindekini görmek istiyoruz.

Tanımlama Yöntemleri

Değişken Tanımlama Yolları (Kutu Seçimi)

JavaScript'te bir koli oluştururken üç farklı anahtar kelime kullanırız. Bu seçim, byteOmi'deki "Bellek Yönetimi" ve "Scope" konularının temelidir:

let: Değeri daha sonra değiştirilebilen değişkenler için kullanılır. (Örn: Bir kullanıcının o anki puanı).
const: Değeri asla değişmeyecek, sabit bilgiler için kullanılır. ( Doğum tarihi veya Pi sayısı gibi ). Güvenli kod yazmanın ilk kuralı, aksi gerekmedikçe
"const" kullanmaktır.
var: JavaScript'in eski yöntemidir. Modern projelerde ve byteOmi standartlarında kafa karışıklığına yol açabildiği için genellikle tercih edilmez.

</>

Değişken Tanımlama ve Güncelleme (let vs const) ()

Mühendislik Laboratuvarına Geç

//  Örnek: Bir oyun skoru tasarlayalım
const oyuncuAdi = "KodYazari_01"; // Sabit: Oyuncunun adı değişmez
let skor = 0; // Değişken: Skor oyun boyunca artacak

console.log("Oyuncu: " + oyuncuAdi);
console.log("Başlangıç Skoru: " + skor);

// Oyuncu bir görev tamamladı
skor = skor + 10; 
console.log("Yeni Skor: " + skor);

// Hata Denemesi (ByteOmi Notu): 
// Eğer oyuncuAdi = "YeniIsim" yapmaya çalışırsan hata alırsın! 
// Çünkü const ile söz verdin: "Bu değişmeyecek."

Kod Açıklamaları

Sabit ve Değişken Tanımlama

const oyuncuAdi = "KodYazari_01";
let skor = 0;

const (constant) kullanarak bir sabit oluşturduk. Oyuncunun adı oyun boyunca değişmeyeceği için bu kutuyu kilitliyoruz.

let ile ise skor kutusunu oluşturduk. Oyun başladığında skor sıfır olduğu için içine 0 sayısını koyduk.

Veri Güncelleme

skor = skor + 10;

İşte let kullanmanın avantajı burada! Bilgisayara şunu diyoruz: "Skor kutusunu al, içindeki sayıya 10 ekle ve yeni sonucu tekrar kutunun içine koy."

Eğer aynısını oyuncuAdi için yapmaya çalışsaydık, JavaScript bize "Dur! Sen buna const (sabit) dedin, değiştiremezsin!" diyerek hata verirdi.

Bilgileri Birleştirme

console.log("Yeni Skor: " + skor);

Burada tırnak içindeki bir metin ile kutunun içindeki değeri + işareti kullanarak yan yana getirdik. Ekranda profesyonel bir mesaj görünmesini sağladık.

İsimlendirme Kuralları

İsimlendirme Kuralları (Kutunun Üzerine Ne Yazmalı?)

Bilgisayarın kutuları karıştırmaması için bazı kurallarımız var:

Anlamlı İsimler: x veya y yerine kullaniciAdi gibi açıklayıcı isimler seçmelisin.
CamelCase Kuralı: Birden fazla kelime kullanacaksan ilk kelime küçük, sonrakiler büyük harfle başlar (sepetToplamTutari).
Rakamla Başlamaz: İsimler harf, _ veya $ ile başlamalıdır.

</>

Yazılımda İsimlendirme Kuralları (CamelCase) ()

Mühendislik Laboratuvarına Geç

// ✅ Doğru İsimlendirme
let sepetToplamTutari = 150.50; // CamelCase
let _gizliSifre = "abc123";
let $dolarKuru = 32.5;

// ❌ Hatalı İsimlendirme
// let 1.siradakiKullanici = "Ahmet"; // Rakamla başlayamaz!
// let sepet-toplami = 200; // Tire (-) kullanılamaz!

Kod Açıklamaları

Doğru İsimlendirme (CamelCase)

let sepetToplamTutari = 150.50;

Değişken isminde birden fazla kelime varsa, ilk kelimeyi küçük harfle başlatıp sonraki her kelimenin ilk harfini büyük yapıyoruz. Buna CamelCase denir. Tıpkı bir devenin hörgüçleri gibi!

Bu kural zorunlu değildir ama yazılımcılar arasında ortak bir dildir. Kodunun profesyonel görünmesini sağlar.

Özel Karakterler

let _gizliSifre = "abc123";
let $dolarKuru = 32.5;

JavaScript biraz seçicidir; değişken isimleri harf dışında sadece alt çizgi _ veya dolar işareti $ ile başlayabilir.

Hatalı Kullanımlar (Yasaklar)

// let 1.siradakiKullanici = "Ahmet";
// let sepet-toplami = 200;

Bilgisayarın kafası karışmasın diye değişken isimlerini asla rakamla başlatmıyoruz.

Ayrıca kelimeler arasına tire - koyamazsınız; çünkü JavaScript bunu "çıkarma işlemi" sanabilir. Bu yüzden her zaman CamelCase kullanmak en güvenli yoldur.

Veri Tipleri

Veri Tipleri: Kutunun İçinde Ne Var?

Her kutuya her şeyi rastgele koymayız. JavaScript'te bilginin türü önemlidir:

Metinler (String): Tırnak içinde yazılan her şey. "Merhaba" gibi.
Sayılar (Number): Matematiksel işlemler yapabileceğin değerler. 25 veya 3.14 gibi.
Mantıksal Değerler (Boolean): Sadece iki ihtimal vardır: true (Doğru) veya false (Yanlış). (Örn: Işık açık mı? Kullanıcı giriş yaptı mı?).

</>

Temel Veri Tipleri (String, Number, Boolean) ()

Mühendislik Laboratuvarına Geç

// 1. String (Metin)
let mesaj = "Merhaba, Yazılıma Hoş Geldin!"; 

// 2. Number (Sayı)
let yas = 25;
let sicaklik = 18.5; // Ondalıklı sayılar da Number'dır

// 3. Boolean (Mantıksal)
let sayfaYuklendiMi = true; // Evet, yüklendi
let oturumAcikMi = false; // Hayır, açılmadı

console.log(mesaj);
console.log("Kullanıcının yaşı:", yas);
console.log("Sayfa durumu:", sayfaYuklendiMi);

Kod Açıklamaları

Metinler (String)

let mesaj = "Merhaba, Yazılıma Hoş Geldin!";

Bilgisayara bunun bir yazı olduğunu anlatmak için tırnak işaretlerini kullanıyoruz. Tırnak içindeki her şey artık bir String, yani karakter zinciridir.

Sayılar (Number)

let yas = 25;
let sicaklik = 18.5;

İster tam sayı olsun ister ondalıklı, JavaScript için bunlar Number tipindedir. Dikkat ettiysen burada tırnak kullanmıyoruz; çünkü tırnak koysaydık bilgisayar onlarla matematiksel işlem yapamaz, onları birer yazı sanırdı.

Mantıksal Değerler (Boolean)

let sayfaYuklendiMi = true;
let oturumAcikMi = false;

Bunlar yazılımın "evet/hayır" butonlarıdır. Boolean tipi sadece iki değer alabilir: true (doğru) veya false (yanlış). Karar verme mekanizmalarının temelidir.

Bilgileri Görüntüleme

console.log("Sayfa durumu:", sayfaYuklendiMi);

Konsola sadece değişkeni değil, yanına açıklayıcı bir metin de ekleyebiliriz. Virgül kullanarak hem bir metni hem de bir değişkenin içindeki değeri aynı anda ekrana yazdırabiliyoruz.

ByteOmi Hazırlığı

ByteOmi Hazırlığı: Perde Arkasında Ne Oluyor?

Burada sadece kutu oluşturmayı öğreniyoruz ama byteomi'ye geçtiğinde şunları keşfedeceksin:

Bilgisayar bu kutular için hafızada (RAM) tam olarak ne kadar yer ayırıyor?
Bir kutunun içine başka kutular (Nesneler ve Diziler) nasıl yerleştirilir?
Değişkenler kodun hangi bölgelerinde "görünür" olur, hangilerinde "gizli" kalır?

Bellek Yönetimi

Değişkenlerin Yaşam Döngüsü: Bir Kutu Ne Kadar Yaşar?

Değişkenler sadece bilgi saklamaz, aynı zamanda bir "ömre" sahiptirler. Bu kavram, byteomi'de göreceğin "Memory Management" konusunun giriş kapısıdır:

Doğum: Değişkeni tanımladığın an (let, const), bilgisayarın hafızasında ona bir yer ayrılır.
Yaşam: Kodun çalıştığı süre boyunca o bilgiye ihtiyacın olduğu sürece kutu orada durur.
Veda (Çöp Toplayıcı): Bilgisayar, artık kullanmadığın değişkenleri fark eder ve hafızada yer açmak için onları otomatik olarak siler. Buna JavaScript dünyasında "Garbage Collection" denir.

ByteOmi Notu: İleride byteomi'de, bu silme işleminin bazen neden başarısız olduğunu ve sitemizi nasıl yavaşlattığını (Memory Leak) inceleyeceğiz. Şimdilik bilmen gereken; her değişkenin bir ömrü olduğudur.

</>

Dinamik Veri Yönetimi ve Değişken Gücü ()

Mühendislik Laboratuvarına Geç

// Bir e-ticaret sitesi başlığı düşün
let urunAdi = "Kablosuz Kulaklık";
let fiyat = 1200;

// İndirim geldiğinde sadece tek bir yeri güncelliyoruz!
fiyat = 950; 

let mesaj = urunAdi + " şimdi sadece " + fiyat + " TL!";
console.log(mesaj);

Kod Açıklamaları

Veri Hazırlığı

let urunAdi = "Kablosuz Kulaklık";
let fiyat = 1200;

Başlangıçta ürünümüzün ismini ve etiket fiyatını değişkenlere atadık. Artık bu bilgilere tüm kod boyunca urunAdi ve fiyat isimleriyle ulaşabiliriz.

Dinamik Güncelleme

fiyat = 950;

İşte değişken kullanmanın sihri! Ürüne indirim geldiğinde, kodun içindeki her yeri tek tek değiştirmek yerine sadece fiyat kutusunun içindeki değeri güncelledik.

Bu işlemden sonra fiyat değişkenini kullanan her satır artık yeni değeri (950) otomatik olarak görecektir.

Mesaj Oluşturma

let mesaj = urunAdi + " şimdi sadece " + fiyat + " TL!";

Burada sabit metinlerle değişkenleri birleştirerek (concatenation) kullanıcıya özel bir kampanya mesajı hazırladık. Değişkenler güncellendiği sürece bu mesaj da her zaman en güncel bilgiyi yansıtacaktır.

Etki Alanı

Değişkenlerin Etki Alanı (Scope): Kutun Nerede Görünür?

Bir kutuyu evin içine mi koydun yoksa sadece kendi odana mı? JavaScript'te değişkenlerin "nereden erişilebilir" olduğu çok önemlidir:

Küresel (Global) Değişkenler: Kodun her yerinden ulaşılabilen, herkesin görebildiği kutulardır. (Gereksiz kullanımı kafa karışıklığı yaratır).
Yerel (Local) Değişkenler: Sadece belirli bir "blok" (örneğin bir fonksiyon veya döngü) içinde yaşayan, dışarıdan bakıldığında görünmeyen gizli kutulardır.
Neden Önemli? byteomi'de büyük projeler geliştirirken, değişkenleri birbirine karıştırmamak için onları doğru "odalar" (Scope) içine saklamayı öğreneceğiz.

</>

Etki Alanı ve Görünürlük (Scope) Testi ()

Mühendislik Laboratuvarına Geç

let genelDuyuru = "Sitemize Hoş Geldiniz!"; // Global: Her yerden görülür

{
    let odayaOzelMesaj = "Bu mesaj sadece bu oda içinde geçerli!"; // Local
    console.log(genelDuyuru); // Sorunsuz çalışır
    console.log(odayaOzelMesaj); // Sorunsuz çalışır
}

console.log(genelDuyuru); // Sorunsuz çalışır
// console.log(odayaOzelMesaj); // HATA VERİR! Çünkü oda dışında bu kutu yok.

Kod Açıklamaları

Küresel (Global) Alan

let genelDuyuru = "Sitemize Hoş Geldiniz!";

Bu değişken herhangi bir parantezin içinde değil, en dışarıda tanımlandı. Bu yüzden ona "Global" diyoruz. Kodun her yerinden, her odasından bu duyuruya ulaşılabilir.

Yerel (Local) Alan ve Blok Yapısı

{
    let odayaOzelMesaj = "...";
}

Süslü parantezler { } yazılımda yeni bir "alan" veya "oda" oluşturur. odayaOzelMesaj bu odanın içinde doğdu.

Odadaki bir kişi hem dışarıdaki genelDuyuru'yu görebilir hem de odadaki özel mesajı okuyabilir. Bu yüzden parantez içindeki her iki console.log da sorunsuz çalışır.

Erişim Sınırı ve Güvenlik

console.log(odayaOzelMesaj); // HATA!

Parantezlerin dışına çıktığımızda, o "oda" artık kapandı ve içindeki her şey silindi. Bilgisayara dışarıdayken "Odada ne vardı?" diye sorduğumuzda, "Hangi oda? Orada hiçbir şey yok" diyerek hata verir.

Neden Önemli? Bu yapı, değişkenlerin birbirine karışmasını önler ve belleği gereksiz yere yormaz.

Vizyon Bölümü

Neden Değişken Kullanıyoruz?

Sadece bilgiyi saklamak için değil, güncelleyebilmek için değişken kullanırız.

Eğer bir kullanıcının ismini sitenin 50 farklı yerinde kullanıyorsan ve değişken kullanmadıysan; kullanıcı ismini değiştirdiğinde 50 yeri de tek tek düzeltmen gerekir.

Ama bir değişken (const kullaniciAdi) kullandıysan, sadece kutunun içindeki değeri değiştirmen yeterlidir; tüm site anında güncellenir. İşte bu, yazılım mimarisinin en temel verimlilik kuralıdır.

Görselleştirme

Değişkenler: Etiketli Saklama Kutuları

Bellek Yönetimi

const userName

"Alice"

String (Metin)

let score

Number (Sayı)

</>

Mini Proje: Kullanıcı Kartı Oluşturma ()

Mühendislik Laboratuvarına Geç

// 1. Sabit bilgiler (Değişmeyecek)
const platformAdi = "Softla";
const dogumYili = 1998;

// 2. Değişebilen bilgiler
let kullaniciAdi = "Yazilimci_Adayi";
let takipciSayisi = 120;
let aktifMi = true;

// 3. Bilgileri birleştirip ekrana yazdıralım
console.log("Platform: " + platformAdi);
console.log(kullaniciAdi + " kullanıcısının " + takipciSayisi + " takipçisi var.");
console.log("Sistem Aktif mi?: " + aktifMi);

// 4. Bir güncelleme yapalım
takipciSayisi = takipciSayisi + 1; // Bir kişi takip etti!
console.log("Yeni Takipçi Sayısı: " + takipciSayisi);

Kod Açıklamaları

Değişmez Veriler (Sabitler)

const platformAdi = "Softla";
const dogumYili = 1998;

Bir profil sayfasında platform ismi veya kullanıcının doğum yılı gibi bilgiler genellikle değişmez. Bu yüzden bunları const ile tanımlayarak güvene alıyoruz.

Dinamik Kullanıcı Bilgileri

let kullaniciAdi = "Yazilimci_Adayi";
let takipciSayisi = 120;
let aktifMi = true;

Kullanıcının ismi değişebilir, takipçileri artabilir veya hesabı pasif duruma geçebilir. Bu tip hareketli verileri let kullanarak oluşturuyoruz. Dikkat edersen her veri tipini (String, Number, Boolean) ihtiyacımıza göre seçtik.

Veri Güncelleme ve Çıktı

takipciSayisi = takipciSayisi + 1;

"Bir kişi takip etti!" senaryosunda, mevcut takipciSayisi değerini alıp üzerine 1 ekledik ve kutunun içini güncelledik.

Ardından console.log ile tüm bu bilgileri birleştirerek ekranda anlamlı bir kullanıcı özeti oluşturduk.