Why Do We Need Functions?
When writing JavaScript, you’ll often repeat the same logic multiple times. For example, imagine you frequently need to add two numbers.
Without functions, you might write something like this again and again:
let result = 5 + 3;
console.log(result);
Now imagine you need to do this 20 times in different parts of your program.
Instead of repeating the logic, we create a function.
A function is simply a reusable block of code that performs a specific task.
Think of a function like a machine: you give it some input, it performs a task, and it returns an output.
Example:
function add(a, b) {
return a + b;
}
console.log(add(5, 3)); // 8
Here, the function add takes two numbers and returns their sum. Instead of rewriting the logic, we just call the function whenever needed.
Function Declaration
A function declaration is the most common way beginners learn to create functions.
Syntax
function functionName(parameters) {
// code to execute
}
Example: multiplying two numbers.
function multiply(a, b) {
return a * b;
}
console.log(multiply(4, 5)); // 20
Here’s what’s happening:
function is the keyword used to define a function.
multiply is the name of the function.
a and b are parameters.
The function returns the result of a * b.
Once declared, this function can be used anywhere in your program.
Function Expression
A function expression is another way to create functions. Instead of declaring a function directly, we store the function inside a variable.
Syntax
let variableName = function(parameters) {
// code
};
Example using the same multiplication logic:
let multiply = function(a, b) {
return a * b;
};
console.log(multiply(4, 5)); // 20
The result is the same, but the way the function is defined is slightly different.
Here:
This means the variable now holds the function.
Declaration vs Expression (Side-by-Side)
Let’s compare both approaches.
Function Declaration
function multiply(a, b) {
return a * b;
}
Function Expression
let multiply = function(a, b) {
return a * b;
};
Both functions work the same way when called:
console.log(multiply(3, 4)); // 12
But there are some important differences between them.
Key Differences
The biggest difference comes from how JavaScript loads and executes code.
1. Hoisting Behavior
Function declarations are hoisted, but function expressions are not.
Hoisting simply means JavaScript moves certain declarations to the top of the file before execution.
Let’s see what this means in practice.
Calling a Function Before It Is Defined
Example with Function Declaration
console.log(multiply(3, 4));
function multiply(a, b) {
return a * b;
}
This works perfectly.
Output:
12
Even though the function is written later in the code, JavaScript already knows about it because function declarations are hoisted.
Example with Function Expression
console.log(multiply(3, 4));
let multiply = function(a, b) {
return a * b;
};
This will cause an error.
Why?
Because the variable multiply does not contain the function yet when JavaScript tries to run the first line.
In simple terms:
When Should You Use Each?
Both approaches are useful, and developers use them for different reasons.
Use Function Declarations When:
You want functions available anywhere in the file
The function represents a core piece of logic
You want simpler, cleaner syntax
Example:
function calculateTotal(price, tax) {
return price + tax;
}
Use Function Expressions When:
You want to store functions inside variables
You want functions to behave like values
You plan to pass the function as an argument later
Example:
let greet = function(name) {
return "Hello " + name;
};
Function expressions are also common in callbacks and modern JavaScript patterns.
