Одинаково ли работают var и let внутри функции?

👨‍💻 Frontend Developer 🟡 Часто попадается 🎚️ Средний
#JavaScript #Функции #База JS

Краткий ответ

Нет, var и let по-разному работают внутри функции. Основное отличие — область видимости:

  • var — функциональная область видимости (видна во всей функции)
  • let — блочная область видимости (видна только в блоке, где объявлена)
function example() {
  if (true) {
    var a = 1; // видна во всей функции
    let b = 2; // видна только в блоке if
  }
  
  console.log(a); // 1 (работает)
  console.log(b); // ReferenceError (ошибка!)
}

Полный ответ

var и let внутри функции — как два друга с разными правилами: [var] делится всем со всеми в комнате (функции), а [let] показывает игрушки только тем, кто в конкретной коробке (блоке)! 📦

Основные отличия

Главное отличие var и let — в области видимости:

Простые примеры

Область видимости

function scopeExample() {
  if (true) {
    var varVariable = 'var внутри if';
    let letVariable = 'let внутри if';
  }
  
  console.log(varVariable); // 'var внутри if' (доступна)
  console.log(letVariable); // Ошибка! (не доступна)
}

Повторное объявление

function redeclareExample() {
  var a = 1;
  var a = 2; // Можно — var позволяет повторное объявление
  console.log(a); // 2
  
  let b = 1;
  // let b = 2; // Ошибка! (нельзя повторно объявлять let)
}

Как работает var внутри функции

Поднятие (Hoisting)

function varHoisting() {
  console.log(a); // undefined (не ошибка!)
  var a = 5;
  console.log(a); // 5
}
 
// На самом деле JavaScript делает:
// function varHoisting() {
//   var a; // поднимает объявление
//   console.log(a); // undefined
//   a = 5;
//   console.log(a); // 5
// }

Как работает let внутри функции

Временная мёртвая зона

function letHoisting() {
  // console.log(b); // ReferenceError! (в временной мёртвой зоне)
  let b = 5;
  console.log(b); // 5
}

Когда это важно

В циклах

function loopExample() {
  // С var — одна переменная для всех итераций
  for (var i = 0; i < 3; i++) {
    setTimeout(() => console.log('var:', i), 100); // 3, 3, 3
  }
  
  // С let — своя переменная для каждой итерации
  for (let j = 0; j < 3; j++) {
    setTimeout(() => console.log('let:', j), 100); // 0, 1, 2
  }
}

В условных блоках

function conditionalExample(condition) {
  if (condition) {
    var a = 'var';
    let b = 'let';
  }
  
  console.log(a); // undefined или 'var' (доступна)
  // console.log(b); // ReferenceError! (не доступна)
}

Частые ошибки

Ожидание блочной области у var

function commonMistake() {
  if (true) {
    var result = 'результат';
  }
  
  // ❌ Ожидание ошибки, но var доступна
  console.log(result); // 'результат' (не ошибка!)
}

Использование до объявления

function anotherMistake() {
  // ❌ Ошибка с let
  // console.log(x); // ReferenceError!
  let x = 10;
  
  // ✅ С var работает (но лучше так не делать)
  console.log(y); // undefined
  var y = 20;
}

Простые правила

  1. var — функциональная область видимости 🌐
  2. let — блочная область видимости 📦
  3. var поднимается — доступна до объявления (как undefined) ⬆️
  4. let в мертвой зоне — ошибка при использовании до объявления ⚠️
  5. let строже — нельзя повторно объявлять в той же области 🚫

Понимание разницы помогает писать более предсказуемый код и избегать ошибок с областями видимости! 💪


Хотите больше статей для подготовки к собеседованиям? Подписывайтесь на EasyAdvice, добавляйте сайт в закладки и совершенствуйтесь каждый день 💪