Functions are one of the most important building blocks in programming. They allow developers to organize code into reusable units that perform specific tasks. In JavaScript, functions help reduce repetition, improve readability, and make programs easier to maintain.
This article explains what functions are, why they are needed, how to declare them, how function expressions work, and the basic concept of hoisting.
What Are Functions and Why Do We Need Them?
A function is a reusable block of code designed to perform a specific task. Instead of writing the same code repeatedly, you can place it inside a function and call it whenever needed.
Functions help with:
- Code reuse — write once, use many times
- Better organization — divide large programs into smaller pieces
- Maintainability — easier to update or fix code
- Readability — makes code easier to understand
Example: Adding Two Numbers
function add(a, b) {
return a + b;
}
let result = add(3, 4);
console.log(result); // 7
Here:
-
addis the function name -
aandbare parameters -
returnsends the result back to where the function was called
Instead of rewriting addition logic multiple times, we simply call add() whenever needed.
Function Declaration Syntax
A function declaration defines a function using the function keyword followed by a name.
Syntax
function functionName(parameters) {
// code to execute
}
Example
function greet(name) {
return "Hello " + name;
}
console.log(greet("Alice"));
Output:
Hello Alice
Characteristics of function declarations:
- Must have a name
- Defined using the
functionkeyword - Can be called before or after their definition due to hoisting
Function Expression Syntax
A function expression is when a function is assigned to a variable.
Syntax
const variableName = function(parameters) {
// code
};
Example
const greet = function(name) {
return "Hello " + name;
};
console.log(greet("Alice"));
In this case:
- The function does not need a name
- It is stored inside a variable
- It behaves like any other variable
Function expressions are commonly used when functions are passed around as values.
Declaration vs Expression (Side-by-Side Comparison)
Function Declaration
function add(a, b) {
return a + b;
}
console.log(add(2, 3));
Function Expression
const add = function(a, b) {
return a + b;
};
console.log(add(2, 3));
Both versions produce the same output. However, they behave differently internally.
Key Differences
| Feature | Function Declaration | Function Expression |
|---|---|---|
| Syntax | Uses function name()
|
Assigned to a variable |
| Name | Must have a name | Often anonymous |
| Hoisting | Fully hoisted | Only variable is hoisted |
| Use Case | General reusable functions | Flexible usage, callbacks |
Basic Idea of Hoisting
Hoisting is JavaScript's behavior where certain declarations are moved to the top of their scope during execution.
For functions, this affects whether they can be called before they appear in the code.
Example: Function Declaration
sayHello();
function sayHello() {
console.log("Hello!");
}
This works because the function declaration is hoisted.
Example: Function Expression
sayHello();
const sayHello = function() {
console.log("Hello!");
};
This causes an error because the variable exists but the function is not yet assigned when it is called.
In simple terms:
- Function declarations work before definition
- Function expressions do not
When to Use Each Type
Use Function Declarations When
- You want a clear, reusable function
- The function is a core part of the program
- You want the ability to call it before it appears in the file
Example:
function calculateTotal(price, tax) {
return price + tax;
}
Use Function Expressions When
- Assigning functions to variables
- Passing functions as arguments
- Creating functions inside other functions
- Writing callbacks
Example:
const numbers = [1, 2, 3];
numbers.forEach(function(num) {
console.log(num);
});
Assignment Practice
1. Function Declaration
Write a function that multiplies two numbers.
function multiply(a, b) {
return a * b;
}
console.log(multiply(3, 4));
2. Function Expression
Write the same logic using a function expression.
const multiply = function(a, b) {
return a * b;
};
console.log(multiply(3, 4));
3. Experiment With Hoisting
Try calling them before they are defined.
Example:
console.log(multiply(3, 4));
function multiply(a, b) {
return a * b;
}
Now try the same with a function expression and observe the difference.
Conclusion
Functions are essential for writing clean, reusable, and maintainable JavaScript code. Understanding the difference between function declarations and function expressions helps developers choose the right approach depending on the situation. Additionally, knowing the basic idea of hoisting prevents common mistakes when calling functions before they are defined.
Mastering these fundamentals builds a strong foundation for more advanced JavaScript concepts such as callbacks, arrow functions, and asynchronous programming.
Top comments (1)
Function expression and assigning a function to a variable are two different things.
Function expression occurs anywhere where the function keyword is used in a position where a statement would be invalid. When used in this manner, it effectively works like a "function literal' - creating a function in-place without any assignment. Function expression is seen in IIFEs (hence the name) and also frequently when passing anonymous functions as callbacks.
A function created with function expression CAN be stored in a variable, but doesn't have to be.
developer.mozilla.org/en-US/docs/W...