The Two Main Ways to Create a Function
There are two common ways to write a function in JavaScript. They look almost the same, but they behave differently. Let's see them first, then we will compare.
Function Statement (also called Function Declaration)
A function statement is the classic way you learned first. You write the function keyword, give the function a name, add the body, and you are done.
function sayHello() {
console.log("Hello from a function statement!");
}
sayHello();
// Hello from a function statement!
Function Expression
In a function expression, you create a function and store it in a variable — just like storing a number or a string. The function on the right side acts as a value.
const sayHi = function () {
console.log("Hello from a function expression!");
};
sayHi();
// Hello from a function expression!
Notice the difference — here the function has no name of its own. We stored it in the variable sayHi, and we call it using that variable.
The Key Difference: Hoisting
This is the reason interviewers ask about both styles. Function statements are fully hoisted — you can call them even before you write them. Function expressions are not — they behave like a normal variable and stay undefined until the line runs.
statementFn(); // Works fine
expressionFn(); // TypeError: expressionFn is not a function
function statementFn() {
console.log("I am a statement");
}
var expressionFn = function () {
console.log("I am an expression");
};
Why Does This Happen?
During the memory creation phase (hoisting), JavaScript sets aside memory for every name.
If you used let or const instead of var, calling the function expression early would throw a ReferenceError because of the temporal dead zone.
Anonymous Functions
An anonymous function is simply a function without a name. We already used one above — the function on the right side of our function expression.
const doWork = function () {
console.log("This function has no name of its own");
};
Why Can't You Write an Anonymous Function on Its Own?
If you try to write a function statement without a name, JavaScript throws a SyntaxError. This is because the language rules say a function statement must have a name.
function () {
console.log("Will not work");
}
// SyntaxError: Function statements require a function name
So where do anonymous functions live? They live in places where a function is being used as a value — the right side of an assignment, an argument to another function, or a return value.
// Stored in a variable
const run = function () { console.log("run!"); };
// Passed as an argument
setTimeout(function () { console.log("fired!"); }, 1000);
// Returned from another function
function makeGreeter() {
return function () { console.log("hi!"); };
}
Named Function Expression
A named function expression is a function expression that has its own name on the right side as well.
const greet = function sayHello() {
console.log("Hello there!");
};
greet(); // Hello there!
sayHello(); // ReferenceError: sayHello is not defined
The Gotcha
This often comes as a tricky interview question. You might think you can call sayHello() directly, but you cannot — that inner name lives only inside the function body. Outside, only the variable greet works.
const factorial = function fact(n) {
if (n <= 1) return 1;
return n * fact(n - 1); // uses the inner name for recursion
};
console.log(factorial(5)); // 120
Parameters vs Arguments
These two words get mixed up all the time, but they are different things.
Parameters
Arguments
function greet(name, age) { // name, age = parameters
console.log("Hi " + name + ", age " + age);
}
greet("Anita", 28); // "Anita", 28 = arguments
greet("Rohit", 35); // "Rohit", 35 = arguments
Simple rule: parameters are on the definition side, arguments are on the call side. They are local to the function — you cannot use them from outside.
First-Class Functions: The Most Asked Question
This is the one that scares many candidates in interviews. But once you hear the definition, it is one line.
A function is called a first-class function (or a first-class citizen) in a language when you can do all three of these things with it:
1. Store in a variable
2. Pass as argument
3. Return from function
JavaScript supports all three. That is why we say "functions are first-class citizens in JavaScript." They behave like any other value — numbers, strings, objects — you can move them around the same way.
Example: All Three Powers in One File
// Power 1: store a function in a variable
const double = function (n) {
return n * 2;
};
// Power 2: pass a function into another function
function runTwice(fn, value) {
return fn(fn(value));
}
console.log(runTwice(double, 3)); // 12 (3 * 2 * 2)
// Power 3: return a function from another function
function multiplyBy(x) {
return function (n) {
return n * x;
};
}
const triple = multiplyBy(3);
console.log(triple(10)); // 30
All three powers in one short file. This is why functions are the real super-power of JavaScript — you can compose them, pass them, and build clean patterns like map, filter, reduce, and addEventListener.
First-Class Functions vs Higher-Order Functions
Don't confuse these two terms — they are related but different.
| Term | Meaning |
|---|---|
| First-class function | A language feature — functions can be used as values |
| Higher-order function | A function that takes a function as input or returns a function |
JavaScript has first-class functions, and that is what allows you to write higher-order functions. Without the first, the second would not be possible.
Quick Comparison of All Terms
| Term | In One Line |
|---|---|
| Function Statement | function foo() {} — has a name, hoisted fully |
| Function Declaration | Another name for function statement |
| Function Expression | const foo = function () {} — value stored in variable |
| Anonymous Function | A function without a name, used as a value |
| Named Function Expression | const foo = function bar() {} — inner name is private |
| Parameters | Placeholders in the definition: function foo(a, b) |
| Arguments | Real values passed at call time: foo(10, 20) |
| First-class Functions | Language feature — functions are values |
| Higher-order Functions | Functions that accept or return other functions |
Common Mistakes
Mistake 1: Mixing Up Statement and Expression
Calling a function expression before it is defined gives you a TypeError (with var) or a ReferenceError (with let / const). If you really need to call a function earlier in the file, use a function statement.
Mistake 2: Confusing Parameter and Argument
In books and blogs, authors sometimes swap these words. Stay strict — parameters live in the definition, arguments live in the call. Being precise helps in interviews.
Mistake 3: Trying to Call the Inner Name of a Named Function Expression
const greet = function sayHello() {}, the name sayHello is only visible inside the function's own body. Outside, only greet works.
Mistake 4: Writing function () {} as a Standalone Statement
An anonymous function cannot live on its own — it always needs to be used as a value (stored, passed, or returned). Standalone, it is a SyntaxError.
Mistake 5: Thinking let / const Function Expressions Are Hoisted
They are hoisted in the technical sense, but they sit in the temporal dead zone until the line runs. You still cannot call them before the line of assignment.
Real-World Usage
Callbacks in Event Listeners
document.getElementById("save").addEventListener("click", function () {
console.log("Saved!");
});
Array Methods Take Functions
const scores = [70, 85, 40, 95];
const passed = scores.filter(function (s) {
return s >= 50;
});
console.log(passed); // [70, 85, 95]
Returning a Function from a Function
function makeTax(rate) {
return function (amount) {
return amount + amount * rate;
};
}
const withGST = makeTax(0.18);
console.log(withGST(1000)); // 1180
The Interview Answers
"A function statement is defined using the
function keyword and a name — it is fully hoisted, so you can call it even before its definition. A function expression stores a function in a variable — it behaves like a normal variable and cannot be called before the line where it is assigned."
"An anonymous function is a function without a name. It cannot stand alone — it must be used as a value, such as being stored in a variable, passed as an argument, or returned from another function."
"First-class functions mean that functions in JavaScript are treated like any other value. They can be stored in variables, passed as arguments to other functions, and returned from functions. This is why we say functions are first-class citizens in JavaScript."
Summary
JavaScript gives you two main ways to create a function — a function statement (also called declaration) and a function expression. They look similar, but only the statement is fully hoisted. The expression stays undefined until its line runs.
An anonymous function is just a function without a name. It cannot exist on its own; it must be used as a value. A named function expression adds a private name that only works inside the function itself — useful for recursion and nicer debug traces.
Don't mix up parameters (the placeholders in the definition) with arguments (the actual values you pass when calling). It is a small detail, but interviewers love to test it.
The biggest idea of all is first-class functions. It simply means functions are values in JavaScript — you can store them, pass them, and return them. That single feature is what makes callbacks, higher-order functions, closures, and modern functional programming possible. Master this, and most JavaScript interview questions about functions become easy.
| Concept | Key Takeaway |
|---|---|
| Function Statement | Named, hoisted fully, callable before definition |
| Function Expression | Stored in a variable, not callable before assignment |
| Anonymous Function | No name — must be used as a value |
| Named Function Expression | Inner name is private to the function body |
| Parameters | Placeholders in the definition |
| Arguments | Real values passed when calling |
| First-class Functions | Functions behave like any other value |
| Higher-order Functions | Functions that take or return other functions |
| Why It Matters | Foundation for callbacks, closures, map/filter/reduce |