JavaScript Notes
Master JavaScript function declarations – syntax, hoisting behavior, scope, parameters, return values, vs function expression, with examples, diagrams, and interview Q&A.
Introduction
A function declaration is the most classic, foundational way to define a function in JavaScript. It's the first form of function definition every JavaScript developer learns — and it has a superpower called hoisting that makes it available throughout the entire scope, even before the line where it appears.
Understanding function declarations deeply — their syntax, hoisting, scope, and how they compare to other function forms — is essential for every JavaScript developer.
Basic Example
function greet(name) {
return `Hello, ${name}!`;
}
console.log(greet("Riya"));
console.log(greet("Arjun"));Hello, Riya! Hello, Arjun!
Anatomy of a Function Declaration
| Part | Description |
|---|---|
function | Keyword that starts the declaration |
functionName | Required name for function declarations |
(params) | Zero or more comma-separated parameters |
{ body } | The code that runs when function is called |
return | Optional — returns a value to the caller |
Hoisting – The Superpower of Function Declarations
Hoisting means that function declarations are moved to the top of their scope by the JavaScript engine before any code runs. This means you can call a function even before you write it!
// Called BEFORE it is declared — this works!
console.log(add(3, 4));
function add(a, b) {
return a + b;
}7
How Hoisting Works Internally:
WHAT YOU WRITE:
console.log(add(3, 4));
function add(a, b) { return a + b; }
WHAT JS ENGINE SEES (after hoisting):
function add(a, b) { return a + b; } ← moved to top!
console.log(add(3, 4)); ← now this works⚠️ Only function declarations are hoisted completely. Function expressions and arrow functions are NOT fully hoisted — only the variable name is hoisted (as undefined).Memory Diagram – Function Declaration in Memory
Parameters and Arguments
// Parameters = placeholders in the definition
function introduce(firstName, lastName, age) {
return `${firstName} ${lastName}, age ${age}`;
}
// Arguments = actual values passed when calling
console.log(introduce("Ada", "Lovelace", 36));Ada Lovelace, age 36
Default Parameters (ES6+):
function greet(name = "Guest", greeting = "Hello") {
return `${greeting}, ${name}!`;
}
console.log(greet());
console.log(greet("Priya"));
console.log(greet("Rahul", "Namaste"));Hello, Guest! Hello, Priya! Namaste, Rahul!
Rest Parameters:
6 100
Return Values
Functions return undefined by default if no return statement is written.
function withReturn(x) {
return x * x;
}
function withoutReturn(x) {
x * x; // calculated but not returned
}
console.log(withReturn(5)); // 25
console.log(withoutReturn(5)); // undefined25 undefined
Step-by-Step Execution Trace
function multiply(a, b) {
const result = a * b;
return result;
}
const answer = multiply(6, 7);
console.log(answer);42
Real World Analogy
A function declaration is like a recipe card in a recipe book. The recipe book (scope) has all recipes (function declarations) available from page 1 — even if the recipe card is physically at the back of the book (later in code). You can call the recipe anytime. Regular functions → full recipe card (hoisted, fully available) Function expressions → a sticky note you write as you go (not available before creation)
Scope of Function Declarations
Function declarations create their name in the scope where they are declared.
function outer() {
function inner() {
console.log("I am inner");
}
inner(); // ✅ works here
}
outer();
inner(); // ❌ ReferenceError: inner is not definedI am inner ReferenceError: inner is not defined
Common Mistakes
❌ Mistake 1: Forgetting return and getting undefined
// WRONG
function square(n) {
n * n; // computed but not returned!
}
console.log(square(5)); // undefined// CORRECT
function square(n) {
return n * n;
}
console.log(square(5)); // 2525
❌ Mistake 2: Confusing parameters with arguments
function greet(name) { // `name` is a PARAMETER (placeholder)
return `Hi, ${name}`;
}
greet("Priya"); // "Priya" is an ARGUMENT (actual value)❌ Mistake 3: Calling with wrong number of arguments
function add(a, b) {
return a + b;
}
console.log(add(5)); // b is undefined → NaN
console.log(add(5, 3, 10)); // extra argument 10 is ignoredNaN 8
Fix: Use default parameters or validate inputs.
❌ Mistake 4: Thinking functions are copied when passed
function greet(name) {
return `Hi ${name}`;
}
const fn = greet; // fn points to the SAME function object
console.log(fn("Priya")); // works!Hi Priya
Both greet and fn refer to the same function object in memory.
Function Declaration vs Function Expression vs Arrow Function
| Feature | Declaration | Expression | Arrow |
|---|---|---|---|
| Syntax | function name() {} | const f = function() {} | const f = () => {} |
| Hoisted? | ✅ Fully | ❌ Variable only | ❌ Variable only |
| Has name | ✅ Always | Optional | Via variable only |
this binding | Dynamic | Dynamic | Lexical |
Can use new | ✅ Yes | ✅ Yes | ❌ No |
arguments | ✅ Yes | ✅ Yes | ❌ No |
Interview Questions
Q1. What is a function declaration in JavaScript?
A function declaration defines a named function using the function keyword as a statement. It is fully hoisted to the top of its scope.
Q2. What is hoisting and how does it apply to function declarations?
Hoisting is JavaScript's behavior of moving declarations to the top of their scope during the compilation phase. Function declarations are fully hoisted — both the variable and the function body — so you can call them before they appear in code.
Q3. What is the difference between function declaration and function expression?
Function declarations are hoisted completely; function expressions are only hoisted as undefined. Function declarations require a name; expressions can be anonymous. Both have dynamic this.
Q4. Can a function return multiple values?
Not directly, but you can return an array or object:
1 5
Q5. What happens if you call a function with fewer arguments than parameters?
Missing arguments become undefined. Use default parameters to handle this gracefully.
Q6. What is the difference between parameters and arguments?
- Parameters are the named placeholders in the function definition
- Arguments are the actual values passed when calling the function
Q7. Can function declarations be inside if blocks?
In non-strict mode they can, but the behavior is inconsistent across environments. Avoid this pattern — use function expressions inside blocks.
Q8. What does a function return if there is no return statement?
It returns undefined implicitly.
Key Takeaways
- ✅ Function declarations use the
functionkeyword as the first word - ✅ They are fully hoisted — callable before their line in code
- ✅ Always have a name (unlike anonymous function expressions)
- ✅ Parameters are placeholders; arguments are actual values
- ✅ Missing arguments are
undefined; use defaults to handle them - ✅ Functions return
undefinedunless you explicitlyreturna value - ✅ They have their own
thisandargumentsobjects - ✅ Best for named, reusable, globally or module-scoped utility functions
Exam Focus
Revise definitions, diagrams, examples, and short-answer points for JavaScript Function Declaration Tutorial – Hoisting, Syntax & Scope.
Interview Use
Prepare one clear explanation, one practical example, and one common mistake for this JavaScript Master Course topic.
Search Terms
javascript-complete-guide, javascript master course, javascript, complete, guide, functions, function, declaration
Related JavaScript Master Course Topics