1. Introduction
A function in JavaScript is a reusable block of code designed to perform a specific task. Functions improve readability, reduce repetition, and make programs more organized. JavaScript is flexible and supports several ways to declare and call functions, making it a powerful tool for developers.
2. Why Use Functions?
Functions are essential for writing professional and maintainable code. Benefits include:
Reusability: write once, use many times
Modularity: break complex tasks into smaller parts
Cleaner Code: easier to understand and debug
Maintainability: updates affect only one place
3. Types of Functions in JavaScript
3.1 Function Declaration
A standard way to define a function using the function keyword.
function greet() {
console.log("Hello!");
}
3.2 Function Expression
A function stored inside a variable.
let greet = function() {
console.log("Hello!");
};
3.3 Arrow Functions (ES6)
Short and modern syntax for writing functions.
let add = (a, b) => a + b;
3.4 Anonymous Functions
Functions without a name, often used in callbacks.
setTimeout(function() {
console.log("Executed later");
}, 1000);
3.5 Callback Functions
A function passed as an argument to another function.
function process(callback) {
callback();
}
process(() => console.log("Callback executed"));
3.6 IIFE (Immediately Invoked Function Expression)
A function that runs immediately after its creation.
(function() {
console.log("IIFE executed");
})();
4. Parameters and Arguments
function multiply(a, b) {
return a * b;
}
multiply(5, 6); // arguments
5. Return Statement
return sends a value back from a function.
function square(x) {
return x * x;
}
6. Default Parameters
Specify default values when no argument is provided.
function greet(name = "User") {
console.log("Hello " + name);
}
7. Rest Parameters
Allows a function to accept an unlimited number of arguments.
function sum(...numbers) {
return numbers.reduce((a, b) => a + b, 0);
}
sum(1, 2, 3, 4); // 10
8. Higher-Order Functions
A function that either accepts another function or returns one.
function calculate(operation, a, b) {
return operation(a, b);
}
calculate((x, y) => x + y, 5, 10);
9. Function Scope
Local Scope
Variables declared inside a function.
Global Scope
Variables declared outside any function.
let globalVar = "Global";
function example() {
let localVar = "Local";
console.log(globalVar);
}
10. Hoisting
Function declarations are hoisted to the top of their scope, so they can be used before being defined.
greet();
function greet() {
console.log("Hello!");
}
11. Pure vs Impure Functions
Pure Functions
Impure Functions
// Pure
function add(a, b) {
return a + b;
}
// Impure
let count = 0;
function increase() {
count++;
}
12. Conclusion
Functions are one of the most important concepts in JavaScript. They make code reusable, modular, and easy to maintain. Understanding different types of functions, parameters, return values, hoisting, and modern features like arrow functions helps in writing efficient JavaScript programs.