“JavaScript Scope: Detaylı Anlatım ve Örneklerle”

🔍 JavaScript Scope: “Ben Buradayım, Ama Sen Beni Görebiliyor musun?”

JavaScript’te scope, değişkenlerin nerede yaşadığını, kimlerle konuştuğunu ve nerelere çıkmasının yasak olduğunu belirleyen gizli bir anayasa gibidir.

Bu yazıda scope’u;

• bol örnekli
• bol esprili
• bol pratikli
• ve “Aaa ben bunu yanlış biliyormuşum” dedirten detaylarla anlatıyoruz.

Kemerleri bağla aşkım, çünkü bu yolculuk biraz uzun ama çok öğretici 🚀

🧠 Scope Nedir? (İnsan Diliyle)

Scope = Bir değişkenin erişilebilir olduğu alan

Yani JavaScript şunu sorar:

“Bu değişkeni burada kullanmana izin var mı?” 👮‍♂️

Gerçek hayat benzetmesi:

• Global scope → Herkesin girebildiği AVM 🏬
• Function scope → Ev 🏠
• Block scope → Kilitli oda 🚪

🌍 1. Global Scope – “Ben Her Yerdeyim”

Global scope’ta tanımlanan değişkenler dosyanın her yerinden erişilebilir.

let siteName = "Code & Kahve";

function showSite() {
  console.log(siteName);
}

showSite(); // Code & Kahve

🔎 Ne oluyor burada?

• siteName en üstte tanımlı → global scope
• Fonksiyon içinden çağrılıyor → sorun yok

⚠️ Global Scope Tehlikesi

let user = "Cansu";
let user = "Ahmet"; // ❌ SyntaxError

💥 Aynı isim, aynı alan, büyük kavga.

✅ İpucu:

• Global scope’u minimumda tut
• Gerçekten her yerden lazım değilse → kullanma

🏠 2. Function Scope – “Evime Giren Ayakkabıyı Çıkarır”

Fonksiyon içinde tanımlanan değişkenler sadece oraya aittir.

function calculateAge() {
  let age = 25;
  console.log(age);
}

calculateAge(); // 25
console.log(age); // ❌ ReferenceError

🔍 Açıklama:

• age sadece calculateAge fonksiyonunun misafiri
• Dışarı çıkmak isterse → kapı yüzüne kapanır 🚪

🧠 Pratik Bilgi:

Fonksiyon scope, hafızayı temiz tutar.
Ne kadar az erişim, o kadar az bug 🐞

🧱 3. Block Scope – “Bu Alan Özel”

Block scope { } ile oluşur.
let ve const bu konuda çok disiplinlidir.

if (true) {
  let drink = "kahve";
  const sugar = false;
  console.log(drink);
}

console.log(drink); // ❌

🎯 Neden böyle?

• drink sadece if bloğu içinde var
• Dış dünya onu tanımıyor

🧠 Gerçek Hayat İpucu:

Loop’larda block scope hayat kurtarır:

for (let i = 0; i < 3; i++) {
  console.log(i);
}

console.log(i); // ❌

let olmasaydı, i her yere bulaşırdı 😬

🤡 var Gerçeği – “Eski Ama Sorunlu”

if (true) {
  var mood = "mutlu";
}

console.log(mood); // mutlu

😐 Neden?

• var block scope’u umursamaz
• Ya function scope’ta olur ya global’e kaçar

🚫 Modern JS Tavsiyesi:

var kullanma, gerek yok, gerekse bile düşün.

🧬 Lexical Scope – “Nerede Yazıldıysan Oradasın”

JavaScript scope’u kodun yazıldığı yere göre belirler.

function outer() {
  let language = "JavaScript";

  function inner() {
    console.log(language);
  }

  inner();
}

outer(); // JavaScript

🔍 Açıklama:

• inner, outer’ın içinde yazıldı
• Bu yüzden language’ı görebiliyor

JS der ki: “Ben çalışırken değil, yazarken bakarım” ✍️

🔒 Closure – “Unutmayan Fonksiyon” 💘

Closure, scope’un romantik halidir.

function wallet() {
  let money = 0;

  return function () {
    money += 10;
    console.log(money);
  };
}

const earn = wallet();

earn(); // 10
earn(); // 20
earn(); // 30

😲 Nasıl yani?

• wallet bitti
• Ama money hâlâ yaşıyor

Çünkü:

Closure, dış scope’u hatırlar 🧠

🧠 Nerede kullanılır?

• Sayaçlar
• Özel veriler
• State yönetimi

🧠 Scope Chain – “Arama Motoru Mantığı”

JavaScript değişkeni ararken:

1. Kendi scope’una bakar
2. Bulamazsa → üst scope
3. En son → global

let food = "pizza";

function eat() {
  console.log(food);
}

eat(); // pizza

Bulamazsa:

console.log(drink); // ❌ ReferenceError

🚦 En Sık Yapılan Hatalar

❌ Gereksiz global değişken
❌ var ile block beklemek
❌ Aynı isimli değişkenleri üst üste kullanmak
❌ Closure mantığını yanlış anlamak

✅ Altın Kurallar (Kaydetmelik)

✨ const varsayılanın olsun
✨ let gerektiğinde gelsin
🚫 var’ı emekliye ayır
✨ Değişkeni en küçük scope’ta tanımla
✨ Okunabilirlik > Ego

💬 Son Söz

Scope, JavaScript’in gizli kahramanıdır.

Anladığında:

• Kodun sadeleşir
• Bug’lar azalır
• Sen de “Ben JS biliyorum” havasına girersin 😎