Функциональный JavaScript: 6 образцов кода без цикла for

Лаконичные примеры того, как бывает удобно вместо циклов использовать every, map, reduce и filter. Сравниваем попарно код с применением for и функциональное решение.

Зачем заменять циклы?

Использование функций высшего порядка делает ваш код:

• более читаемым,
• понятнее,
• проще для отладки.

Без лишних комментариев мы хотим показать шесть ситуаций, когда цикл – плохой выбор. К каждому примеру даётся альтернативный вариант решения через функции.

1. Перебрать все элементы и получить новый изменённый массив

С циклом:

var names = ["Jack", "Jecci", "Ram", "Tom"];

var upperCaseNames = [];

for (let i = 0, totalNames = names.length; i < totalNames; i = i + 1) {
  upperCaseNames[i] = names[i].toUpperCase();
}

Без цикла:

var names = ["Jack", "Jecci", "Ram", "Tom"];

var upperCaseNames = names.map(name => name.toUpperCase());

Примечание. Если вы используете map, в процессе перебора нельзя сделать break, continue или return. Но если возникает необходимость, такие случаи обычно сводятся к применению методов every или some.

2. Перебрать все элементы и выполнить действие

С циклом:

function print(name) {
  console.log(name);
}

var names = ["Библиотека", "программиста", "proglib.io"];

for (let i = 0, totalNames = names.length; i < totalNames; i = i + 1) {
  print(names[i])
}

Без цикла:

var names = ["Библиотека", "программиста", "proglib.io"];

names.forEach(name => print(name));

3. Отфильтровать массив

Если использовать цикл:

function isOdd(n) {
  return n % 2;
}

var numbers = [1, 2, 3, 4, 5];

var odd = [];

for (let i = 0, total = numbers.length; i < total; i = i + 1) {
  let number = numbers[i];
  if (isOdd(number)) {
    odd.push(number);
  }
}

Используя filter:

var numbers = [1, 2, 3, 4, 5];

var odd = numbers.filter(n => n % 2); // одна строка

4. Найти значение, аккумулирующее значения элементов массива

Сумма чисел, если использовать цикл:

var numbers = [1, 2, 3, 4, 5]

var result = 0;

for (let i = 0, total = numbers.length; i < total; i = i + 1) {
  result = result + numbers[i];
}

Используя reduce:

var numbers = [1, 2, 3, 4, 5];

var result = numbers.reduce((acc, val) => acc + val, 0);

5. Проверить, содержит ли массив значение

Если использовать цикл:

var names = ["prog", "frog", "IO"];

for (let i = 0, totalNames = names.length; i < totalNames; i = i + 1) {
  if (names[i] === "frog") {
    console.log("%c found frog", "color:red");
    return;
  }
}

Используя some:

var names = ["prog", "frog", "IO"];

let isRahulPresent = names.some(name => name === "frog");

if (isRahulPresent) {
  console.log("%c found frog", "color:red");
}

%c в выражении будет применять стиль к тексту консоли.

6. Проверить, соответствует ли условию каждый элемент массива

Если использовать цикл:

var num = [1, 2, 3, 4, 5, 0];

for (let i = 0, total = numbers.length; i < total; i = i + 1) {
  if (num <= 0) {
    console.log("0 present in array");
  }
}

Используя every:

var num = [1, 2, 3, 4, 5, 0];

var isZeroFree = num.every(e => e > 0);

if (!isZeroFree) {
  console.log("0 present in array");
}

Заключение

Используемый подход относится к функциональному программированию. Если понравилось, у нас есть подборка ресурсов об этой концепции и стиле написания кода.

Что ещё вам было бы интересно узнать о JavaScript?

Источники

• https://medium.com/better-programming/you-dont-need-loops-in-javascript-1dc8139eab4b