Imagine you're a head chef in a busy kitchen. To keep everything running smoothly, you write down instructions for common tasks so you don’t have to explain them again and again.
In programming, these reusable instructions are called functions.
What is a Function?
A function is simply a block of code designed to perform a specific task. Once defined, we can reuse it whenever we need.
Example: multiply two numbers.
Instead of writing the multiplication logic multiple times, we can wrap it inside a function.
function multiply(a, b) {
return a * b;
}
console.log(multiply(4, 5)); // 20
console.log(multiply(6, 7)); // 42
Now we can reuse multiply() anywhere.
But in JavaScript, there are two common ways to create functions:
- Function Declaration
- Function Expression
Understanding the difference will help you write cleaner and more predictable code.
Function Declaration: The "Wall-Mounted Recipe"
A Function Declaration is like a giant recipe for "Tomato Soup" that you’ve permanently painted onto the kitchen wall.
The Definition
You define it using the function keyword followed by a name. Because it’s painted on the wall, it’s official and "public."
function makeTomatoSoup(tomatoes, cream) {
return `Soup made with ${tomatoes} tomatoes and ${cream}!`;
}
console.log(makeTomatoSoup(5, "1 cup"));
Recipe Logic: Since the recipe is on the wall, any chef can look up from their station and see it. It is a part of the kitchen's structure.
Function Expression: The "Recipe on a Clipboard"
A Function Expression is a bit different. Instead of painting it on the wall, you write the instructions on a piece of paper and clip it to a specific Variable (a clipboard).
The Definition
Here, the function is often "anonymous" (has no name), but we access it through the variable name we gave the clipboard.
const makeTomatoSoup = function(tomatoes, cream) {
return `Soup made with ${tomatoes} tomatoes and ${cream}!`;
};
console.log(makeTomatoSoup(5, "1 cup"));
The Recipe Logic: This recipe isn't "public" until the clipboard is handed out. It belongs to the variable, and the variable controls when it gets used.
Side-by-Side Comparison
Let's write the same function using both approaches.
Function Declaration
function multiply(a, b) {
return a * b;
}
Function Expression
const multiply = function(a, b) {
return a * b;
};
Both work the same when called:
console.log(multiply(3, 6)); // 18
The diagram above shows how JavaScript executes function calls depending on where the function is defined.
But their behavior differs because of hoisting.
The Hoisting Mystery
JavaScript reads your code in two phases. During the first phase,
it prepares certain declarations before the code actually runs.
This behavior is called hoisting.
You don't need to understand the internal engine deeply yet — just remember this rule:
- Function declarations are hoisted
- Function expressions are not
// Order the soup!
console.log(makeTomatoSoup(3, "half cup"));
// The recipe is defined later, but it works!
function makeTomatoSoup(t, c) { return "Soup is ready!"; }
Expressions: Wait for the Clipboard
With a Function Expression, JavaScript treats the "clipboard" like any other ingredient (variable). If a chef calls for the soup before the clipboard has been prepared and handed out, the kitchen crashes.
// Order the soup?
console.log(makeTomatoSoup(3, "half cup")); // ERROR!
// The clipboard hasn't been "initialized" yet
const makeTomatoSoup = function(t, c) { return "Soup is ready!"; };
Key Differences
This diagram summarizes the key differences between function declarations and function expressions.
When Should You Use Each?
Use Function Declaration when:
- You want reusable functions
- The function should be available throughout the file
- You want clearer structure
Use Function Expression when
- Passing functions as arguments
- Creating callbacks
- Controlling when the function becomes available
Practice Challenge
Try this in your console.
Step 1 — Function Declaration
console.log(multiply(3, 4));
function multiply(a, b) {
return a * b;
}
Notice it works.
Step 2 — Function Expression
console.log(multiply(3, 4));
const multiply = function(a, b) {
return a * b;
};
Now you should see an error.
Final Thoughts
Both function declarations and function expressions create functions, but they behave differently because of hoisting.
A simple rule to remember:
Declarations → available everywhere
Expressions → available after definition
Mastering this difference will help you avoid confusing bugs
and write more predictable JavaScript.
Top comments (0)