🎓 Velnov

🟨 JavaScript · Topic 11 of 20

Functions & Arrow Functions — JavaScript Questions with Answers

30 practice questions on Functions & Arrow Functions, each with the correct answer and a clear explanation of why it is right. Read through them as revision notes, or take this topic as an interactive quiz to test yourself.

3 easy · 16 medium · 11 hard · Part of JavaScript: The language of the web - basics to advanced, 20 topics.

Key concepts in this topic

DeclarationsExpressionsHoistingreturnundefinedArrow functionsImplicit returnArrow syntaxCommon mistakesDefault parametersArgumentsRest parametersSpreadRestargumentsCallbacksHigher-order functionsEventsFirst-class functionsmapIIFEScopeRecursionCall stack

Jump to: Easy · Medium · Hard

Easy questions (3)

Q1. easy

Which is a function DECLARATION?

  1. A function greet() { }
  2. B const greet = function() { };
  3. C const greet = () => { };
  4. D greet: function() { }

Answer: A — function greet() { }

A declaration starts with the function keyword and has a name. Options B and C are function EXPRESSIONS (a function assigned to a variable).

DeclarationsExpressions

Q3. easy

What does a function return if there is no return statement?

function log(msg) { console.log(msg); }
const r = log("hi");
console.log(r);   // undefined
  1. A undefined
  2. B null
  3. C 0
  4. D An error

Answer: A — undefined

Every JavaScript function returns something; without an explicit return the result is undefined.

returnundefined

Q4. easy

What is the arrow-function equivalent of function double(n) { return n * 2; }

  1. A const double = n => n * 2;
  2. B const double = n => { n * 2; };
  3. C const double => n * 2;
  4. D arrow double(n) { n * 2 }

Answer: A — const double = n => n * 2;

A concise arrow body (no braces) returns its expression automatically. Option B has braces without return, so it yields undefined.

Arrow functionsImplicit return

Medium questions (16)

Q2. medium

What is the key practical difference between a function declaration and an expression?

sayHi();                       // works
function sayHi() { }

sayBye();                      // TypeError/ReferenceError
const sayBye = function() { };
  1. A Declarations are fully HOISTED, so they can be called before they appear; expressions cannot
  2. B Expressions run faster
  3. C Declarations cannot take parameters
  4. D There is no difference

Answer: A — Declarations are fully HOISTED, so they can be called before they appear; expressions cannot

Declarations are lifted with their body, so calling them earlier in the file works. Function expressions follow variable hoisting rules, so calling early gives an error.

Hoisting

Q5. medium

When can you omit the parentheses around an arrow function's parameter?

() => 42
n => n * 2
(a, b) => a + b
  1. A With exactly ONE parameter: n => n * 2
  2. B Always
  3. C Never
  4. D Only with zero parameters

Answer: A — With exactly ONE parameter: n => n * 2

Zero parameters need (), and two or more need (a, b). A single parameter may drop them - though many style guides require them for consistency.

Arrow syntax

Q7. medium

How do you give a parameter a DEFAULT value?

function greet(name = "Guest") { return `Hi ${name}`; }
greet();          // Hi Guest
greet(undefined); // Hi Guest
greet(null);      // Hi null - null is NOT undefined!
  1. A function greet(name = "Guest") { }
  2. B function greet(name || "Guest") { }
  3. C function greet(name: "Guest") { }
  4. D function greet(default name) { }

Answer: A — function greet(name = "Guest") { }

Default parameters (ES6) apply when the argument is undefined (including when omitted). They may reference earlier parameters too.

Default parameters

Q8. medium

What happens when you call a function with FEWER arguments than parameters?

  1. A The missing parameters are undefined - no error is thrown
  2. B TypeError
  3. C The call is ignored
  4. D They default to 0

Answer: A — The missing parameters are undefined - no error is thrown

JavaScript never enforces argument counts. Extra arguments are ignored; missing ones become undefined. This flexibility makes defaults and validation important.

Argumentsundefined

Q9. medium

What do REST parameters do? function sum(...nums) { }

function sum(...nums) {
  return nums.reduce((a, b) => a + b, 0);
}
console.log(sum(1, 2, 3));   // 6
  1. A Collect all remaining arguments into a real ARRAY
  2. B Spread an array into arguments
  3. C Limit the function to 3 arguments
  4. D Create optional parameters

Answer: A — Collect all remaining arguments into a real ARRAY

...nums gathers any number of arguments into an array you can map/reduce over. It must be the LAST parameter.

Rest parametersSpread

Q12. medium

What is a callback function?

setTimeout(() => console.log("later"), 1000);
btn.addEventListener("click", handleClick);
[1,2].map(n => n * 2);
  1. A A function passed to another function to be called later
  2. B A function that calls itself
  3. C A function that returns a function
  4. D A built-in browser function

Answer: A — A function passed to another function to be called later

Callbacks power event handlers, timers and array methods: you hand over a function and the other code decides when to run it.

CallbacksHigher-order functions

Q14. medium

What is a higher-order function?

  1. A A function that takes a function as an argument and/or returns a function
  2. B A function with many parameters
  3. C A function declared first in a file
  4. D A recursive function

Answer: A — A function that takes a function as an argument and/or returns a function

map, filter, addEventListener and setTimeout are all higher-order. Functions being first-class values (storable, passable, returnable) is what makes this possible.

First-class functionsmap

Q16. medium

What is function recursion?

function factorial(n) {
  if (n <= 1) return 1;        // base case
  return n * factorial(n - 1);
}
console.log(factorial(5));   // 120
  1. A A function calling ITSELF, with a base case to stop
  2. B Two functions calling each other only
  3. C A loop inside a function
  4. D Calling a function twice

Answer: A — A function calling ITSELF, with a base case to stop

Recursion breaks a problem into smaller identical problems. Every recursive function needs a base case, or it hits 'Maximum call stack size exceeded'.

RecursionCall stack

Q17. medium

What error does infinite recursion cause?

  1. A RangeError: Maximum call stack size exceeded
  2. B SyntaxError
  3. C TypeError
  4. D It runs forever silently

Answer: A — RangeError: Maximum call stack size exceeded

Each call adds a frame to the call stack; without a base case the stack overflows. The error message is the signature of a missing or unreachable base case.

Call stackRangeError

Q20. medium

What is a pure function?

const add = (a, b) => a + b;          // pure
let total = 0;
const addTo = n => { total += n; };   // impure (side effect)
  1. A One that returns the same output for the same input and causes no side effects
  2. B A function with no parameters
  3. C An arrow function
  4. D A function that only uses const

Answer: A — One that returns the same output for the same input and causes no side effects

Pure functions do not modify external state, DOM or their arguments. They are easy to test, cache and reason about - the backbone of functional style and React.

PuritySide effects

Q23. medium

What is the output? const nums = [1, 2, 3]; console.log(nums.map(function(n) { return n * 2; }));

  1. A [2, 4, 6]
  2. B [1, 2, 3]
  3. C undefined
  4. D Error

Answer: A — [2, 4, 6]

An anonymous function expression works exactly like an arrow here. The arrow version is shorter: nums.map(n => n * 2).

Anonymous functionsmap

Q24. medium

What is a named function expression useful for? const f = function myFunc() { };

  1. A The name appears in stack traces and allows self-reference inside the function
  2. B It creates two functions
  3. C It is required by strict mode
  4. D It makes it global

Answer: A — The name appears in stack traces and allows self-reference inside the function

The internal name aids debugging and recursion, but is not visible outside the function - only f exists in the enclosing scope.

Named expressionsDebugging

Q26. medium

How do you write a function that takes an options OBJECT?

create({ height: 80 });   // width defaults to 100
create();                  // both defaults
  1. A function create({ width = 100, height = 50 } = {}) { }
  2. B function create(options[]) { }
  3. C function create(width, height, ...) { }
  4. D function create(object) { }

Answer: A — function create({ width = 100, height = 50 } = {}) { }

Destructuring with defaults, plus '= {}' so calling with no arguments still works. Callers pass named options in any order - self-documenting and easy to extend.

DestructuringOptions pattern

Q27. medium

What is the output? console.log(typeof function() {});

if (typeof callback === "function") callback();
  1. A "function"
  2. B "object"
  3. C "undefined"
  4. D "method"

Answer: A — "function"

Functions are objects internally, but typeof reports "function" - the standard way to check whether something is callable before calling it.

typeofCallbacks

Q29. medium

Which naming style is conventional for functions?

  1. A camelCase verbs: calculateTotal(), getUserById()
  2. B PascalCase: CalculateTotal()
  3. C snake_case: calculate_total()
  4. D ALL_CAPS

Answer: A — camelCase verbs: calculateTotal(), getUserById()

Functions do things, so names usually start with a verb in camelCase. PascalCase is reserved for classes and React components.

ConventionsNaming

Q30. medium

Why break code into small functions?

  1. A Reuse, easier testing, self-documenting names, and no duplicated logic
  2. B Functions always run faster
  3. C JavaScript requires at least five
  4. D To use more memory

Answer: A — Reuse, easier testing, self-documenting names, and no duplicated logic

A well-named function replaces a comment and can be tested in isolation. The DRY principle - Don't Repeat Yourself - is the core motivation.

DRYCode organisation

Hard questions (11)

Q6. hard

What is the output? const f = n => { n * 2 }; console.log(f(5));

  1. A undefined - braces create a block body, which needs an explicit return
  2. B 10
  3. C 5
  4. D SyntaxError

Answer: A — undefined - braces create a block body, which needs an explicit return

Curly braces switch the arrow to a full function body. Either remove them (n => n * 2) or add return (n => { return n * 2; }). A very common bug inside map().

Arrow functionsCommon mistakes

Q10. hard

What is the difference between rest (...) in a definition and spread (...) in a call?

function sum(...nums) { }     // rest: gather
sum(...[1, 2, 3]);              // spread: scatter
  1. A Rest COLLECTS arguments into an array; spread EXPANDS an array into separate arguments
  2. B They are the same
  3. C Rest only works with numbers
  4. D Spread only works in definitions

Answer: A — Rest COLLECTS arguments into an array; spread EXPANDS an array into separate arguments

Same three dots, opposite directions - context decides. Definition side = gather; call side = scatter.

RestSpread

Q11. hard

What is the arguments object, and do arrow functions have it?

function old() { console.log(arguments[0]); }
const modern = (...args) => console.log(args[0]);   // preferred
  1. A An array-LIKE object of all passed arguments in regular functions - arrow functions do NOT have it
  2. B A real array available everywhere
  3. C Only available in arrow functions
  4. D It stores return values

Answer: A — An array-LIKE object of all passed arguments in regular functions - arrow functions do NOT have it

arguments exists in traditional functions but is not a real array (no map/filter). Arrow functions inherit it from the enclosing scope instead. Modern code prefers rest parameters.

argumentsRest parameters

Q13. hard

What is the difference between passing greet and greet()? btn.addEventListener("click", greet);

btn.addEventListener("click", greet);         // correct
btn.addEventListener("click", greet());       // WRONG - runs now
btn.addEventListener("click", () => greet(1)); // correct with args
  1. A greet passes the FUNCTION itself; greet() CALLS it immediately and passes its return value
  2. B They are identical
  3. C greet() is required for events
  4. D greet is invalid

Answer: A — greet passes the FUNCTION itself; greet() CALLS it immediately and passes its return value

Adding parentheses runs the function right away and registers whatever it returned (usually undefined) as the handler - so nothing happens on click. Omit them, or wrap in an arrow: () => greet(arg).

  • A top-three beginner bug with event listeners.

CallbacksEvents

Q15. hard

What is an IIFE? (function() { ... })();

(function() {
  const secret = 42;   // not global
})();

(() => { /* arrow IIFE */ })();
  1. A Immediately Invoked Function Expression - it runs the moment it is defined, creating a private scope
  2. B A function that never runs
  3. C An imported function
  4. D A class constructor

Answer: A — Immediately Invoked Function Expression - it runs the moment it is defined, creating a private scope

Before ES6 modules, IIFEs were the way to avoid polluting the global scope. The wrapping parentheses turn the declaration into an expression, and the trailing () invokes it.

IIFEScope

Q18. hard

What is the output? function f(x) { x = 99; } let a = 5; f(a); console.log(a);

  1. A 5 - primitives are passed BY VALUE, so the function got a copy
  2. B 99
  3. C undefined
  4. D Error

Answer: A — 5 - primitives are passed BY VALUE, so the function got a copy

Reassigning a parameter only changes the local copy. To change the caller's value, return the new one and reassign.

Pass by valuePrimitives

Q19. hard

What is the output? function f(obj) { obj.n = 99; } const o = { n: 5 }; f(o); console.log(o.n);

function g(obj) { obj = { n: 0 }; }   // no outside effect
g(o);
console.log(o.n);   // still 99
  1. A 99 - objects are passed by reference VALUE, so mutations are visible outside
  2. B 5
  3. C undefined
  4. D Error

Answer: A — 99 - objects are passed by reference VALUE, so mutations are visible outside

The parameter points at the same object, so mutating its properties affects the caller. But REASSIGNING the parameter (obj = {}) would not - the reference itself was copied.

Pass by referenceMutation

Q21. hard

How do arrow functions differ from regular functions regarding this?

const timer = {
  count: 0,
  start() {
    setInterval(() => this.count++, 1000);   // arrow keeps this
  }
};
  1. A Arrows have no own this - they inherit it from the surrounding scope (lexical this)
  2. B Arrows always set this to window
  3. C They behave identically
  4. D Arrows set this to undefined always

Answer: A — Arrows have no own this - they inherit it from the surrounding scope (lexical this)

This is the biggest practical difference. Arrows are perfect for callbacks inside methods (where you want the outer this) and wrong as object methods (where you want the object).

thisArrow functions

Q22. hard

Which is NOT true of arrow functions?

  1. A They can be used as constructors with new
  2. B They have no own this
  3. C They have no arguments object
  4. D They can have implicit returns

Answer: A — They can be used as constructors with new

Arrow functions cannot be called with new - 'is not a constructor'. They also lack prototype, this, arguments and super. Use regular functions or classes for constructors.

Arrow limitationsConstructors

Q25. hard

What does this return? function add(a) { return b => a + b; } const add5 = add(5); console.log(add5(3));

  1. A 8 - add returns a function that remembers a (a closure)
  2. B 5
  3. C 3
  4. D undefined

Answer: A — 8 - add returns a function that remembers a (a closure)

add(5) produces a specialised function with a fixed at 5. This technique - a function returning a function - is called currying and relies on closures.

ClosuresCurrying

Q28. hard

What is the output? function f() { return; 42; } console.log(f());

return {      // correct - brace on the same line
  a: 1
};
  1. A undefined - Automatic Semicolon Insertion ends the return statement at the line break
  2. B 42
  3. C SyntaxError
  4. D null

Answer: A — undefined - Automatic Semicolon Insertion ends the return statement at the line break

ASI inserts a semicolon right after return, making 42 unreachable code. Always put the returned value on the SAME line as return - especially with multi-line objects (use a parenthesis on the return line).

ASIreturnGotchas

Practice “Functions & Arrow Functions” as a quiz