Tüm blog yazıları

JavaScript’te Scope (Kapsam) Nedir?

Yazılım öğrenmeye başladığında en çok kafanı karıştırabilecek konulardan biri scope yani kapsam konusudur. Scope aslında şunu söyler: “Bir değişkeni nerede tanımlarsan, onu nerelerde kullanabilirsin?” Bu yazı

eminbasbayan4 dk okuma
JavaScript’te Scope (Kapsam) Nedir?

Yazılım öğrenmeye başladığında en çok kafanı karıştırabilecek konulardan biri scope yani kapsam konusudur. Scope aslında şunu söyler:

“Bir değişkeni nerede tanımlarsan, onu nerelerde kullanabilirsin?”

Bu yazıda adım adım scope mantığını öğreneceğiz.

1. Scope Neden Önemli?

Bir program yazarken değişkenleri (mesela let age = 25;) farklı yerlerde tanımlarız. Ama bu değişkeni her yerde kullanamazsın. Yanlış yerde kullanırsan:

  • Program hata verir,
  • Beklemediğin sonuçlar çıkar,
  • Kodun anlaşılmaz hale gelir.

Bunu şöyle düşün: Bir oda içinde konuştuğunu hayal et. O odada söylediklerini sadece odadakiler duyabilir. Dışarıdaki insanlar senin sesini duyamaz. İşte değişkenlerin dünyası da buna benzer: Hangi odada tanımlandıysan, sadece orada geçerlisin.

2. Scope Türleri

JavaScript’te temelde 4 farklı scope vardır:

  1. Global Scope
  2. Function Scope
  3. Block Scope
  4. Lexical Scope

Şimdi bunları tek tek inceleyelim.

2.1 Global Scope

Bir değişkeni herhangi bir fonksiyonun veya bloğun dışında tanımlarsan, bu değişken her yerden erişilebilir.

jsx
let appName = "ChatApp";

function printApp() {
  console.log(appName); // "ChatApp"
}

printApp();
console.log(appName); // "ChatApp"

Burada appName globaldir, hem fonksiyonun içinde hem dışında erişilebilir.

Ama dikkat: Fazla global değişken kullanmak kodu bozar. Her yerden ulaşılabildiği için kontrolü zorlaşır.

2.2 Function Scope

Bir fonksiyonun içinde tanımlanan değişken sadece o fonksiyonun içinde geçerlidir. Dışarıdan erişilemez.

jsx
function prepareTea() {
  let cups = 3;
  console.log("Hazırlanan çay:", cups);
}

prepareTea();           // "Hazırlanan çay: 3"
console.log(cups);      // HATA: cups tanımlı değil

cups değişkeni sadece fonksiyonun içinde yaşar. Fonksiyon dışına çıkınca ortadan kaybolur.

Fonksiyonları küçük makineler gibi düşünebilirsin. İçindeki değişkenler sadece o makinenin parçalarıdır.

2.3 Block Scope

Blok dediğimiz şey, süslü parantez {} ile çevrilmiş alanlardır. Örneğin:

  • if bloğu
  • for döngüsü
  • while döngüsü

Eğer bu blokların içinde let veya const ile değişken tanımlarsan, sadece o blokta geçerlidir.

jsx
if (true) {
  const message = "Merhaba!";
  console.log(message); // "Merhaba!"
}

console.log(message); // HATA: message tanımlı değil

message sadece if bloğunda vardır, dışarıda yoktur.

Ama eğer var kullanırsan durum değişir:

jsx
if (true) {
  var msg = "Hoş geldin!";
}
console.log(msg); // "Hoş geldin!" → blok dışına taştı!

var eski JavaScript’ten kalma bir özelliktir ve block scope’u dikkate almaz. Bu yüzden modern JS’te let ve const kullanmanı tavsiye ederim.

2.4 Shadowing (Gölgeleme)

Aynı isimde bir değişken hem dışarıda hem içeride tanımlanabilir. Bu durumda içteki değişken dıştakini gizler.

jsx
let user = "Zeynep";

function login() {
  let user = "Ahmet";
  console.log("Giriş yapan:", user); // Ahmet
}

login();
console.log("Dışarıdaki:", user); // Zeynep

Fonksiyon içindeki user, dışarıdakini gölgeler. Ama aslında ikisi farklı değişkenlerdir.

2.5 Scope Chain (Kapsam Zinciri)

JavaScript bir değişkeni ararken şöyle davranır:

  1. Önce bulunduğu yerde bakar.
  2. Bulamazsa bir üst kapsama çıkar.
  3. En tepeye kadar bakar.
  4. Bulamazsa hata verir.
jsx
let city = "İzmir";

function showCity() {
  console.log(city);
}

showCity(); // "İzmir"

showCity fonksiyonunda city yoktu. JavaScript bir üst kapsama baktı, buldu ve kullandı.

2.6 Lexical Scope (Sözcüksel Kapsam)

Lexical scope, bir fonksiyonun tanımlandığı yere göre dışarıdaki değişkenleri görebilmesi demektir. Yani içeriden dışarıya erişim vardır, ama dışarıdan içeriye erişim yoktur.

jsx
function outer() {
  const token = "12345";

  function inner() {
    console.log(token); // "12345"
  }

  inner();
}

outer();

inner fonksiyonu token’a erişebilir çünkü dış kapsama bakabilir. Ama outer fonksiyonu, inner’ın içindeki değişkenlere ulaşamaz.

3. Neden let ve const, var Değil?

  • var block scope’u dikkate almaz.
  • Hatalı kullanımlara yol açar.
  • Modern JavaScript’te let ve const daha güvenli.

Kural:

  • Varsayılan olarak const kullan.
  • Eğer değer değişecekse let kullan.
  • var kullanma.

4. Mini Özet

  • Global Scope → Her yerden erişilebilir.
  • Function Scope → Sadece fonksiyonun içinde geçerli.
  • Block Scope → let ve const ile blok içinde sınırlı.
  • Shadowing → İçteki değişken dıştakini gizler.
  • Scope Chain → JavaScript değişkeni yukarı doğru arar.
  • Lexical Scope → İç fonksiyon dıştaki değişkenleri görebilir.

5. Sonuç

Scope kavramı ilk başta karmaşık görünebilir ama aslında çok mantıklıdır:

  • Değişkenleri doğru yerde tanımlarsan kodun daha temiz ve güvenli olur.
  • Hataları daha kolay bulursun.
  • Başkası senin kodunu okuduğunda kolayca anlayabilir.

Unutma: Scope, değişkenlerin dünyasıdır. Hangi değişkenin nerede yaşadığını bilirsen, JavaScript’te çok daha rahat ilerlersin.

JavaScript Classes ile pratik uygulamalar, metotlar arası iletişim ve gerçek dünya kod örnekleri
JavaScript Dersleri9 dk okuma

JavaScript Classes - Pratik Uygulamalar

JavaScript class'ları ile pratik uygulamalara geçin! Metotlar arası iletişimden constructor'da metot çağırmaya, kod tekrarını azaltmaktan gerçek dünya senaryolarına kadar class kullanımının inceliklerini keşfedin. Kendi alışveriş sepeti örneğinizle bilginizi pekiştirin.

Yazıyı oku
JavaScript class yapısını gösteren bir kod örneği, ES6 ile modern nesne oluşturma
JavaScript Dersleri9 dk okuma

JavaScript Classes

ES6 ile JavaScript'e gelen class yapısı sayesinde nesne oluşturmak artık çok daha kolay ve düzenli! Constructor function karmaşasından kurtulup, okunabilir ve yönetilebilir kodlar yazmak isteyenler için modern JavaScript'in temel taşı olan class'ları tüm detaylarıyla keşfedin. Bu rehberle nesne şabl

Yazıyı oku
JavaScript kodunda Constructor Function ve new keyword'ü ile nesne oluşturma örnekleri
JavaScript Dersleri8 dk okuma

Constructor Functions ve new Keyword

Factory Function'ların hafıza israfı sorununa Constructor Function'lar ve new keyword'ü ile son verin! Metotları paylaştırarak JavaScript objelerini daha verimli nasıl oluşturacağınızı, new'in perde arkasında neler yaptığını ve prototype sisteminin gücünü bu rehberde keşfedin.

Yazıyı oku

Çerez tercihlerin

Platformun çalışması için zorunlu çerezler kullanıyoruz. İzin verirsen anonim kullanım verilerini ölçüyoruz. Ayrıntıları incele