Once you start writing real JavaScript, you'll quickly realize you're doing the same things over and over — calculating totals, greeting users, validating inputs. Copy-pasting the same code every time is messy and hard to maintain. That's exactly what functions solve.
What Is a Function and Why Do We Need One?
A function is a reusable block of code that you write once and can run as many times as you need. Give it a name, define what it does, and call it whenever you need it.
// Without a function — repetitive!
console.log(5 + 3);
console.log(10 + 3);
console.log(22 + 3);
// With a function — write once, use many times
function addThree(number) {
return number + 3;
}
console.log(addThree(5)); // 8
console.log(addThree(10)); // 13
console.log(addThree(22)); // 25
Functions make your code shorter, more readable, and easier to fix — change the logic in one place and it updates everywhere.
Function Declaration
A function declaration is the classic, traditional way to define a function. You start with the function keyword, give it a name, list any parameters in (), and write the body in {}.
function greet(name) {
return "Hello, " + name + "!";
}
console.log(greet("Alice")); // "Hello, Alice!"
console.log(greet("Bob")); // "Hello, Bob!"
Syntax breakdown
function greet ( name ) {
↑ ↑ ↑
keyword name parameter(s)
return "Hello, " + name + "!";
↑
sends value back to the caller
}
Another example — adding two numbers
function add(a, b) {
return a + b;
}
console.log(add(4, 6)); // 10
console.log(add(12, 8)); // 20
Function Expression
A function expression assigns a function to a variable. Instead of starting with function, you use const (or let), give the variable a name, then assign a function as its value.
const greet = function(name) {
return "Hello, " + name + "!";
};
console.log(greet("Alice")); // "Hello, Alice!"
console.log(greet("Bob")); // "Hello, Bob!"
Notice the function after = has no name — it's anonymous. The variable greet is what holds the reference to it.
Same adding example — as a function expression
const add = function(a, b) {
return a + b;
};
console.log(add(4, 6)); // 10
console.log(add(12, 8)); // 20
The output is identical. The difference is purely in how they're written and stored.
Side-by-Side Comparison
FUNCTION DECLARATION FUNCTION EXPRESSION
──────────────────────────────────────────────────────────
function add(a, b) { const add = function(a, b) {
return a + b; return a + b;
} };
// How you call them — exactly the same either way:
add(3, 5); // 8 add(3, 5); // 8
They produce the same result. The key differences are under the hood.
Key Differences
1. Syntax
| Function Declaration | Function Expression | |
|---|---|---|
| Starts with |
function keyword |
const / let
|
| Has a name? | Always | Optional (usually anonymous) |
Ends with ;? |
No | Yes (it's an assignment) |
2. Hoisting — The Big Practical Difference
Hoisting is JavaScript's behaviour of reading your code before running it and making function declarations available from the very start — even before the line they're written on.
Think of it this way: JavaScript does a quick "first pass" over your file. When it spots a function declaration, it registers it immediately. Function expressions aren't registered until that line actually runs.
Function declarations CAN be called before they're defined
// Call it on line 1 — before the definition!
console.log(multiply(3, 4)); // 12 Works!
function multiply(a, b) {
return a * b;
}
JavaScript hoisted the declaration to the top, so it was already available.
Function expressions CANNOT be called before they're defined
// Try to call it before the definition
console.log(multiply(3, 4)); // TypeError: multiply is not a function
const multiply = function(a, b) {
return a * b;
};
The variable multiply exists (it's hoisted as an empty slot), but the function hasn't been assigned to it yet. Calling it throws an error.
Hoisting Visualized
WHAT YOU WRITE WHAT JAVASCRIPT SEES (declaration)
──────────────────────────────────────────────────────────────────
sayHi(); function sayHi() { ← moved to top
return "Hi!";
function sayHi() { }
return "Hi!";
} sayHi(); // works — already registered
WHAT YOU WRITE WHAT JAVASCRIPT SEES (expression)
─────────────────────────────────────────────────────────────────
sayHi(); const sayHi; ← only variable hoisted
sayHi(); // still undefined here!
const sayHi = function() {
return "Hi!"; sayHi = function() { return "Hi!"; };
};
When to Use Each
| Situation | Best Choice |
|---|---|
| A general-purpose, reusable utility | Function Declaration |
| You need to call it before its definition | Function Declaration |
| Storing a function in a variable | Function Expression |
| Passing a function as an argument | Function Expression |
| Assigning different functions conditionally | Function Expression |
Use a declaration for named, reusable utilities:
function calculateTax(price, rate) {
return price * rate / 100;
}
console.log(calculateTax(1000, 18)); // 180
Use an expression when assigning or passing functions:
const double = function(n) {
return n * 2;
};
// Passed as an argument to map()
const numbers = [1, 2, 3];
const doubled = numbers.map(double);
console.log(doubled); // [2, 4, 6]
Full Comparison Table
| Feature | Function Declaration | Function Expression |
|---|---|---|
| Syntax | function name() {} |
const name = function() {} |
| Hoisted? | Yes | No |
| Callable before definition? | Yes | No |
| Anonymous? | No | Yes (optional) |
| Stored in a variable? | Not required | Yes, always |
| Best for | Named utilities | Callbacks, conditionals |
Top comments (1)
Clean.