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
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce