Genel ve yerel değişken kapsamı

Bu makalede, kapsam ve JavaScript'te nasıl çalıştığı hakkında bilgi edineceksiniz.

Kapsam, JavaScript ve diğer programlama dillerinde değişkenlere erişildiği ve kullanıldığı bağlamı tanımlayan temel bir kavramdır. JavaScript'i öğrenmeye ve değişkenlerle daha fazla çalışmaya devam ettikçe bu veriler kodunuza daha faydalı ve uygulanabilir hale gelir.

Kapsam size şu konularda yardımcı olabilir:

  • Belleği daha verimli kullanın: Kapsam, değişkenleri yalnızca gerektiğinde yükleme olanağı sağlar. Bir değişken kapsam dışındaysa, değişkeni çalıştırılmakta olan kod için kullanılabilir hale getirmeniz gerekmez.
  • Hataları daha kolay bulun ve düzeltin: Değişkenleri yerel kapsamla izole etmek, kodunuzdaki hataların giderilmesini kolaylaştırır. Çünkü genel değişkenlerin aksine, dış kapsamdaki kodlar yerel kapsamlı değişkenlere müdahale edemez.
  • Yeniden kullanılabilir küçük kod blokları oluşturun: Örneğin, dış kapsama dayalı olmayan bir yalnızca işlev yazabilirsiniz. Bu tür bir işlevi, çok az değişiklik yaparak başka bir yere kolayca taşıyabilirsiniz.

Kapsam nedir?

Bir değişkenin kapsamı, bir değişkeni kodun içinde nereden kullanabileceğinizi belirler.

JavaScript, genel veya yerel kapsamlı değişkenleri tanımlar:

  • Genel kapsamlı değişkenler, JavaScript kodu içinde bulunan diğer tüm kapsamlardan kullanılabilir.
  • Yerel kapsamlı olan değişkenler yalnızca belirli bir yerel bağlamda kullanılabilir ve var, let, const gibi anahtar kelimeler tarafından oluşturulur. Bir işlev içinde değişken oluşturmak için var, let veya const anahtar kelimelerini kullanırsanız bu değişken yerel kapsama sahip olur.

Bu makalenin ilerleyen bölümlerinde blok ve sözlük kapsamı ele alınmaktadır:

  • Blok kapsamı değişkenleri, blok ifadesinin tanımlandığı süslü ayraçların konumuna göre belirlenen bloklar için yerel olarak kullanılabilir. Yalnızca let veya const anahtar kelimeleriyle tanımlanan değişkenler engelleme kapsamına sahiptir.
  • Söz konusu kapsam, bir değişkenin nerede kullanılabileceğini belirlemek için değişkenin kaynak kodunda bildirildiği konumu kullanır. Kapalı bir işlevin, sözlüksel ortam olarak bilinen dış kapsamda başvurulan değişkenlere erişmesini sağlamak için kapanışları kullanırsınız.

Kapsamı dahilinde bir değişkene erişildiğinde, JavaScript atanan değerini döndürür veya başka bir şekilde bir hata üretir.

Bir değişkeni bildirmek için:

  • Yerel veya global kapsamlı değişkenleri bildirmek için var, const veya let anahtar kelimelerini kullanın.
  • Blok kapsam değişkenlerini bildirmek için const veya let anahtar kelimelerini kullanın.

Bir işlevde var değişkeni tanımladığınızda, bildirim değişkeni en yakın çevreleyen işlev için kullanılabilir hale getirir. Blok kapsama sahip değişkenler bildirmek için var anahtar kelimesini kullanamazsınız.

Kapsam örnekleri

Bu örnekte, greeting değişkeni herhangi bir işlevin veya bloğun dışında tanımlandığı için global kapsam gösterilmektedir. Bu durum da değerinin geçerli dokümandaki tüm kodlar tarafından kullanılabilmesini sağlar:

const greeting = 'hello';
console.log(greeting); // 'hello'

Global kapsam örneğinde greeting değişkenine bir hello değeri atanmıştır.

Bu örnek, bir işlev içinde greeting değişkenini let anahtar kelimesiyle bildirdiği için yerel kapsamı göstermektedir. greeting değişkeni yerel kapsamlı bir değişkendir ve işlevin dışında kullanılamaz.

function greet() {
  let greeting = 'Hello World!';
  console.log(greeting);
}

Bu örnekte, değişkene yalnızca kıvrık ayraçlar içinden erişilebilmesi için bir blok içindeki greeting değişkenini bildirdiği için blok kapsamı gösterilmektedir:

if (true) {
   const greeting = 'hello';
}

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

console.log işlevi, greeting değişkeninin değerini çıkarmaya çalıştığında JavaScript'in, beklenen hello mesajı yerine ReferenceError hata mesajı döndürdüğüne dikkat edin. Neden?

greeting değişkeni blok kapsamına sahip olduğu ve en yakın blok if koşullu ifadesinin parçası olduğu için bir hata döndürülür. Bir blokun içinde tanımladığınız let ve const değişkenlerine bloğun dışından erişemezsiniz. Dolayısıyla, greeting değişkenine yalnızca blok kapsamını belirten kıvrık ayraçlar içinde erişebilirsiniz.

Bu örnek, console.log(message) yöntemini süslü parantezlerin içine taşıdığından hatayı düzeltir. Güncellenen kod, console.log(message) yöntemini blokun içinde yeniden konumlandırır.

if (true) {
   const greeting = 'hello';
   console.log(greeting);
}

Kapsam türleri

Global kapsam

Global kapsamlı değişkenlere programın herhangi bir yerinden erişebilirsiniz.

İki JavaScript dosyasını içe aktaran bir HTML dosyası kullanmayı düşünün: file-1.js ve file-2.js: 

<script src="file-1.js"></script>
<script src="file-2.js"></script>

Bu örnekte, globalMessage değişkeni global bir kapsama sahiptir ve bir işlevin dışına yazılmıştır. Çalıştırma ve yürütme sırasında globalMessage değişkeninin değerine JavaScript programının herhangi bir yerinden erişebilirsiniz.

file-1.js ve file-2.js dosyalarının içeriğini bu kod snippet'inde görebilirsiniz. Her iki dosyada da globalMessage değişkeninin kullanılabilirliğine dikkat edin.

// file-1.js
function hello() {
    var localMessage = 'Hello!';
}

var globalMessage = 'Hey there!';

// file-2.js
console.log(localMessage); // localMessage is not defined
console.log(globalMessage); // Hey there!

Bu makalede çok fazla açıklanmayan başka bir kapsam türü vardır. JavaScript modülünün içinde ancak bir işlevin veya bloğun dışında oluşturduğunuz bir değişkenin genel kapsamı değil, modül kapsamı olur. Modül kapsamına sahip değişkenler geçerli modülün herhangi bir yerinde kullanılabilir ancak diğer dosyalardan veya modüllerden kullanılamaz. Modül kapsamlı bir değişkeni diğer dosyalarda kullanılabilir hale getirmek için değişkeni oluşturulduğu modülden dışa aktarmanız ve ardından değişkene erişmesi gereken modülden import gerekir.

Yerel kapsam ve işlev kapsamı

Bir JavaScript işlevinde var, let veya const anahtar kelimeleriyle değişkenler oluşturduğunuzda, değişkenler işlevde yerel olur ve dolayısıyla bunlara yalnızca işlevin içinden erişebilirsiniz. Yerel değişkenler, bir işlev başladığında oluşturulur ve işlev yürütme tamamlandığında etkin bir şekilde silinir.

Bu örnekte, addNumbers() işlevindeki total değişkeni açıklanmaktadır. a, b, ve total değişkenlerine yalnızca addNumbers() işlevi içinden erişebilirsiniz. 

function addNumbers(a, b) {
    const total = a + b;
}

addNumbers(3, 4);

Değişkenleri adlandırmak için let ve const anahtar kelimelerini kullanabilirsiniz. let anahtar kelimesini kullandığınızda JavaScript, değişkeni güncelleyebilir. Ancak, const anahtar kelimesinde değişken sabit kalır.

var variable1 = 'Declared with var';
var variable1 = 'Redeclared with var';
variable1; // Redeclared with var

let variable2 = 'Declared with let. Cannot be redeclared.';
variable2 = 'let cannot be redeclared, but can be updated';
variable2; // let cannot be redeclared, but can be updated

const variable3 = 'Declared with const. Cannot be redeclared or updated';
variable3; // Declared with const. Cannot be redeclared or updated

Kapsamı engelle

Bloklar, tek bir ifadeyi veya ifadeyi birlikte gruplandırmak için kullanılır. Blok kapsamlı bir yerel değişken bildirmek için const veya let anahtar kelimelerini kullanabilirsiniz. Blok kapsama sahip değişkenler bildirmek için var anahtar kelimesini kullanamayacağınızı unutmayın.

Örneğin, bu blokta name değişkeninin kapsamı ve "Elizabeth" değeri, küme parantezleri içinde yer alır. Engelleme kapsamındaki değişkenler, engellemenin dışında kullanılamaz.

{
    const name = "Elizabeth";
}

if, for veya while ifadelerinde engelleme kapsamlı değişkenler kullanabilirsiniz.

Bu kod snippet'indeki iki for döngüsüne dikkat edin. Bir for döngüsü, 0, 1 ve 2 sayılarına kadar çıkan başlatıcı değişkenini tanımlamak için var anahtar kelimesini kullanır. Diğer for döngüsü, başlatıcı değişkenini bildirmek için let anahtar kelimesini kullanır. 

for (var i = 0; i < 2; i++) {
    // ...
}

console.log(i); // 2

for (let j = 0; j < 2; j++) {
    // ...
}

console.log(j); // The j variable isn't defined.

Önceki kod örneğinde, ilk for döngüsündeki i değişkeninin for döngüsünün dışına sızdığını ve var anahtar kelimesi blok kapsamı kullanmadığı için 2 değerini koruduğunu fark edebilirsiniz. let anahtar kelimesiyle tanımlanan j değişkeninin, for döngüsü blokunun kapsamında olduğu ve for döngüsü tamamlandıktan sonra mevcut olmadığı ikinci for döngüsünde sorun düzeltildi.

Bir değişken adının farklı bir kapsamda yeniden kullanımı

Kapsam, aynı değişken adını farklı bir kapsamda başka bir yerde yeniden kullansanız bile, bir işlev içindeki bir değişkeni ayırabilir.

Bu örnekte, kapsam kullanımının aynı değişken adını farklı işlevlerde yeniden kullanmanıza nasıl olanak sağladığı gösterilmektedir:

function listOne() {
    let listItems = 10;
    console.log(listItems); // 10
}

function listTwo() {
   let listItems = 20;
   console.log(listItems); // 20
}

listOne();
listTwo();

listOne() ve listTwo() işlevlerindeki listItems değişkenlerine beklenen değerler atandığı için birbiriyle çakışmaz.

Kapanış ve sözlük kapsamı

Kapatmalar, bir iç işlevin dış işlev kapsamına (sözlüksel ortam olarak da bilinir) erişebildiği kapalı bir işlevi ifade eder. Bu nedenle, JavaScript'te işlevlerin dış sözcüksel ortama referans vermesini sağlamak için kapatmaları kullanırsınız. Böylece, işlevin dışında tanımlanmış bir işlev başvuru değişkenlerinin içindeki koda izin verilir. Aslında, dış sözlüksel ortamlara yönelik bir referans zincirini kodlayabilirsiniz. Böylece bir işlev, bir fonksiyon tarafından, diğer bir fonksiyonla da çağrılır.

Bu örnekte kod, outer() işlevi çağrıldığında oluşturulan ve hello değişkeni üzerinden kapanan sözlüksel ortamla bir kapanış oluşturur. Bu nedenle, setTimeout geri çağırma işlevi içinde hello değişkeni kullanılır. 

function outer() {
    const hello = 'world';

    setTimeout(function () {
        console.log('Within the closure!', hello)
    }, 100);
}

outer();

Sözcüksel kapsamla kapsam, çalışma zamanında değil, kaynak kodun derlenmesi sırasında belirlenir. Sözcüksel ortam hakkında daha fazla bilgi edinmek için Leksik kapsam ve kapanış başlıklı makaleyi inceleyin.

Modüller

JavaScript modülleri, JavaScript kodunu düzenlemeye yardımcı olur. Doğru kullanıldığında kod tabanınız için etkili bir yapı sağlar ve kodun yeniden kullanılmasına yardımcı olurlar. Değişkenleri farklı dosyalar arasında paylaşmak için genel değişkenler kullanmak yerine, JavaScript modülleri değişkenleri dışa ve import tekniğine uyarlar.

// hello.js file
function hello() {
  return 'Hello world!';
}

export { hello };

// app.js file
import { hello } from './hello.js';

console.log(hello()); // Hello world!

Kapsam görselleştirici demosu

Kapsam, her JavaScript geliştiricisinin anlaması gereken temel bir kavramdır. Kapsam sistemini daha iyi anlamak için JS Scope Visualizer ile kendi kodunuzu yazmayı deneyebilirsiniz. Demo, JavaScript kapsamlarını görselleştirmenize yardımcı olmak için kodda renklendirme kullanır.

Sonuç

Bu makalede farklı kapsam türleri açıklanmaktadır. JavaScript kapsamı, web geliştirmedeki en gelişmiş kavramlardan biridir. Bu nedenle, bu içeriği okumuş olmanız ve bu konuyu anlamak için zaman ayırmanız çok faydalıdır.

Kapsam, kullanıcılara yönelik bir özellik değildir. Sadece kod yazan web geliştiricisini etkiler ancak kapsamın nasıl çalıştığını bilmek, hataları düzeltmenize yardımcı olabilir.