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;
};

❤3

1.11K views20:58