Как создать новую область видимости

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

Создать новую область видимости в JavaScript можно с помощью функций, блоков кода (используя let и const), а также модулей. Функции создают функциональную область видимости, блоки кода — блочную, а модули — модульную.

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

Область видимости в JavaScript определяет, где переменные, функции и объекты могут быть доступны в коде. Понимание областей видимости важно для управления доступом к данным и предотвращения конфликтов имен.

Функциональная область видимости

Функции в JavaScript создают собственную область видимости. Переменные, объявленные внутри функции с помощью var, let или const, доступны только внутри этой функции.

function myFunction() {
    var functionScopedVar = 'I am function scoped';
    let blockScopedVar = 'I am block scoped';
    const anotherBlockScopedVar = 'I am also block scoped';
​
    console.log(functionScopedVar); // 'I am function scoped'
    console.log(blockScopedVar); // 'I am block scoped'
    console.log(anotherBlockScopedVar); // 'I am also block scoped'
}
​
myFunction();
​
console.log(functionScopedVar); // ReferenceError: functionScopedVar is not defined

• function myFunction() { ... }: Определяет функцию, создающую новую функциональную область видимости.
• var functionScopedVar = 'I am function scoped';: Переменная functionScopedVar доступна только внутри myFunction.
• let blockScopedVar = 'I am block scoped'; и const anotherBlockScopedVar = 'I am also block scoped';: Переменные blockScopedVar и anotherBlockScopedVar также доступны только внутри myFunction.

Блочная область видимости

Блочная область видимости создается с помощью ключевых слов let и const внутри блоков кода, таких как if, for, while и т.д.

if (true) {
    let blockScopedVar = 'I am block scoped';
    const anotherBlockScopedVar = 'I am also block scoped';
​
    console.log(blockScopedVar); // 'I am block scoped'
    console.log(anotherBlockScopedVar); // 'I am also block scoped'
}
​
console.log(blockScopedVar); // ReferenceError: blockScopedVar is not defined

• if (true) { ... }: Создает блок кода, который является новой блочной областью видимости.
• let blockScopedVar = 'I am block scoped'; и const anotherBlockScopedVar = 'I am also block scoped';: Переменные доступны только внутри блока if.

Модульная область видимости

Модули в JavaScript (например, ES6 модули) создают собственную область видимости. Переменные, функции и классы, объявленные в модуле, не видны за его пределами, если они не экспортированы.

// module.js
export const moduleScopedVar = 'I am module scoped';
​
// main.js
import { moduleScopedVar } from './module.js';
​
console.log(moduleScopedVar); // 'I am module scoped'

• export const moduleScopedVar = 'I am module scoped';: Объявляет и экспортирует переменную moduleScopedVar, делая ее доступной для других модулей.
• import { moduleScopedVar } from './module.js';: Импортирует moduleScopedVar из module.js, делая ее доступной в main.js.

Зачем это нужно

Создание новых областей видимости позволяет изолировать переменные и функции, предотвращая их случайное изменение или конфликт имен. Это особенно важно в больших проектах, где множество разработчиков могут работать над одним и тем же кодом. Области видимости помогают поддерживать код чистым и управляемым.