Как можно объявить переменную в JavaScript?

Как можно объявить переменную в JavaScript

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

1. var — старый способ (избегать в новом коде)

var name = 'John';
var age = 30;
var city; // undefined

// var имеет функциональную область видимости
function example() {
  var x = 10;
  if (true) {
    var x = 20; // Перезапись в той же функции
  }
  console.log(x); // 20 (не блочная область видимости!)
}

// Hoisting (поднятие)
console.log(hoistedVar); // undefined (поднята, но не инициализирована)
var hoistedVar = 5;

// Можно переобъявлять
var x = 1;
var x = 2; // ✓ Допустимо

Проблемы с var:

• Функциональная область видимости (не блочная) ведёт к неожиданному поведению
• Hoisting создаёт путаницу
• Можно случайно переобъявить
• Загрязняет глобальное пространство имён

2. let — правильный способ для изменяемых данных (ES6+)

let count = 0;
count = 1; // ✓ Можно изменять

// Блочная область видимости
if (true) {
  let x = 10;
}
console.log(x); // ReferenceError: x is not defined

// В цикле каждая итерация имеет свою область
for (let i = 0; i < 3; i++) {
  setTimeout(() => {
    console.log(i); // 0, 1, 2 (правильно!)
  }, 100);
}

// Нельзя переобъявлять
let x = 1;
let x = 2; // ✗ SyntaxError

// Temporal Dead Zone (TDZ)
console.log(y); // ReferenceError (не undefined, как у var)
let y = 5;

Преимущества let:

• Блочная область видимости (предсказуемо)
• Нельзя переобъявлять (безопаснее)
• Нет странного hoisting поведения
• Правильно работает в циклах

3. const — для констант (ES6+, рекомендуется по умолчанию)

const PI = 3.14159;
PI = 3.14; // ✗ TypeError: Assignment to constant variable

// const также имеет блочную область видимости
if (true) {
  const x = 10;
}
console.log(x); // ReferenceError

// const не значит "неизменяемый объект", а "не переприсваиваемый"
const obj = { name: 'John' };
obj.name = 'Jane'; // ✓ Работает (меняем свойство)
obj = {}; // ✗ TypeError (переприсваиваем)

const arr = [1, 2, 3];
arr.push(4); // ✓ Работает
arr = []; // ✗ TypeError

// Нужно инициализировать
const x; // ✗ SyntaxError

Когда использовать const:

• По умолчанию для всех новых переменных
• Для функций, объектов, массивов
• Для функций-обработчиков

const handleClick = () => { console.log('Clicked'); };
const config = { api: 'https://api.example.com' };
const items = [];

4. Безпроцессное объявление (очень плохо)

function badExample() {
  x = 10; // Создаёт переменную в глобальной области!
}

badExample();
console.log(window.x); // 10 (в браузере загрязнена глобальная область)

// В strict mode запретит это
function strictExample() {
  'use strict';
  y = 20; // ReferenceError
}

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

Пример 1: Правильное использование в цикле

// ❌ Неправильно (var)
for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100);
}
// Вывод: 3, 3, 3 (все видят последнее значение)

// ✅ Правильно (let)
for (let i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100);
}
// Вывод: 0, 1, 2 (каждый видит свой i)

Пример 2: Блочная область видимости

function processData(data) {
  let result = []; // Видна в функции
  
  if (data.length > 0) {
    const filtered = data.filter(x => x > 5); // Только в блоке if
    result = filtered;
  }
  
  console.log(result); // ✓ Доступна
  console.log(filtered); // ✗ ReferenceError
}

Пример 3: Вложенные области видимости

const user = {
  name: 'Alice',
  
  greet() {
    const greeting = 'Hello'; // Видна в методе
    
    const inner = () => {
      const exclamation = '!'; // Видна в стрелке
      console.log(greeting + exclamation); // Доступа к greeting
    };
    
    inner();
  }
};

user.greet(); // Hello!

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

Best Practices

1. Используй const по умолчанию

const name = 'John';
const count = 0;
const options = {};
const getData = () => fetch('/data');

2. Используй let, если переменная меняется

let counter = 0;
const increment = () => {
  counter++; // Меняется, поэтому let
};

3. НИКОГДА не используй var в новом коде

// ❌ Старый код (не копировать)
var x = 1;
var y = 2;

// ✅ Новый код
const x = 1;
const y = 2;

4. Избегай безпроцессного объявления

// ❌ Плохо
function example() {
  globalVar = 'Oops'; // Загрязняет глобальную область
}

// ✅ Правильно
function example() {
  const localVar = 'Safe';
}

Итог

Способы объявления переменных:

• const — по умолчанию для всех новых переменных
• let — если переменная изменяется
• var — только в легаси коде, избегать в новых проектах
• Безпроцессное — никогда!

Почему const и let лучше:

• Блочная область видимости (предсказуемо)
• Нельзя случайно переобъявить
• Лучше поддерживается инструментами (linters)
• Кодовая база становится проще для поддержки