07 / 18

What is function expression?

A Function Expression is when you create a function and assign it to a variable. Unlike a Function Declaration, the function is treated as a value (like a string or a number) rather than a standalone statement.

  1. 1

    function keyword: The function keyword can be used to define a function inside an expression.

  2. 2

    A function expression is very similar to and has almost the same syntax as, a function declaration.

  3. 3

    Can be Anonymous or Named: The main difference between a function expression and a function declaration is the function name, which can be omitted in function expressions to create anonymous functions.

  4. 4

    Hoisting: You cannot call a function expression before you define it. The variable is hoisted, but the function value is not assigned until the code runs.

javascript
If you want to refer to the current function inside the function body, you need to create a named function expression. This name is then local only to the function body (scope). This avoids using the deprecated arguments.callee property to call the function recursively.
Difficulty: 5/10
Topics: function expressions, hoisting, IIFE

Scenario Questions

0-2 years experience
  1. 1

    We need a click handler that logs a message; show me how you'd write it using a function expression and where you'd place it in the code.

  2. 2

    If you assign a function expression to a const variable and later attempt to reassign it, what error do you get and why?

  3. 3

    What will the console output for this snippet: const fn = function() { return 1; }; console.log(fn());

2-5 years experience
  1. 1

    Our utility started throwing 'undefined is not a function' after we changed a declaration to a function expression. Walk me through how you'd debug the issue.

  2. 2

    We want to export a helper but also have a stable name in stack traces. Which kind of function expression would you choose and why?

  3. 3

    Explain the trade‑offs of using an IIFE versus a regular function expression for initializing a configuration object.

5-8 years experience
  1. 1

    Bundle size is growing; we consider converting top‑level function declarations to expressions that can be lazy‑loaded. How would you restructure the code and what impact does it have on tree‑shaking?

  2. 2

    In a large React app we have many callbacks passed as props. Discuss how using arrow function expressions versus regular function expressions affects this binding and performance.

  3. 3

    We need to enforce that all public APIs are defined as named function expressions. How would you implement this rule in ESLint and what edge cases would you watch for?

8+ years experience
  1. 1

    Our legacy monolith mixes declarations and expressions across modules, causing inconsistent stack traces and refactoring pain. Design a migration plan to standardize on named function expressions, considering build pipelines, testing, and backward compatibility.

  2. 2

    When building a server‑side plugin system that loads user‑provided scripts, how would you sandbox function expressions to prevent global leakage while still exposing a callable API?

  3. 3

    Discuss the long‑term architectural implications of preferring function expressions for all module exports in a micro‑frontend environment, especially regarding code splitting, versioning, and cross‑team ownership.

Follow-up Questions

  • What happens if you try to call the function before the expression is evaluated?
  • How does a named function expression help with debugging compared to an anonymous one?
  • Are there any memory or performance differences between declarations and expressions?