Стрелочные функции, область видимости и шаблонные строки

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

8 мин · 3 вопросов

Стрелочные функции встречаются в современном коде повсюду: колбэки map и filter, обработчики событий, промисы. Их сила - компактный синтаксис с неявным возвратом, когда тело умещается в одно выражение. Как только ты открываешь фигурные скобки, return снова становится обязательным.

const double = (n) => n * 2;

const isAdult = (user) => user.age >= 18;

const buildUser = (name) => ({ name, active: true });

const sum = (a, b) => {
  const total = a + b;
  return total;
};

console.log(double(21)); // 42
console.log(buildUser("Ana").active); // true

Область видимости определяет, где переменная видна. С let и const переменная, объявленная внутри блока (if, for, фигурные скобки), существует только внутри этого блока. Ещё один важнейший механизм: функция сохраняет доступ к переменным той области, где она была создана, даже после того как эта область завершилась. Это замыкание, и именно на нём работают счётчики, кэши и менеджеры состояния.

function createCounter() {
  let count = 0;
  return () => {
    count += 1;
    return count;
  };
}

const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2

Шаблонные строки, ограниченные обратными кавычками, - гораздо более удачная альтернатива конкатенации. Выражение вставляется через ${...}, а переносы строк сохраняются как есть, что идеально для сборки сообщений или фрагментов HTML.

const user = { firstName: "Nadia", cartCount: 3 };

const message = `Hello ${user.firstName}, you
have ${user.cartCount} items in your cart.`;

console.log(message);

Проверка знаний

Убедись, что запомнил ключевые моменты этого урока.

1. Какой синтаксис правильно возвращает объект из стрелочной функции с неявным возвратом?
   • (name) => { name: name }
   • (name) => ({ name })
   • (name) => return { name }
2. Доступна ли переменная, объявленная через let внутри блока if, после этого блока?
   • Да, так же как с var
   • Нет, её область видимости ограничена блоком
   • Только если она была инициализирована
3. Какой символ ограничивает шаблонную строку?
   • Одинарная кавычка
   • Двойная кавычка
   • Обратная кавычка