Functions
Create reusable blocks of logic.
Functions are one of the most important concepts in JavaScript. They allow you to group a set of instructions together and reuse them whenever needed. Instead of writing the same code multiple times, you can write it once inside a function and call it whenever required.
Think of a function like a coffee machine. You press a button, and the machine performs a series of actions to prepare your coffee. You do not need to know every internal step each time; you simply use the function when needed.
Functions help make code cleaner, more organized, and easier to maintain.
Why Are Functions Important?
Without functions, developers would have to repeat the same code again and again.
Functions help by:
- Reducing code duplication
- Making programs easier to read
- Organizing code into smaller sections
- Improving code maintenance
- Allowing code reuse
Almost every JavaScript application uses functions extensively.
Creating a Function
A function is created using the function keyword.
function greet() {
console.log("Hello, Welcome to JavaScript!");
}This creates a function named greet.
However, the function will not run until it is called.
greet();Output:
Hello, Welcome to JavaScript!Function Parameters
Parameters allow functions to receive information.
function greet(name) {
console.log("Hello " + name);
}
greet("John");Output:
Hello JohnHere, name is a parameter that receives the value John.
Parameters make functions more flexible because they can work with different values.
Returning Values from Functions
Functions can return a value using the return statement.
function add(a, b) {
return a + b;
}
let result = add(5, 3);
console.log(result);Output:
8The return statement sends a value back to the place where the function was called.
Function Expressions
A function can also be stored inside a variable.
const greet = function() {
console.log("Hello World");
};
greet();This is called a function expression.
Arrow Functions
Arrow functions provide a shorter way to write functions.
const greet = () => {
console.log("Hello World");
};
greet();For simple functions, arrow functions make the code more concise and easier to read.
Real-World Example
Imagine an online shopping website that calculates the total price of products.
function calculateTotal(price, quantity) {
return price * quantity;
}
let total = calculateTotal(500, 3);
console.log(total);Output:
1500Instead of writing the multiplication logic repeatedly, the website can reuse the same function whenever a customer adds products to their cart.
Default Parameters
Functions can also have default values for parameters.
function greet(name = "Guest") {
console.log("Hello " + name);
}
greet();Output:
Hello GuestIf no value is provided, JavaScript uses the default value.
Summary
Functions are reusable blocks of code that perform specific tasks. They help developers write cleaner, more efficient, and easier-to-maintain programs. Functions can accept parameters, return values, and be written in different styles such as function declarations, function expressions, and arrow functions. Understanding functions is essential because they are used throughout JavaScript, from simple scripts to large web applications.