В каких областях видимости доступен Const

В каких областях видимости доступен const

const — это ключевое слово для объявления переменных с block scope в JavaScript. Понимание видимости const критично для написания безопасного и предсказуемого кода. Это не просто вопрос о синтаксисе, а о том, как браузер управляет памятью и доступом к переменным.

Что такое видимость (Scope)

Scope (видимость, область видимости) — это регион кода, где переменная доступна. JavaScript использует lexical scoping — видимость определяется статически, по месту написания кода в файле.

// Глобальная видимость
const globalVar = 'я видна везде';

function foo() {
  // Функциональная видимость
  const functionVar = 'я видна только в foo';
  
  if (true) {
    // Block scope видимость
    const blockVar = 'я видна только в этом блоке';
  }
  
  console.log(blockVar); // ReferenceError: blockVar is not defined
}

console.log(functionVar); // ReferenceError: functionVar is not defined
console.log(globalVar); // 'я видна везде'

1. Глобальная область видимости (Global Scope)

Переменные, объявленные с const вне любых функций или блоков, видны везде в программе:

// Глобальный scope
const API_URL = 'https://api.example.com';
const MAX_RETRIES = 3;

function fetchData() {
  // Доступны const из глобального scope
  console.log(API_URL); // https://api.example.com
  console.log(MAX_RETRIES); // 3
}

fetchData();
console.log(API_URL); // https://api.example.com

В браузере:

const globalConst = 'hello';
console.log(window.globalConst); // undefined
// const НЕ добавляется в window, в отличие от var

В Node.js:

// file.js
const globalConst = 'hello';
console.log(global.globalConst); // undefined
// const НЕ добавляется в global

2. Функциональная область видимости (Function Scope)

Переменные, объявленные с const внутри функции, видны только в этой функции и её вложенных функциях:

const outerVar = 'внешняя';

function outer() {
  const outerFuncVar = 'видна в outer';
  
  function inner() {
    const innerFuncVar = 'видна только в inner';
    console.log(outerVar); // внешняя (из глобального scope)
    console.log(outerFuncVar); // видна в outer (из родительской функции)
    console.log(innerFuncVar); // видна только в inner
  }
  
  inner();
  console.log(innerFuncVar); // ReferenceError
}

outer();

Closure (замыкание):

Вложенные функции имеют доступ к переменным функций, в которых они объявлены:

function createCounter() {
  const count = 0; // Видна в createCounter
  
  return function increment() {
    // Доступ к count из родительской функции
    return count + 1;
  };
}

const counter = createCounter();
console.log(counter()); // 1
console.log(count); // ReferenceError: count is not defined

3. Block Scope

Это главное отличие const от var. const имеет block scope — видна только в блоке кода, где объявлена:

Блок if/else:

if (true) {
  const x = 10; // Block scope
}

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

Блок цикла for:

for (let i = 0; i < 3; i++) {
  const item = i * 2; // Block scope каждой итерации
}

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

Блок try/catch:

try {
  const riskyVar = processData(); // Block scope
  console.log(riskyVar); // доступна в try
} catch (error) {
  const errorVar = error; // Block scope
  console.log(errorVar); // доступна в catch
}

console.log(riskyVar); // ReferenceError
console.log(errorVar); // ReferenceError

Явный блок {}:

{
  const blockScopedVar = 'только в блоке';
  console.log(blockScopedVar); // только в блоке
}

console.log(blockScopedVar); // ReferenceError

4. Loop Scope (особенность const в циклах)

Каждая итерация for цикла имеет свою область видимости:

// НЕПРАВИЛЬНО с var (видна везде)
for (var i = 0; i < 3; i++) {
  setTimeout(() => {
    console.log(i); // Выведет: 3, 3, 3
  }, 100);
}

// ПРАВИЛЬНО с let (новый scope каждую итерацию)
for (let i = 0; i < 3; i++) {
  setTimeout(() => {
    console.log(i); // Выведет: 0, 1, 2
  }, 100);
}

// const тоже работает, но нельзя переприсваивать
for (const item of [1, 2, 3]) {
  console.log(item); // 1, 2, 3
}

5. Класс Scope

Переменные, объявленные с const внутри классов, видны в методах класса:

class User {
  constructor(name) {
    const internalName = name; // Block scope конструктора
    this.name = name; // Свойство класса
  }
  
  greet() {
    console.log(this.name); // доступна
    // console.log(internalName); // ReferenceError
  }
}

const user = new User('John');
user.greet(); // John

6. Модульный scope (ES Modules)

В ES модулях, const, объявленные на верхнем уровне, видны по умолчанию только в этом файле:

// file1.js
const privateVar = 'видна только в file1.js';
export const publicVar = 'видна везде (если импортирована)';

// file2.js
import { publicVar } from './file1.js';
// import { privateVar } from './file1.js'; // SyntaxError

console.log(publicVar); // видна везде (если импортирована)

Временная мертвая зона (Temporal Dead Zone, TDZ)

const нельзя использовать до объявления. Это создает **TDZ**:

// TDZ начинается здесь
console.log(x); // ReferenceError: Cannot access 'x' before initialization

const x = 10; // TDZ заканчивается

console.log(x); // 10

Разница с var:

// var: хойстится и инициализируется undefined
console.log(y); // undefined
var y = 10;

// let/const: не инициализируется (TDZ)
console.log(z); // ReferenceError
let z = 10;

Практические примеры видимости const

Пример 1: Вложенные блоки

const global = 'глобальная';

function outer() {
  const outerVar = 'функция outer';
  
  {
    const blockVar = 'блок 1';
    console.log(global); // глобальная
    console.log(outerVar); // функция outer
    console.log(blockVar); // блок 1
  }
  
  {
    const blockVar = 'блок 2'; // Другая переменная!
    console.log(blockVar); // блок 2
  }
  
  console.log(blockVar); // ReferenceError
}

outer();

Пример 2: Closure с циклом

const callbacks = [];

for (const i of [0, 1, 2]) {
  callbacks.push(() => {
    console.log(i); // Каждый callback помнит свой i
  });
}

callbacks[0](); // 0
callbacks[1](); // 1
callbacks[2](); // 2

Пример 3: Модули (разные файлы)

// math.js
const SECRET = 'hidden';
export const PI = 3.14;

export function add(a, b) {
  // Доступна SECRET
  return a + b;
}

// main.js
import { PI, add } from './math.js';

console.log(PI); // 3.14 (доступна, экспортирована)
// console.log(SECRET); // Error (не экспортирована)

Сравнение const, let, и var

// var: function scope, хойстится, переопределяемая
var globalVar = 1;
function test() {
  var funcVar = 2; // видна везде в функции
  if (true) {
    var blockVar = 3; // видна везде в функции!
  }
  console.log(blockVar); // 3 (неожиданно)
}

// let: block scope, TDZ, переопределяемая
let blockLet = 1;
if (true) {
  let blockLet = 2; // Другая переменная, не переопределение
  console.log(blockLet); // 2
}
console.log(blockLet); // 1

// const: block scope, TDZ, не переопределяемая
const blockConst = 1;
if (true) {
  const blockConst = 2; // Другая переменная
  console.log(blockConst); // 2
}
console.log(blockConst); // 1
blockConst = 3; // TypeError: Assignment to constant variable

Лучшие практики

// 1. Используй const по умолчанию
const MAX_USERS = 100; // Не будет переприсваиваться

// 2. Используй let, если нужно переприсваивать
let count = 0;
count++;

// 3. Минимизируй видимость переменных
// Плохо: видна везде
const helperFunc = () => {};
const helperVar = 'help';
// Хорошо: видна только где нужно
{
  const localHelper = () => {};
  const localVar = 'help';
  // Используем
}

// 4. Не используй var
// var isOld = true; // Запрещено современным кодом

Заключение

const доступна в следующих областях видимости:

1. Глобальный scope — видна везде в программе
2. Function scope — видна в функции, где объявлена, и во вложенных функциях
3. Block scope — видна только в блоке {}, где объявлена
4. Loop scope — каждая итерация имеет свой scope
5. Class scope — видна в методах класса
6. Module scope — видна в модуле (ES modules)

Главные характеристики const:

• Block scope (не function scope как var)
• Не может быть переприсваивана
• Временная мертвая зона (TDZ) до объявления
• Не добавляется в window/global
• Обязательно инициализировать при объявлении

Это один из важных вопросов, который показывает глубокое понимание JavaScript и умение писать безопасный код.