Что такое Scope

1️⃣ Как кратко ответить

Scope в JavaScript определяет видимость и доступность переменных и функций в разных частях кода. Существует три основных типа scope: глобальный, функциональный и блочный. Глобальный scope доступен везде, функциональный ограничен функцией, а блочный — блоком кода, например, в циклах или условных операторах.

2️⃣ Подробное объяснение темы

Scope в JavaScript — это концепция, определяющая, где в коде можно использовать переменные и функции. Понимание scope важно для управления доступностью данных и предотвращения конфликтов имен переменных.

Типы Scope

1. Глобальный Scope

   • Переменные и функции, объявленные вне всех функций и блоков, находятся в глобальном scope.
   • Они доступны в любом месте кода.
   • Пример:

     var globalVar = 'I am global';
     ​
     function showGlobalVar() {
         console.log(globalVar); // 'I am global'
     }
     ​
     showGlobalVar();
     

2. Функциональный Scope

   • Переменные, объявленные внутри функции, доступны только внутри этой функции.
   • Это помогает изолировать переменные и избежать конфликтов.
   • Пример:

     function myFunction() {
         var functionVar = 'I am local to myFunction';
         console.log(functionVar); // 'I am local to myFunction'
     }
     ​
     myFunction();
     // console.log(functionVar); // Ошибка: functionVar не определена
     

3. Блочный Scope

   • Введен в ES6 с ключевыми словами let и const.
   • Переменные, объявленные с помощью let или const внутри блока (например, в цикле или условии), доступны только внутри этого блока.
   • Пример:

     if (true) {
         let blockVar = 'I am block-scoped';
         console.log(blockVar); // 'I am block-scoped'
     }
     ​
     // console.log(blockVar); // Ошибка: blockVar не определена
     

Зачем нужен Scope

• Изоляция данных: Scope позволяет изолировать переменные, чтобы они не мешали друг другу и не вызывали конфликтов имен.
• Управление доступностью: Определяет, где переменные и функции могут быть использованы, что помогает в организации кода.
• Оптимизация памяти: Переменные, которые больше не нужны, могут быть удалены из памяти, если они находятся в локальном scope.

Пример использования

Рассмотрим пример, где используются все три типа scope:

var globalVar = 'I am global';
​
function outerFunction() {
    var functionVar = 'I am local to outerFunction';
​
    if (true) {
        let blockVar = 'I am block-scoped';
        console.log(blockVar); // 'I am block-scoped'
    }
​
    // console.log(blockVar); // Ошибка: blockVar не определена
​
    function innerFunction() {
        console.log(globalVar); // 'I am global'
        console.log(functionVar); // 'I am local to outerFunction'
    }
​
    innerFunction();
}
​
outerFunction();

• globalVar доступна везде, так как она в глобальном scope.
• functionVar доступна только внутри outerFunction.
• blockVar доступна только внутри блока if.
• innerFunction имеет доступ к globalVar и functionVar благодаря цепочке scope (scope chain).

Понимание и правильное использование scope помогает писать более чистый, организованный и эффективный код.