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çinvar
,let
veyaconst
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
veyaconst
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
veyalet
anahtar kelimelerini kullanın. - Blok kapsam değişkenlerini bildirmek için
const
veyalet
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.