JavaScript Higher-Order Functions Interview Questions

What makes a function "higher-order"

A higher-order function (HOF) is any function that either:

1. Takes one or more functions as arguments (a callback), or
2. Returns a function as its result

This is possible because JavaScript treats functions as first-class citizens — functions are just values, like numbers or strings. You can store them in variables, put them in arrays, pass them as arguments, and return them from other functions.

// Functions are values — these are all equivalent
function add(a, b) { return a + b }
const add = function(a, b) { return a + b }
const add = (a, b) => a + b

// Store in a variable
const operation = add
operation(2, 3)   // 5

// Store in an array
const fns = [Math.sin, Math.cos, Math.sqrt]
fns[0](Math.PI)   // ≈ 0

// Store in an object
const math = { add, multiply: (a, b) => a * b }
math.add(2, 3)   // 5

// Pass as an argument — HOF
function applyTwice(fn, x) {
  return fn(fn(x))
}
applyTwice(x => x + 3, 10)  // 16 — (10+3)+3
applyTwice(x => x * 2, 5)   // 20 — (5*2)*2

// Return a function — HOF
function makeMultiplier(n) {
  return x => x * n
}
const double = makeMultiplier(2)
const triple = makeMultiplier(3)
double(5)   // 10
triple(5)   // 15

The built-in array HOFs — the ones you use every day

Array.map() — transform every element

Creates a new array by applying a function to each element. The original array is never modified.

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

// Without HOF — imperative
const doubled = []
for (let i = 0; i < numbers.length; i++) {
  doubled.push(numbers[i] * 2)
}

// With map — declarative
const doubled = numbers.map(n => n * 2)  // [2, 4, 6, 8, 10]

// Callback signature: (currentValue, index, array)
const withIndex = numbers.map((n, i) => `${i}: ${n}`)
// ['0: 1', '1: 2', '2: 3', '3: 4', '4: 5']

// Real-world: transform API data
const users = [
  { id: 1, first: 'Alice', last: 'Smith' },
  { id: 2, first: 'Bob',   last: 'Jones' },
]
const names    = users.map(u => `${u.first} ${u.last}`)
const ids      = users.map(u => u.id)
const userMap  = users.map(u => ({ ...u, fullName: `${u.first} ${u.last}` }))

Array.filter() — keep elements that pass a test

Creates a new array containing only elements for which the callback returns a truthy value.

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

const evens   = numbers.filter(n => n % 2 === 0)   // [2, 4, 6, 8, 10]
const odds    = numbers.filter(n => n % 2 !== 0)   // [1, 3, 5, 7, 9]
const over5   = numbers.filter(n => n > 5)         // [6, 7, 8, 9, 10]

// Real-world: filtering UI state
const tasks = [
  { id: 1, text: 'Buy milk',    done: true  },
  { id: 2, text: 'Write code',  done: false },
  { id: 3, text: 'Read book',   done: false },
]
const pending    = tasks.filter(t => !t.done)
const completed  = tasks.filter(t => t.done)
const withText   = tasks.filter(t => t.text.includes('code'))

Array.reduce() — collapse an array into a single value

The most powerful and general of the three. It accumulates a result by running the callback on each element, threading the accumulated value through.

// Signature: reduce(callback, initialValue)
// Callback: (accumulator, currentValue, index, array)

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

// Sum
const sum = numbers.reduce((acc, n) => acc + n, 0)  // 15

// Product
const product = numbers.reduce((acc, n) => acc * n, 1)  // 120

// Max value (without Math.max)
const max = numbers.reduce((acc, n) => n > acc ? n : acc, -Infinity)  // 5

// Building an object from an array
const people = ['Alice', 'Bob', 'Carol']
const byName = people.reduce((acc, name) => {
  acc[name] = { name, active: true }
  return acc
}, {})
// { Alice: { name: 'Alice', active: true }, Bob: {...}, Carol: {...} }

// Grouping by a property
const orders = [
  { product: 'apple',  qty: 3 },
  { product: 'banana', qty: 2 },
  { product: 'apple',  qty: 5 },
]
const grouped = orders.reduce((acc, order) => {
  const key = order.product
  if (!acc[key]) acc[key] = []
  acc[key].push(order)
  return acc
}, {})
// { apple: [{qty:3},{qty:5}], banana: [{qty:2}] }

Array.forEach() — side effects only

Like map but always returns undefined. Use it only for side effects (logging, DOM updates, firing events) — never to build a new array.

numbers.forEach((n, i) => console.log(`${i}: ${n}`))
// Use map if you need a result. Use forEach if you don't.

Array.find() and Array.findIndex()

const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob'   },
]
const user  = users.find(u => u.id === 2)       // { id: 2, name: 'Bob' }
const index = users.findIndex(u => u.id === 2)  // 1
const none  = users.find(u => u.id === 99)      // undefined — not null, not -1

Array.every() and Array.some()

const scores = [72, 88, 91, 65, 99]

scores.every(s => s >= 60)   // true  — all pass
scores.every(s => s >= 80)   // false — not all pass
scores.some(s => s >= 90)    // true  — at least one passes
scores.some(s => s < 50)     // false — none fail that badly

Chaining — the real power

Because each HOF returns a new array, you can chain them into readable data pipelines:

const employees = [
  { name: 'Alice', dept: 'Engineering', salary: 90000, active: true  },
  { name: 'Bob',   dept: 'Marketing',   salary: 75000, active: true  },
  { name: 'Carol', dept: 'Engineering', salary: 110000, active: false },
  { name: 'Dave',  dept: 'Engineering', salary: 85000, active: true  },
  { name: 'Eve',   dept: 'Marketing',   salary: 68000, active: false },
]

// Get total salary of active Engineering employees
const totalActivEngSalary = employees
  .filter(e => e.active)                    // active only
  .filter(e => e.dept === 'Engineering')    // engineering only
  .map(e => e.salary)                       // extract salaries
  .reduce((sum, s) => sum + s, 0)           // total

// [Alice(90k), Dave(85k)] → [90000, 85000] → 175000

// Get sorted names of active employees
const activeNames = employees
  .filter(e => e.active)
  .map(e => e.name)
  .sort()

Writing your own higher-order functions

// A HOF that takes a predicate and returns its opposite
const not = fn => (...args) => !fn(...args)

const isEven = n => n % 2 === 0
const isOdd  = not(isEven)

[1,2,3,4,5].filter(isOdd)   // [1, 3, 5]

// A HOF that memoizes another function
function memoize(fn) {
  const cache = new Map()
  return function(...args) {
    const key = JSON.stringify(args)
    if (cache.has(key)) return cache.get(key)
    const result = fn.apply(this, args)
    cache.set(key, result)
    return result
  }
}

const expensiveCalc = memoize((n) => {
  // simulate expensive operation
  return n * n
})
expensiveCalc(42)  // calculates
expensiveCalc(42)  // returns cached result

// A HOF that rate-limits a function
function debounce(fn, delay) {
  let timer
  return function(...args) {
    clearTimeout(timer)
    timer = setTimeout(() => fn.apply(this, args), delay)
  }
}

const onResize = debounce(() => console.log('resized'), 200)
window.addEventListener('resize', onResize)

Imperative vs declarative — the mindset shift

const orders = [
  { id: 1, amount: 150, status: 'completed' },
  { id: 2, amount: 50,  status: 'pending'   },
  { id: 3, amount: 200, status: 'completed' },
  { id: 4, amount: 75,  status: 'pending'   },
]

// Imperative — HOW to do it
let total = 0
for (let i = 0; i < orders.length; i++) {
  if (orders[i].status === 'completed') {
    total += orders[i].amount
  }
}

// Declarative — WHAT to get
const total = orders
  .filter(o => o.status === 'completed')
  .reduce((sum, o) => sum + o.amount, 0)
// Both produce 350. The declarative version reads like a sentence.