JavaScriptJuniorCoding

Что такое функции высшего порядка (higher-order functions)? Приведите примеры: map, filter, reduce.

Функция высшего порядка принимает или возвращает функцию. map преобразует каждый элемент, filter оставляет подходящие, reduce сворачивает массив в одно значение — все три не мутируют исходный массив.

Функции высшего порядка (Higher-Order Functions)

Функция высшего порядка — это функция, которая принимает другую функцию как аргумент и/или возвращает функцию как результат. В JavaScript функции — объекты первого класса, поэтому такой подход работает нативно.

// Принимает функцию как аргумент
function doTwice(fn, value) {
  return fn(fn(value));
}

const double = x => x * 2;
console.log(doTwice(double, 3)); // 12

// Возвращает функцию
function multiplier(factor) {
  return x => x * factor;
}

const triple = multiplier(3);
console.log(triple(5)); // 15

Array.prototype.map

Создаёт новый массив, применяя функцию к каждому элементу. Исходный массив не изменяется.

const prices = [10, 20, 30];

// Базовый пример
const withTax = prices.map(p => p * 1.2);
console.log(withTax); // [12, 24, 36]
console.log(prices);  // [10, 20, 30] — не изменился

// Трансформация объектов
const users = [
  { id: 1, firstName: "Alice", lastName: "Smith" },
  { id: 2, firstName: "Bob",   lastName: "Jones" },
];

const names = users.map(u => ({
  id: u.id,
  fullName: `${u.firstName} ${u.lastName}`,
}));
// [{ id: 1, fullName: "Alice Smith" }, { id: 2, fullName: "Bob Jones" }]

Array.prototype.filter

Создаёт новый массив из элементов, для которых callback вернул truthy-значение.

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const evens = numbers.filter(n => n % 2 === 0);
console.log(evens); // [2, 4, 6, 8, 10]

// Фильтрация объектов
const products = [
  { name: "Apple",  inStock: true,  price: 1.5 },
  { name: "Banana", inStock: false, price: 0.8 },
  { name: "Cherry", inStock: true,  price: 3.0 },
];

const available = products.filter(p => p.inStock && p.price < 2);
// [{ name: "Apple", inStock: true, price: 1.5 }]

Array.prototype.reduce

Сводит массив к одному значению. Принимает reducer-функцию (accumulator, currentValue) => newAccumulator и начальное значение.

const nums = [1, 2, 3, 4, 5];

// Сумма
const sum = nums.reduce((acc, n) => acc + n, 0);
console.log(sum); // 15

// Подсчёт вхождений
const fruits = ["apple", "banana", "apple", "cherry", "banana", "apple"];
const counts = fruits.reduce((acc, fruit) => {
  acc[fruit] = (acc[fruit] ?? 0) + 1;
  return acc;
}, {});
// { apple: 3, banana: 2, cherry: 1 }

// Разворачивание массива массивов (аналог flat)
const nested = [[1, 2], [3, 4], [5]];
const flat = nested.reduce((acc, arr) => acc.concat(arr), []);
// [1, 2, 3, 4, 5]

Цепочки методов

const orders = [
  { product: "Laptop", qty: 1, price: 999, shipped: true },
  { product: "Mouse",  qty: 3, price: 25,  shipped: false },
  { product: "Desk",   qty: 1, price: 350, shipped: true },
];

const totalShipped = orders
  .filter(o => o.shipped)
  .map(o => o.qty * o.price)
  .reduce((sum, v) => sum + v, 0);

console.log(totalShipped); // 1349

Подводные камни

  • reduce без начального значения: если массив пустой, reduce без второго аргумента бросит TypeError: Reduce of empty array with no initial value. Всегда указывайте initialValue.
  • map возвращает undefined при отсутствии return: использование многострочного callback без явного return даёт массив из undefined.
  • filter не мутирует, но объекты внутри — ссылки: filter создаёт новый массив, но объекты в нём — те же ссылки; изменение объекта в новом массиве изменит его и в исходном.
  • map не пропускает разреженные элементы: [1,,3].map(x => x * 2) вернёт [2, empty, 6] — пустые слоты сохраняются.
  • Производительность цепочек: .filter().map() делает два прохода по массиву; для больших наборов данных один reduce или for эффективнее.
  • this в callback: при передаче метода класса как callback теряется контекст — используйте стрелочную функцию или .bind(this).
  • reduce для объекта-аккумулятора: мутировать accumulator внутри reducer разрешено (и это стандартная практика), но если вы возвращаете новый объект каждый раз, то создаёте N объектов — это нагрузка на GC.

Common mistakes

  • Смешивать «функции высшего порядка» с похожим механизмом без критерия выбора.
  • Игнорировать риск: неверно оценить границы применения темы «функции высшего порядка» и получить хрупкое решение.
  • Показывать только синтаксис и не объяснять поведение в runtime или сборке.

What the interviewer is testing

  • Объясняет передача функций как значений и композиция обработки коллекций.
  • Показывает на примере, как работает: функция высшего порядка принимает функцию или возвращает функцию; map, filter и reduce строят декларативный pipeline без ручного управления индексами.
  • Называет production-нюанс и граничный случай для темы «функции высшего порядка».

Sources

Related topics