Для чего нужен const?

Для чего нужен const

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

Основное назначение: Предотвращение переразрушения

// const предотвращает переразрушение переменной
const PI = 3.14159;

// ❌ Это вызовет ошибку
PI = 3.14; // TypeError: Assignment to constant variable

// ✅ Правильно: переменная защищена
console.log(PI); // 3.14159 (не изменилась)

const vs let vs var

// var: функциональная область видимости, переразрушается
var x = 1;
x = 2; // OK
console.log(x); // 2

// let: блочная область видимости, переразрушается
let y = 1;
y = 2; // OK
console.log(y); // 2

// const: блочная область видимости, НЕ переразрушается
const z = 1;
z = 2; // ❌ TypeError

1. Семантическое значение: "Это не изменится"

Когда ты видишь const, ты сразу знаешь, что переменная неизменяемая:

// ❌ Неясно: может ли измениться?
var config = { timeout: 5000, retries: 3 };

// ✅ Ясно: config не переразрушится (хотя свойства могут измениться)
const config = { timeout: 5000, retries: 3 };

// Можем изменить свойство
config.timeout = 10000; // OK

// Но не можем переразрушить саму переменную
config = { timeout: 20000 }; // ❌ TypeError

2. Защита от ошибок

const защищает от случайных переразрушений:

// ❌ Ошибка: забыли, что это переменная
var userName = 'John';
// ... много кода ...
userName = 'Jane'; // Ошибка! Хотели переразрушить?

// ✅ const не позволит забыть
const userName = 'John';
// ... много кода ...
userName = 'Jane'; // ❌ TypeError сразу же будет видна ошибка

3. Блочная область видимости (Block Scope)

const имеет блочную область видимости, в отличие от var:

function test() {
  if (true) {
    var x = 1;
    const y = 2;
    let z = 3;
  }
  
  console.log(x); // 1 (видна вне блока)
  console.log(y); // ReferenceError (const имеет блочную область)
  console.log(z); // ReferenceError (let имеет блочную область)
}

Это предотвращает случайное взаимодействие переменных:

for (const item of items) { // const в цикле тоже работает
  console.log(item);
  // item переразрушится в каждой итерации (новый scope)
}

console.log(item); // ReferenceError

4. Использование в лучших практиках

Правило: используй const по умолчанию

// 1. Используй const для большинства переменных
const name = 'John';
const age = 30;
const isActive = true;

// 2. Используй let только если НУЖНО переразрушить
let counter = 0;
for (let i = 0; i < 10; i++) {
  counter++;
}

// 3. Избегай var вообще
// var outdated = 'не используй';

5. const с объектами и массивами

Важный момент: const означает, что переменная не может быть переразрушена, но свойства объекта или элементы массива могут изменяться:

const user = { name: 'John', age: 30 };

// ✅ Можно изменить свойство
user.name = 'Jane';
user.age = 31;
console.log(user); // { name: 'Jane', age: 31 }

// ❌ Нельзя переразрушить переменную
user = { name: 'Bob' }; // TypeError

// Аналогично с массивами
const numbers = [1, 2, 3];

// ✅ Можно добавить элемент
numbers.push(4);
console.log(numbers); // [1, 2, 3, 4]

// ❌ Нельзя переразрушить переменную
numbers = [5, 6]; // TypeError

6. Object.freeze для полной неизменяемости

Если нужна полная неизменяемость объекта:

const config = Object.freeze({ timeout: 5000, retries: 3 });

// ❌ Это не сработает (в strict mode выбросит ошибку)
config.timeout = 10000; // TypeError in strict mode, ignored in non-strict

// ❌ Это не сработает
config = { timeout: 20000 }; // TypeError

7. Практические примеры

Функции и модули:

// const для функций (функция не переразрушится)
const calculateTotal = (items) => {
  return items.reduce((sum, item) => sum + item.price, 0);
};

// const для импортов
const express = require('express');
const { useState } = require('react');

// const для константных значений
const MAX_RETRIES = 3;
const DEFAULT_TIMEOUT = 5000;
const API_BASE_URL = 'https://api.example.com';

React компоненты:

// const для компонентов
const Button = ({ onClick, label }) => (
  <button onClick={onClick}>{label}</button>
);

// const в функциональных компонентах
function Counter() {
  const [count, setCount] = useState(0);
  const increment = () => setCount(count + 1);
  const message = `Count: ${count}`;
  
  return (
    <div>
      <p>{message}</p>
      <button onClick={increment}>+</button>
    </div>
  );
}

8. Когда использовать let вместо const

Используй let ТОЛЬКО если переменная будет переразрушена:

// ✅ Нужен let: переменная переразрушается
let currentUser = null;
if (isLoggedIn) {
  currentUser = loadUser();
}

// ✅ Нужен let: счётчик в цикле
let sum = 0;
for (let i = 0; i < items.length; i++) {
  sum += items[i].price;
}

// ✅ Нужен let: переменная изменяется
let timeout = 5000;
if (isSlowConnection) {
  timeout = 10000;
}

9. Преимущества использования const

// 1. Читаемость кода
const maxRetries = 3; // ясно: это константа

// 2. Защита от ошибок
const USER_ROLE = 'admin';
USER_ROLE = 'user'; // ❌ ошибка видна сразу

// 3. Инструменты анализа кода (linters)
// ESLint может предупредить, если const не нужен:
// "const variable never reassigned, use const"

// 4. Оптимизация браузером
// Браузер может оптимизировать const переменные лучше

10. Современный стиль (2024)

// ✅ Современный стиль:
// 1. const по умолчанию
// 2. let если нужна переразрушение
// 3. var никогда

const config = { /* ... */ };
const fetchData = async () => { /* ... */ };
const MAX_SIZE = 100;

let isLoading = false;
if (someCondition) {
  isLoading = true;
}

Ключевые выводы

• const предотвращает переразрушение переменной
• Используй const по умолчанию для всех переменных
• Используй let только если переменная будет переразрушена
• Избегай var полностью
• const не делает объекты/массивы неизменяемыми, только переменную
• const имеет блочную область видимости (как let)
• Семантическое значение: читающий сразу знает, что переменная не изменится
• Это основной стандарт в современном JavaScript коде