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

JavaScript’te scope (değişken kapsamı), bir değişkenin kodun hangi bölümlerinden erişilebileceğini belirler. Scope, programın doğru çalışmasını sağlamak ve değişkenlerin çakışmasını önlemek için kritik öneme sahiptir. Bu yazıda, JavaScript’te scope konusunu detaylandıracak ve örnek kod blokları ile açıklayacağız.

Global Scope

Global scope, bir değişkenin veya fonksiyonun tüm kod boyunca erişilebilir olduğu kapsamdır. Global değişkenler, fonksiyonların dışında tanımlanır.

var globalVar = "I'm a global variable";

function accessGlobalVar() {
    console.log(globalVar); // "I'm a global variable"
}

accessGlobalVar();
console.log(globalVar); // "I'm a global variable"

Yukarıdaki örnekte, globalVar değişkeni global scope’da tanımlanmıştır ve hem fonksiyon içinde hem de dışında erişilebilir.

Local Scope

Local scope, değişkenlerin sadece tanımlandıkları fonksiyon veya blok içerisinde erişilebilir olduğu kapsamdır.

Function Scope

JavaScript’te bir fonksiyon içinde tanımlanan değişkenler, sadece o fonksiyonun içinde erişilebilir.

function myFunction() {
    var localVar = "I'm a local variable";
    console.log(localVar); // "I'm a local variable"
}

myFunction();
console.log(localVar); // Uncaught ReferenceError: localVar is not defined

Bu örnekte, localVar değişkeni myFunction fonksiyonunun içinde tanımlanmış ve bu fonksiyon dışında erişilemez hale gelmiştir.

Block Scope

ES6 ile birlikte gelen let ve const anahtar kelimeleri, block scope (blok kapsamı) yaratmak için kullanılır. Blok kapsamı, {} parantezleri ile tanımlanan bloklar içinde geçerlidir.

if (true) {
    let blockVar = "I'm a block-scoped variable";
    console.log(blockVar); // "I'm a block-scoped variable"
}

console.log(blockVar); // Uncaught ReferenceError: blockVar is not defined

Yukarıdaki örnekte, blockVar değişkeni sadece if bloğu içinde tanımlanmıştır ve bu blok dışında erişilemezdir.

Scope Chain (Kapsam Zinciri)

Scope chain, JavaScript’in bir değişkeni ararken hangi kapsamları kontrol ettiğini ifade eder. İç içe geçmiş fonksiyonlar, dış kapsamlara erişebilir, ancak dış kapsamlardaki değişkenler iç kapsamda tanımlanan değişkenlere doğrudan erişemez.

var outerVar = "I'm an outer variable";

function outerFunction() {
    var innerVar = "I'm an inner variable";
    
    function innerFunction() {
        console.log(outerVar); // "I'm an outer variable"
        console.log(innerVar); // "I'm an inner variable"
    }
    
    innerFunction();
}

outerFunction();
console.log(innerVar); // Uncaught ReferenceError: innerVar is not defined

Bu örnekte, innerFunction, hem outerVar hem de innerVar değişkenlerine erişebilir. Ancak, innerVar değişkeni, outerFunction dışında erişilemez.

Lexical Scope (Leksik Kapsam)

Lexical scope, bir fonksiyonun kapsamını tanımlandığı yerden belirler, çağrıldığı yerden değil. Bu, JavaScript’in değişken arama sırasında, fonksiyonun yazıldığı yere göre kapsamları kontrol etmesi anlamına gelir.

var lexicalVar = "I'm a lexical variable";

function lexicalFunction() {
    console.log(lexicalVar); // "I'm a lexical variable"
}

function wrapperFunction() {
    var lexicalVar = "I'm a different variable";
    lexicalFunction();
}

wrapperFunction();

Yukarıdaki örnekte, lexicalFunction, lexicalVar değişkenini global scope’da arar çünkü lexicalVar, lexicalFunction tanımlandığı sırada global scope’da mevcuttur. wrapperFunction içinde tanımlanan lexicalVar ise dikkate alınmaz.

Closure (Kapatma)

Closure, bir fonksiyonun, tanımlandığı bağlamdaki değişkenlere erişim sağlayan bir fonksiyon olarak tanımlanabilir. Bu, fonksiyonun tanımlandığı yerdeki kapsam zincirine göre çalışır.

function createCounter() {
    let count = 0;
    
    return function() {
        count++;
        return count;
    };
}

const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2
console.log(counter()); // 3

Bu örnekte, createCounter fonksiyonu, count değişkenine erişen bir iç fonksiyon döndürür. count değişkeni, createCounter fonksiyonu çağrıldığında oluşturulan kapsamda saklanır ve her counter() çağrısında bu değere erişilir ve güncellenir.

Sonuç

JavaScript scope, kodunuzun doğru çalışmasını sağlamak ve değişkenlerin çakışmasını önlemek için anlaşılması gereken önemli bir konudur. Global ve local scope, function scope, block scope, scope chain, lexical scope ve closure gibi kavramlar, JavaScript’te değişken yönetimini ve erişimini düzenler. Bu temel kavramlar, kodunuzu daha okunabilir ve sürdürülebilir hale getirmek için kritik öneme sahiptir.