JavaScript Syntax: Temel Bilgiler ve Örnek Kodlar

JavaScript Syntax: Temel Bilgiler ve Örnek Kodlar

(Kod konuşur… ama önce dilini öğrenmemiz gerekir.)

Bir sabah bilgisayarı açtın.
Yeni bir .js dosyası oluşturdun.
İmleç yanıp sönüyor.

Ve JavaScript sana bakıyor:
“Ben hazırım. Sen hazır mısın?”

Hazırsan kemerleri bağla.
Bu yazıda JavaScript syntax’ını sadece öğrenmeyeceğiz…
Onu çözeceğiz. Parçalara ayıracağız. Mizahla yoğuracağız.


🧠 1. Değişkenler (Variables) – Hafızanın Küçük Kutuları

Değişken dediğimiz şey, JavaScript’in hafızasında saklanan küçük kutulardır.

🎩 let – Modern ve Esnek

let skor = 10;
skor = 20;

console.log(skor);

Ne oldu burada?

  • let skor = 10; → Hafızada bir kutu açıldı.
  • skor = 20; → Kutunun içeriği değiştirildi.
  • console.log(skor); → 20 yazdırır.

let değiştirilebilir. Günlük kullanım için idealdir.


👑 const – Sadık ve Kararlı

const pi = 3.14;
pi = 3.15; // HATA!

const değiştirilemez.

Ama dikkat ⚠️
Eğer obje ise içeriği değişebilir:

const kullanici = {
  isim: "Cansu"
};

kullanici.isim = "Ahmet";

console.log(kullanici.isim); // Ahmet

Kutuyu değiştiremezsin, ama içindeki eşyayı değiştirebilirsin.


👴 var – Tarihten Gelen Misafir

var mesaj = "Merhaba";

var eskiden kullanılırdı.
Ama scope (kapsam) konusunda kafa karıştırır.

Öneri: Modern projede let ve const kullan.


🔍 Scope (Kapsam) – Kodun Sınırları

if (true) {
  let sayi = 5;
}

console.log(sayi); // HATA!

let block scope’a sahiptir.
Yani {} içinde tanımlandıysa dışarı çıkamaz.

Ama var kullanırsan:

if (true) {
  var sayi = 5;
}

console.log(sayi); // 5

Ve işte burada sürpriz başlar 😅


🔢 2. Veri Türleri – JavaScript’in Karakterleri

String

let isim = "Cansu";

String bir metindir.

Template literal kullanımı:

let yas = 25;
console.log(`Benim adım ${isim} ve yaşım ${yas}`);

Backtick (`) kullanırsan içine değişken koyabilirsin.


Number

let fiyat = 99.99;

JavaScript’te integer ve float ayrı değil. Hepsi number.


Boolean

let aktifMi = true;

Sadece iki değeri vardır: true veya false.


Undefined vs Null

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

Undefined → Tanımlandı ama değer verilmedi.

let y = null;

Null → Bilinçli olarak boş bırakıldı.

Aralarındaki fark:
Undefined kazara olur.
Null bilinçli tercihtir.


➕ 3. Operatörler – Matematikten Daha Fazlası

=== vs ==

console.log(5 == "5");   // true
console.log(5 === "5");  // false

== tip dönüşümü yapar.
=== hem değeri hem tipi kontrol eder.

Profesyonel hayatta her zaman === kullan.


Mantıksal Operatörler

let yas = 20;
let ehliyet = true;

if (yas >= 18 && ehliyet) {
  console.log("Araba sürebilirsin 🚗");
}

  • && → ve
  • || → veya
  • ! → değil

🔀 4. Koşullar – JavaScript’e Karar Vermeyi Öğretmek

let not = 75;

if (not >= 90) {
  console.log("AA");
} else if (not >= 70) {
  console.log("BB");
} else {
  console.log("Kaldın 😅");
}

Koşullar yukarıdan aşağı kontrol edilir.


Ternary Operator – Mini If

let yas = 18;
let sonuc = yas >= 18 ? "Yetişkin" : "Çocuk";

console.log(sonuc);

Bu kısa if’tir.


🔁 5. Döngüler – Sabırlı Robot

For Döngüsü

for (let i = 1; i <= 5; i++) {
  console.log(i);
}

Yapısı:

  • Başlangıç
  • Koşul
  • Artış

While Döngüsü

let i = 0;

while (i < 3) {
  console.log("Merhaba");
  i++;
}

Koşul doğru olduğu sürece çalışır.

Dikkat: Sonsuz döngü yapma 😅


🧩 6. Fonksiyonlar – Kodun Süper Gücü

Normal Fonksiyon

function topla(a, b) {
  return a + b;
}

console.log(topla(3, 5)); // 8

Açıklama:

  • a ve b parametre
  • return sonucu geri verir

Arrow Function

const carp = (a, b) => a * b;

console.log(carp(4, 5));

Daha kısa, daha modern.


Default Parametre

function selam(isim = "Misafir") {
  console.log(`Merhaba ${isim}`);
}

selam(); // Merhaba Misafir


📦 7. Array – Liste Yapmak

let meyveler = ["Elma", "Armut", "Muz"];

console.log(meyveler[0]); // Elma

Döngü ile Kullanım

meyveler.forEach(function(meyve) {
  console.log(meyve);
});

Modern hali:

meyveler.forEach(meyve => console.log(meyve));


🧠 8. Object – Gerçek Hayat Modeli

let kullanici = {
  isim: "Cansu",
  yas: 25,
  aktif: true
};

console.log(kullanici.isim);

Object, anahtar-değer yapısıdır.


⚡ Mini Proje – Küçük Kullanıcı Sistemi

const kullanici = {
  isim: "Cansu",
  yas: 25,
  girisYaptiMi: true
};

function kullaniciKontrol(kisi) {
  if (kisi.girisYaptiMi && kisi.yas >= 18) {
    return `Hoş geldin ${kisi.isim} 🎉`;
  } else {
    return "Erişim reddedildi.";
  }
}

console.log(kullaniciKontrol(kullanici));

Bu projede ne var?

  • Object
  • Fonksiyon
  • Koşul
  • Boolean
  • Template literal

Hepsi birlikte çalışıyor.


🎯 Profesyonel İpuçları

✅ Her zaman === kullan
const mümkün olduğunca tercih et
✅ Kodunu küçük parçalara böl
✅ Yorum satırı yaz
✅ Hata mesajlarını oku (Google’dan önce onları dinle 😄)


🚀 Sonuç

JavaScript syntax öğrenmek bir dili öğrenmek gibidir.

Başta zor gelir.
Sonra cümle kurarsın.
Sonra hikâye yazarsın.
Sonra uygulama geliştirirsin.

Ve bir gün şunu yazarsın:

console.log("Ben artık JavaScript biliyorum 🚀");

Ve gerçekten biliyor olursun.

Comments

No comments yet. Why don’t you start the discussion?

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir