webroad.online
  1. 1Веб
  2. 2HTML
  3. 3CSS
  4. 4JavaScript
  5. 5TypeScript
  6. 6Git
  7. 7Инструменты
  8. 8React
  9. 9Стейт-менеджмент
  10. 10Next.js
  11. 11Формы
  12. 12Данные и бэкенд
  13. 13SEO
  14. 14Tailwind CSS
  15. 15Анимации
  16. 16Тестирование
  17. 17Архитектура
JavaScript · Урок 2 из 17

Условия и циклы

Ранний return, объект-словарь вместо switch, for...of или for...in.

Обновлено

Что такое control flow

По умолчанию код выполняется сверху вниз, строка за строкой. Control flow (поток управления) — инструменты, которые это меняют:

  • условия — выполнить блок, только если что-то истинно;
  • циклы — выполнить блок несколько раз;
  • переходы — return, break, continue, throw выходят раньше.

Условия — виды и когда их использовать

Инструмент Когда
if / else любое решение; ветки из нескольких строк
тернарный a ? b : c выбор между двумя значениями в выражении (JSX, присваивание)
&& «показать, только если» (в JSX)
switch много случаев для одного и того же значения с разной логикой
объект-словарь много случаев, которые просто сопоставляют одно значение другому

if / else и ранний return

function shipping(total, country) {
  if (total <= 0) return 0          // особые случаи выходят первыми
  if (country !== 'RU') return 50
  if (total >= 200) return 0
  return 15
}

Ранний return вместо вложенных if: код остаётся «плоским», а каждый случай обработан и забыт.

// ✗ «стрелка» из if-ов
if (user) {
  if (user.isActive) {
    if (user.role === 'admin') { ... }
  }
}

// ✓
if (!user || !user.isActive) return
if (user.role !== 'admin') return
...

Тернарный оператор

const label = count === 1 ? 'сообщение' : 'сообщения'

Тернарный внутри тернарного (a ? b : c ? d : e) — знак, что нужен if или объект-словарь.

switch или объект-словарь

switch (status) {
  case 'success': return '✓'
  case 'error': return '✗'
  default: return '?'
}

// то же самое, короче:
const icons = { success: '✓', error: '✗' }
const icon = icons[status] ?? '?'

switch сравнивает через ===. Без return или break выполнение продолжается в следующем случае (fall-through) — классический источник багов.

Циклы — виды и различия

Цикл Перебирает Можно остановить break Когда
for (const x of arr) значения итерируемого (массив, строка, Map, Set) да обход коллекции
for (const key in obj) ключи объекта да редко — лучше Object.entries
for (let i = 0; i < n; i++) индексы да нужен индекс, шаг или обход в обратном порядке
while (cond) пока условие истинно да число итераций заранее неизвестно
arr.forEach(fn) значения нет простые побочные эффекты без остановки
map / filter / reduce значения, создают новый результат нет преобразования — см. Массивы
for (const [key, value] of Object.entries(user)) {
  console.log(key, value)
}

for (let i = items.length - 1; i >= 0; i--) { ... }   // в обратном порядке

let attempts = 0
while (!connected && attempts < 3) { attempts++ }

for...in по массивам — ловушка: он перебирает строковые ключи ('0', '1') и может включать унаследованные свойства.

break и continue

  • break — полностью выходит из цикла.
  • continue — пропускает остаток текущей итерации и переходит к следующей.
for (const order of orders) {
  if (order.cancelled) continue
  if (order.total > budget) break
  process(order)
}

Нужно остановиться на первом результате? find, some, every останавливаются сами.

Коротко

  • if + ранний return для решений; тернарный — для двух значений; объект-словарь вместо длинного switch.
  • for...of для коллекций, классический for для индексов, while для условий.
  • forEach нельзя остановить; методы массивов — для преобразований.

Официальные источники

Упражнения

Была ли страница полезной?

Один клик — без регистрации.