Functions
Declarations, expressions, arrows, callbacks and higher-order functions.
Functions are values you can store, pass and return — that single idea powers callbacks, array methods and most libraries. Interviewers ask this to see whether you reach for the right shape: declaration, expression or arrow.
Real-life situation
A login form needs three checks: email shape, password length, and both together. Writing each check as a small function and combining them with a higher-order validator keeps every rule testable alone — and the "validate everything" line reads like the requirement itself.
Visual
Try it
function isEmail(value) {
return value.includes("@") && value.includes(".");
}
const isLongEnough = function (value) {
return value.length >= 8;
};
const checkPassword = (value) => isLongEnough(value);
function validate(fields, checks) {
return checks.map(function (check) {
return check(fields);
});
}
const form = { email: "ada@example.com", password: "s3cret!!" };
const results = validate(form, [
function (f) {
return isEmail(f.email);
},
function (f) {
return checkPassword(f.password);
},
]);
console.log(results[0]);
console.log(results[1]);
console.log(results.every(Boolean));Expected output
true true true
Try changing the arrow checkPassword to a function expression — same
result. Then make the password "short" and watch which line flips.
Finally, wrap one check so it runs only once and notice how much state
even a tiny reusable wrapper needs.
When to use which
Declarations for standalone helpers (hoisted, mockable). Expressions and
arrows for callbacks passed inline. Arrows when you want the outer this;
function when the caller must set this.
Apply twice — guess first, then reveal.
function applyTwice(fn, value) {
return fn(fn(value));
}
console.log(
applyTwice(function (n) {
return n + 1;
}, 5),
);Interview questions
What is the difference between a function declaration and a function expression?basic
A declaration (function total() {}) is hoisted whole, so it can run before its line, and it gets its own this. An expression (const total = function () {}) behaves like any other value: it must be defined before use. In practice declarations suit standalone helpers and expressions suit callbacks and anything passed around as data.
Interviewers also ask
- Which one can you call before its line in the file?
How do arrow functions differ from regular functions?basic
Arrows are shorter and inherit this from where they are written instead of getting their own — perfect for callbacks inside methods and array helpers. The trade is that they cannot be constructors (new throws), have no arguments object, and make poor object methods when you need dynamic this. Default to arrows for callbacks; use function for methods and anything constructed.
Interviewers also ask
- Why does this break when you use an arrow as an object method?
What are default parameters and rest parameters?basic
Defaults fill in missing arguments: function greet(name = "guest") uses "guest" when the caller passes undefined or nothing. Rest gathers the leftover arguments into a real array: function sum(...nums) lets you call sum(1, 2, 3) and loop nums directly. Together they replaced most arguments juggling and manual undefined checks.
Interviewers also ask
- What does rest give you that arguments does not?
What is a callback, and what is a higher-order function?intermediate
A callback is a function handed to another function to run later — a click handler, a setTimeout body, an array mapper. A higher-order function is the other side: it takes a function in or returns one out, like map, filter, or a once wrapper. The pair is JavaScript's main reuse mechanism: behavior travels as values instead of being subclassed.
Interviewers also ask
- Name three higher-order functions from the standard library.
What is an IIFE and is it still useful?intermediate
An immediately invoked function expression — (function () { ... })() — runs once and keeps its variables private. Before modules, it was THE scoping tool: libraries wrapped everything in one to avoid globals. With ES modules giving every file its own scope, IIFEs are mostly history — you will still meet them in legacy code and interview trivia, rarely in new code.
Interviewers also ask
- What replaced the IIFE's job?
What does the return value of Array.map do, and how is it different from forEach?basic
map builds and returns a NEW array with the callback applied to each item, leaving the original untouched — that return value is the whole point, so ignoring it is a bug smell. forEach returns undefined and is for side effects only (logging, saving, DOM updates). If you are not using map's result, you wanted forEach; if you are pushing inside forEach, you wanted map.
Interviewers also ask
- Which one would you use to render a list of names?
Explain call, apply and bind.intermediate
All three set what this means inside a function. call runs it now with listed arguments (fn.call(user, 1, 2)); apply runs it now with an arguments array (fn.apply(user, [1, 2])); bind does not run it at all — it returns a new function with this permanently fixed, ideal for handlers like button.onclick = save.bind(form). Modern code mostly uses bind for callbacks and arrows everywhere else.
Interviewers also ask
- How would you borrow an array method for the arguments object?
What is a pure function, and why do interviewers care?intermediate
A pure function always returns the same output for the same input and touches nothing outside itself — no globals, no mutations, no network. They are trivial to test, safe to memoize, and painless to parallelize, which is why functional code and UI frameworks lean on them. The interview angle: spotting impurity (a hidden mutation, a Date.now() inside) is often the actual bug in the exercise.
Interviewers also ask
- Is a function using Math.random pure?
Key takeaways
- Declarations hoist; expressions and arrows must be defined first.
- Arrows inherit
this;functionreceives it from the call. - Higher-order functions take or return functions to reuse behavior.
References
Last verified: 2026-10-12.
Runner helpers
sleep(ms)waits;fakeFetch(url)returns deterministic sample data. Console code runs in a worker with a 5-second limit.