Function Declarations
Introduction
A function declaration defines a named, reusable block of code with the function keyword. It creates a binding in the current scope and, unlike most values, the function body is available throughout that scope during execution.
That hoisting behavior is why calculateTotal() can be called above the line where function calculateTotal(...) appears. Declarations are the clearest choice for top-level utilities, domain operations, and functions that deserve a stable name in stack traces and interview explanations.
Why This Matters
Function declarations are the baseline for almost every JavaScript interview. They test whether you understand hoisting, execution contexts, parameters, return values, recursion, and the difference between a named callable binding and a function value stored later in a variable.
Theory
Syntax and behavior
A declaration has a name, optional parameters, and a body: function add(a, b) { return a + b; }. When JavaScript creates an execution context, it registers function declarations before running the body of that scope. The binding points to the actual function object, not to undefined, so declarations can be called before their source line.
| Concept | Function declaration behavior |
|---|---|
| Name | Required and visible in its scope. |
| Hoisting | Entire function is available before the declaration line executes. |
| Return value | return exits immediately; missing return produces undefined. |
| Scope | Parameters and local variables belong to the function call. |
| Recursion | Easy because the function has a stable internal name. |
Calling a function pushes a new frame onto the call stack. That frame contains parameters, local variables, and the return address. When the function returns or throws, the frame is popped and control resumes at the caller. Declarations also make code read like an API: high-level flow can appear above helper implementations.
In modern strict-mode JavaScript, block-level function declarations are block-scoped. Older sloppy-mode browser behavior was inconsistent, so for interview clarity prefer top-level declarations inside a function or module, or use a const function expression when you need a block-local function value.
Visual Diagrams
Creation phase
add -> function object
Execution phase
console.log(add(2, 3)) -> 5
function add(a, b) { ... } line is reached laterThe declaration is registered with its function body before execution starts.
Code Examples
Calling a declaration before its source line
The binding already points to the function object during execution, so this works.
Guard clauses keep declarations readable
Named declarations are excellent for business rules because each branch can return as soon as the answer is known.
Playground
Press Run to execute the code and see output here.
Output Prediction
Predict the output #1
1console.log(add(2, 3));2 3function add(a, b) {4 return a + b;5}6 7console.log(typeof add);Coding Exercises
Write an interview-friendly range classifier
EasyImplement a function declaration classifyScore(score) that returns excellent for scores 90 and above, good for 75 to 89, pass for 50 to 74, and fail below 50. Use clear guard clauses and return strings exactly as specified.
Interview Questions
1What is hoisted for a function declaration?
The function binding and the function body are created during the creation phase of the surrounding execution context. That means you can call a declaration before its source line. This differs from var function expressions, where only the variable is hoisted as undefined, and from let or const function expressions, which are in the temporal dead zone until initialized.
Follow-ups
- How is this different from a function expression assigned to `const`?
- What does a function return if it has no explicit `return`?
2When would you prefer a function declaration over an arrow function?
Use a declaration for named, reusable operations where hoisting, stack-trace names, recursion, or API-like readability are helpful. Use arrows for short callbacks or when you intentionally want lexical this. Declarations are especially clear for top-level domain functions and interview solutions.
Quiz
1. Why can a function declaration be called before it appears in source code?
Summary
- A function declaration creates a named callable binding with the `function` keyword.
- Declarations are hoisted with their body, so they can be called before their source line.
- Each call creates a call-stack frame with parameters and local variables.
- Use declarations for reusable, named operations that should read like an API.
Cheat Sheet
Syntax: function name(params) { return value; }.
Hoisting: callable before the declaration line because the function body is registered during creation.
Return: missing return means undefined.
Best for: top-level utilities, recursive functions, interview solutions, readable domain operations.
Compare: declarations are ready immediately; const fn = function () {} is not usable before initialization.