JavaScript-də dəyişənlər müvəqqəti dəyərləri saxlamaq üçün istifadə olunur və ehtiyac olduqda onlara müraciət edirik. Lakin bütün dəyişənlər eyni səviyyədə əlçatan deyil. Dəyişənin hansı hissələrdə mövcud olduğunu və ona necə çatmaq mümkün olduğunu scope-lar - “görünürlük sahələri” müəyyən edir.

Görünürlük sahəsi nədir?

Görünürlük sahəsi, proqram daxilində bir dəyişənə, funksiyaya və ya obyektə haradan müraciət edə biləcəyimizi müəyyənləşdirən proqram hissəsidir. Bu sahə funksiyalar, bloklar və ya elə bütün proqram ola bilər. Yəni, biz həmişə ən azı bir görünürlük sahəsinin içində oluruq.

Görünürlük sahələrini iç-içə olan qutular kimi təsəvvür edə bilərik. Bir qutunun içindəki dəyişənlər bir-biriləri ilə əlaqə qura bilər. Həmçinin, daxili qutular yuxarı səviyyədəki qutuların dəyişənlərinə çata bilər.

Görünürlük sahələri kodun təşkilini asanlaşdırır, dəyişənlərin qorunmasını təmin edir və kodun müxtəlif hissələri arasında təsadüfi müdaxilələrin qarşısını alır.

Görünürlük sahələrinin növləri

1. Qlobal görünürlük sahəsi

Qlobal görünürlük sahəsi, bütün proqram daxilində əlçatan olan ən geniş sahədir. Əgər bir dəyişən funksiya və ya modul xaricində elan edilərsə, bu dəyişən qlobal sahəyə düşür və proqramın istənilən yerindən ona müraciət etmək mümkündür.

const a = 42;

console.log(a); // 42

function wrap() {
  console.log(a); // 42
}

const obj = {
  value: a, // 42
};

Brauzer mühitində bütün qlobal dəyişənlər window obyektinin içində saxlanır:

console.log(window.a); // 42

Ancaq let və const ilə elan olunan dəyişənlər window obyektinin içərisinə əlavə olunmur.

2. Modul görünürlük sahəsi

ES6 modulları istifadə etdikdə, dəyişənlər yalnız onları elan etdiyimiz modullarda mövcud olur. Yəni, bir modulda elan olunan dəyişən başqa bir modul tərəfindən avtomatik olaraq istifadə edilə bilməz.

module1.js

const a = 42;

module2.js

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

Əgər moduldakı bir dəyişənə başqa bir moduldakı kodun daxil olması lazımdırsa, onu export və import vasitəsilə ötürməliyik.

3. Blok görünürlük sahəsi

Blok görünürlük sahəsi {} ilə müəyyən olunur. let və const dəyişənləri yalnız həmin blok daxilində mövcud olur.

if (true) {
  let b = 43;
  console.log(b); // 43
}

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

Bloklar switch daxilində də istifadə oluna bilər:

switch (animalType) {
  case 'dog': {
    const legs = 4;
    break;
  }
  case 'fish': {
    const legs = 0;
    break;
  }
}

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

4. Funksional görünürlük sahəsi

Funksiyalar özlərinə məxsus görünürlük sahəsi yaradır və onların daxilində elan olunan dəyişənlər yalnız həmin funksiyanın içində mövcud olur.

function scoped() {
  const b = 43;
}

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

Hər bir funksiya öz görünürlük sahəsinə malikdir və bu sahə digər funksiyalarla qarışmır.

function scope1() {
  const a = 42;
}

function scope2() {
  const a = 43;
}

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

Lakin iç-içə funksiyalar olduqda, daxili funksiyalar xarici funksiyanın dəyişənlərinə çata bilir:

function outer() {
  const a = 42;

  function inner() {
    console.log(a); // 42
  }

  inner();
}

outer();

Bu xüsusiyyətə “leksik görünürlük sahəsi” deyilir.

IIFE (Immediately Invoked Function Expression)

IIFE dərhal çağırılan funksiya ifadəsidir. Bu metoddan istifadə edərək kodu təcrid edə və digər kod hissələri ilə qarışmasının qarşısını ala bilərik.

(function() {
  const a = 42;
  console.log(a); // 42
})();

Bu üsul kodu modullara bölmək və qlobal dəyişənlərdən asılılığı azaltmaq üçün faydalıdır.

Funksiyalar və Bağlılıq (Closures)

JavaScript-də closure (bağlılıq), bir funksiyanın xarici funksiyadakı dəyişənlərə daxil ola bilməsi anlamına gəlir.

function counter() {
  let state = 0;

  function increase() {
    state++;
  }

  function decrease() {
    state--;
  }

  function valueOf() {
    console.log(state);
  }

  return { increase, decrease, valueOf };
}

const tick = counter();
tick.increase();
tick.valueOf(); // 1
tick.decrease();
tick.valueOf(); // 0

Burada state dəyişəninə xaricdən birbaşa müdaxilə etmək mümkün deyil. Ancaq increase() və decrease() vasitəsilə onu idarə edə bilərik. Bu üsul məlumatları qorumaq və təhlükəsizliyi artırmaq üçün istifadə olunur.

Hoisting (Yuxarı Qaldırma)

var ilə elan olunan dəyişənlər və funksiyalar avtomatik olaraq kodun yuxarısına “qaldırılır” və əvvəl elan olunmuş kimi qəbul edilir.

console.log(hello); // undefined
var hello = "Hello";

Əslində bu kod belə işləyir:

var hello;
console.log(hello); // undefined
hello = "Hello";

Ancaq let və const ilə elan olunan dəyişənlərdə hoisting baş vermir:

console.log(bye); 
// ReferenceError: Cannot access 'bye' before initialization
let bye = "Bye";

Bu, kodun daha ardıcıl və gözlənilən kimi işləməsini təmin edir.

Nəticə

Görünürlük sahələri JavaScript kodunun təhlükəsiz və ardıcıl işləməsinə kömək edir. Onları düzgün istifadə edərək kodu daha yaxşı strukturlaşdıra, səhvlərin qarşısını ala və məlumatları qorumaq üçün lazımi məhdudiyyətlər tətbiq edə bilərik.

Elvin Huseynov