Web Development - HTML, CSS & JavaScript
💻 JavaScript Roadmap 2026 — Part 5
🟢 Functions in JavaScript
Functions are one of the most important concepts in JavaScript.
A function is a reusable block of code designed to perform a particular task. Instead of writing the same code repeatedly, you can put it inside a function and call it whenever you need it.
1️⃣ Creating a Function
The basic syntax is:
function greet() {
console.log("Hello!");
}
This creates a function called "greet". But creating a function doesn't execute it.
To execute it, you need to call it:
greet();
Output: Hello!
2️⃣ Why Do We Need Functions?
Imagine you need to print the same message three times.
Without a function:
console.log("Welcome to JavaScript");
console.log("Welcome to JavaScript");
With a function:
function welcome() {
console.log("Welcome to JavaScript");
}
welcome();
welcome();
welcome();
Functions make code:
✅ Reusable,
✅ Easier to maintain,
✅ Easier to test,
✅ Easier to understand
3️⃣ Function Parameters
Functions can accept information through parameters.
function greet(name) {
console.log("Hello " + name);
}
greet("Rahul");
greet("Priya");
Output: Hello Rahul, Hello Priya
Here: name → parameter, "Rahul" → argument.
A parameter is the variable defined in the function. An argument is the actual value passed when calling it.
4️⃣ Multiple Parameters
A function can accept multiple parameters.
function add(a, b) {
console.log(a + b);
}
add(10, 5); // 15
You can reuse the same function: add(20, 30); add(100, 50);
5️⃣ Returning a Value
A function doesn't always need to print something. It can return a value.
function add(a, b) {
return a + b;
}
let result = add(10, 5);
console.log(result); // 15
The important difference is: console.log() displays something. return sends a value back from the function.
6️⃣ Understanding "return"
function multiply(a, b) {
return a * b;
}
let result = multiply(5, 4);
console.log(result);
The process is: multiply(5, 4) → 5 × 4 → 20 → return 20 → result = 20
Once JavaScript executes "return", the function stops executing.
function test() {
return "Hello";
console.log("This will not run");
}
7️⃣ Functions Without "return"
function greet(name) {
console.log("Hello " + name);
}
greet("Rahul");
That's completely valid. If a function doesn't explicitly return a value, its return value is: undefined
function greet() {
console.log("Hello");
}
let result = greet();
console.log(result); // Hello, undefined
8️⃣ Storing a Function in a Variable
Functions can be assigned to variables.
const greet = function () {
console.log("Hello");
};
greet();
This is called a function expression.
Compare:
Function declaration: function greet() { console.log("Hello"); }
Function expression: const greet = function () { console.log("Hello"); };
Both can be called as functions, but they have different hoisting behavior.
🔹 Arrow Functions
9️⃣ What Is an Arrow Function?
Arrow functions provide a shorter syntax for writing functions.
Traditional function:
function add(a, b) {
return a + b;
}
Arrow function:
const add = (a, b) => {
return a + b;
};
10 · 1.3K ·