JavaScript Temelleri: Değişkenler, Veri Tipleri ve Örnekler

JavaScript başlangıç kodları ile: Bu yazıda ne öğreneceksiniz?

Bu rehber, javascript başlangıç kodları yazmaya başlarken en kritik iki konuyu netleştirir: değişkenler (var/let/const) ve veri tipleri (primitifler ve nesneler). Amaç; ezber yapmak değil, küçük örneklerle “neden böyle?” sorusuna cevap vererek hızlıca pratik yapabilmeniz.

Yazı boyunca, dilin temel davranışları için MDN veri tipleri rehberi, MDN let açıklaması, resmi tanım için ECMAScript (ECMA-262) spesifikasyonu ve öğrenme odaklı özet için web.dev referans alınır.

1) Değişken nedir? JavaScript’te değişken tanımlama

Değişken, bir değeri isimle tutmanıza yarar. JavaScript’te değişken tanımlamak için en yaygın üç anahtar kelime vardır: var, let, const. Farkları yalnızca “yeniden atama olur mu?” değil; aynı zamanda kapsam (scope) ve bazı sürprizleri azaltan kurallarla ilgilidir.

var / let / const hızlı karşılaştırma

Bu davranışların ayrıntıları için MDN’nin let açıklaması özellikle kapsam (scope), yeniden tanımlama ve Temporal Dead Zone (TDZ) başlıklarında net örnekler verir.

Kapsam (scope): Değişkenin “nereden görüldüğü”

Blok, genellikle süslü parantez içidir: { ... }. let ve const blok kapsamlıdır; yani sadece tanımlandıkları blok içinde erişilebilirler. var ise fonksiyon kapsamlıdır; blok içine yazılsa bile çoğu durumda fonksiyonun tamamından erişilebilir gibi davranır. (Detaylar: MDN)

Hoisting ve Temporal Dead Zone (TDZ) nedir?

JavaScript motoru, bazı bildirimleri çalıştırma sırasında farklı bir şekilde ele alır; bu davranış pratikte “hoisting” olarak anılır. let ve const için önemli nokta: Bildirim satırından önce erişmeye çalışırsanız, TDZ nedeniyle ReferenceError görebilirsiniz. (Kaynak: MDN let)

Kod örneği:

// TDZ örneği
console.log(x); // ReferenceError (x bildirilmeden önce)
let x = 10;

// var örneği (davranış farklı görünebilir)
console.log(y); // undefined (bildirim önce, atama sonra yapılır gibi görünür)
var y = 10;

Not: Buradaki amaç “hangi satır ne verir?” ezberi değil; okunabilirlik ve sürprizleri azaltmak. Bu nedenle modern anlatımlarda var yerine let/const kullanımı daha yaygındır. (Bkz. MDN, web.dev)

2) JavaScript veri tipleri: Primitifler ve nesneler

JavaScript’te veri tiplerini iki büyük grupta düşünmek işinizi kolaylaştırır:

• Primitif (yalın) tipler: Tek bir değer temsil eder ve genel olarak değiştirilemez (immutable) davranırlar.
• Nesneler (objects): Anahtar-değer çiftleri ve koleksiyonlar gibi daha karmaşık yapıları temsil eder; genel olarak değiştirilebilir (mutable) davranır.

Primitif türlerin listesi (Number, String, Boolean, null, undefined, BigInt, Symbol) ve nesne/primitive ayrımı, dilin resmi tanımı (ECMA-262) ve eğitim dokümanlarında (ör. web.dev, MDN) tutarlı şekilde anlatılır.

Primitif veri tipleri (7 temel tür)

• Number: Tam sayı ve ondalıklı sayıları temsil eder.
  Örnek: 42, 3.14
• String: Metin değerleri.
  Örnek: "Merhaba", 'JS'
• Boolean: true / false.
• undefined: Değer atanmamış olma durumunu ifade etmek için sık görülür.
• null: Bilinçli olarak “boş” değer vermek için kullanılır.
• BigInt: Çok büyük tam sayılar için.
• Symbol: Benzersiz tanımlayıcılar için; çoğunlukla nesne anahtarlarında ve gelişmiş senaryolarda karşınıza çıkar.

Bu türlerin kavramsal tanımı ve örnekleri için: MDN Data structures ve web.dev Data types.

Nesneler (Object) ve diziler (Array)

Nesneler, JavaScript’te “kompleks yapı” denince merkezde yer alır. Diziler (Array) de JavaScript’te nesnenin özel bir türü olarak ele alınır. (Kaynak: MDN)

Kod örneği:

const user = { name: "Ada", age: 28 };
const scores = [10, 20, 30];

console.log(user.name); // "Ada"
console.log(scores[0]); // 10

const ile “değişmezlik” karışıklığı: Yeniden atama vs mutasyon

Yeni başlayanların en sık karıştırdığı nokta şudur: const, değişken ismine (binding) yeniden atamayı engeller; fakat eğer const ile tuttuğunuz değer bir nesne veya dizi ise, içeriğini değiştirebilirsiniz. (Kaynak: MDN)

Kod örneği:

const profile = { city: "Austin" };
profile.city = "Seattle"; // mümkün: nesnenin içeriği değişir (mutasyon)

// profile = { city: "Miami" }; // TypeError: const değişkene yeniden atama yapılamaz

Primitifler “değer” gibi, nesneler “referans” gibi davranır

Bu ayrım; kopyalama, karşılaştırma ve fonksiyonlara parametre geçirme davranışlarını anlamayı kolaylaştırır. MDN, primitif ve nesne ayrımını bu zihinsel modelle açıklamayı önerir. (Kaynak: MDN Data structures)

Kod örneği:

// Primitif: kopya (değer) gibi davranır
let a = 5;
let b = a;
b = 6;
console.log(a); // 5
console.log(b); // 6

// Nesne: aynı referansı paylaşabilirsiniz
const obj1 = { n: 1 };
const obj2 = obj1;
obj2.n = 2;
console.log(obj1.n); // 2 (obj1 ve obj2 aynı nesneyi işaret ediyor)

Pratik öneri: Yeniden atama yapmayacaksanız const kullanmak, kodu okuyan kişiye “bu isim başka bir değere dönmeyecek” mesajı verir. Yeniden atama gerekiyorsa let kullanın. (Kaynak: MDN, web.dev)

3) Temel JS örnekleri: Değişkenler ve veri tipleriyle pratik

Aşağıdaki örnekler, “en çok kullanılan” temel desenleri gösterir. Buradaki amaç, küçük parçalarla kas hafızası kazanmaktır.

Örnek 1: let ile sayaç (yeniden atama gereken durum)

Kod örneği:

let count = 0;
count = count + 1;
count += 1;
console.log(count); // 2

Örnek 2: const ile sabit referanslar (yeniden atama yoksa)

Kod örneği:

const siteName = "Example";
// siteName = "New"; // TypeError: yeniden atama yapılamaz
console.log(siteName); // "Example"

Örnek 3: String birleştirme ve değişken kullanımı

Kod örneği:

const firstName = "Ada";
const lastName = "Lovelace";
const fullName = firstName + " " + lastName;
console.log(fullName); // "Ada Lovelace"

Örnek 4: null ve undefined farkını hissetmek

Genel bir kural gibi düşünebilirsiniz: undefined genelde “henüz değer yok”, null ise “bilerek boş” anlamına gelecek şekilde kullanılır. (Bkz. MDN, web.dev)

Kod örneği:

let aValue;
console.log(aValue); // undefined

const bValue = null;
console.log(bValue); // null

Örnek 5: Array (dizi) ile liste işlemleri

Kod örneği:

const tasks = ["Read", "Practice", "Build"];
tasks.push("Review"); // dizi içeriği değişebilir
console.log(tasks.length); // 4

Örnek 6: Object ile basit veri modeli

Kod örneği:

const product = { id: 1, name: "Keyboard", price: 49.99 };
product.price = 44.99; // mutasyon mümkün
console.log(product); // { id: 1, name: "Keyboard", price: 44.99 }

4) Sık yapılan karışıklıklar ve hızlı çözümler

1) “var kullanmak yasak mı?”

Hayır. Resmi dil tanımı var’ı “kaldırılmış” saymaz; ancak modern kod tabanlarında let/const daha çok tercih edilir çünkü blok kapsamı ve TDZ gibi kurallar bazı sürprizleri azaltmaya yardımcı olur. (Kaynak: MDN)

2) “const = tamamen değişmez” değil

const, değişken adına yeniden atamayı engeller. Nesne/dizi gibi yapılarda içerik değişebilir. Gerçek “derin değişmezlik” (deep immutability) ayrı teknikler gerektirir ve bu rehberin kapsamı dışındadır. (Kaynak: MDN)

3) Primitifler ve nesneler: neden önemli?

Çünkü bu ayrım, kopyalama ve karşılaştırma davranışlarını etkiler. Primitifler tek bir değer gibi davranırken nesneler çoğu senaryoda aynı referans üzerinden taşınır. (Kaynak: MDN)

5) Hızlı kontrol listesi: Doğru değişkeni doğru yerde seçin

• Bu değişken yeniden atama gerektirmiyor mu? const ile başlayın.
• Değer zamanla değişecek mi (sayaç, durum, döngü içinde artış)? let seçin.
• Legacy bir kod tabanında mısınız ve var zaten yoğun mu? Değişiklik yapmadan önce kapsam etkisini test edin; gerekirse aşamalı geçiş planlayın.
• “Boş değer” ihtiyacınız var mı? Anlamınızı netleştirin: null (bilerek boş) mı, undefined (değer yok) mu?

6) Mini alıştırmalar (10 dakikalık pratik)

1. Değişken seçimi: Bir kullanıcının adını ve giriş sayısını tutun. Hangisi const, hangisi let olmalı?
2. Tip tanıma: Bir dizide (Array) 3 farklı tip saklayın: Number, String, Boolean. Sonra bir nesneye (Object) taşıyın.
3. Değer vs referans: Bir primitif (Number) kopyalayın ve yeni değişkeni değiştirin; sonra bir nesneyi kopyalayıp içindeki alanı değiştirin. Sonucu gözlemleyin.
4. const ve mutasyon: const ile bir nesne tanımlayın; bir property ekleyin. Ardından aynı isimli değişkene yeni nesne atamayı deneyin ve sonucu gözlemleyin.

Kaynaklar ve ileri okuma

• MDN: JavaScript data types and data structures
• MDN: let (scope, TDZ, kurallar)
• web.dev: Data types and structures
• ECMA-262: ECMAScript 2023 Language Specification

Not: JavaScript, zaman içinde güncellenen bir dildir. En kesin teknik tanım her zaman güncel ECMA-262 sürümüdür; öğretici kaynaklar ise bu davranışları daha anlaşılır hale getirir.