Розділ 8.Область видимості

У JS існує така річ як інтерпретатор - інструмент, який читає рядки коду по порядку. Так ось інтерпретатор бачить код по своєму :

'use strict';

var a = 5;

Ось так код виглядає після компіляції:

'use strict';

var a;  // ініціалізація змінної

a = 5;  // присвоювання значення

Першочерговим здійснюється пошук усіх проініціалізованих змінних, потім пошук усіх функцій, потім вже присвоювання.

Також у JS існує такий невидимий об'єкт як Lexical Environment - суть його роботи полягає у формуванні глобального об'єкта всіх змінних та функцій:

'use strict';

// Lexical Environment {a : undefined}    - знайдено "а", проте невідоме значення

var a = 5;

// Lexical Environment {a : 5}    - знайдено "а", значення "5" 
// Значеня стало відомим після проходження інтерпритатором рядка з присвоєнням

Ми з Вами знаємо два основних види функції :

'use strict';

// Function Declaration
function test1() {};

//Function Expression
var test2 = function() {};

Так ось основним недоліком Function Expression є те, що ми можемо її виконати лише після знаку присвоєння, бо до цього часу Lexical Environment не має інформації про те що вона існує:

'use strict';

// Lexical Environment {test : undefined}

test(); // не виконається, бо ще не відомо значення 

var test = function() {};

// Lexical Environment {test : function}

test(); // виконається

Ми з Вами для ініціалізації змінної завжди використовували var, проте існує ще два способи це зробити:

'use strict';

var a = 5;

let b = 6;

const C = 7;

var - використовується для створення змінної, яку видно глобально:

'use strict';

var a = 0;

console.log(a); // 0

if (true) {
    var a = 7;
    console.log(a); // 7
};

console.log(a); // 7

let - використовується для створення змінної, яку видно в певних межах (як правило лише у фігурних дужках):

'use strict';

let a = 0;

console.log(a); // 0

if (true) {
    let a = 7;
    console.log(a); // 7
};

console.log(a); // 0

const - використовується для створення змінної, яку не можна змінити - називається константою і як правило назва пишеться великими буквами:

'use strict';

const A = 0;

console.log(A); // 0

A = 9; // виникне помилка так як не можна змінювати константи

Проте якщо константою є масив чи об'єкт - то внутрішні значення можуть змінюватись:

'use strict';

const A = {
    age: 2
};

console.log(A.age); // 2

A.age = 9; 

console.log(A.age); // 9

JS код найкраще розглядати у вигляді коробок. Представимо ситуацію, що у Вас є коробка 1, а в ній коробка 2. І Ви вирішили шукати олівець у коробці 2, якщо його там не має, то пошук здійснюватиметься на рівень вище - у коробці 1 :

'use strict';

function box1 () {
    var pencil = 1;            // 2. Створити олівця
    
    function box2() {
        console.log(pencil);   // 4. Відобразити олівця
    }
    
    box2();                    // 3. Виконати функцію box2
}

box1();                        // 1. Виконати функцію box1


// Так як олівця немає у box2 - здійснюватиметься пошук на рівень вище

Чому варто використовувати let, a не var - тому, що let після того як буде не потрібна - буде видалятись з пам'яті, а отже код буде легшим та й основний недолік глобалізації даних в тому, що на них може вплинути любе середовище, а отже можуть виникати неконтрольовані зміни. Тому надалі ми в коді будемо використовувати лише let та const.

Отож ми дізнались, що існує інтерпретатор, який читає код по порядку, після компіляції формує власний код, що для контролю змінних та функцій було створено невидимий об'єкт Lexical Environment, основна задача якого тримати стан змінних і також крім var для ініціалізації можна використовувати більш точні і оптимальніші let та const. У наступному розділі ми детальніше розглянемо з Вами що ж таке об'єкт.