JavaScript Function

by

What is a Function in JavaScript?

A function is a block of code designed to perform a specific task. It runs only when it is called (invoked).

🔹 Basic Function Syntax

function functionName(parameters) {
    // code to execute
    return result;
}

🔹 1. Simple Function Example

function greet() {
    console.log("Hello, Welcome!");
}greet(); // calling function

👉 Output:

Hello, Welcome!

🔹 2. Function with Parameters

function greetUser(name) {
    console.log("Hello " + name);
}greetUser("Deepesh");

👉 Output:

Hello Deepesh

🔹 3. Function with Return Value

function add(a, b) {
    return a + b;
}let result = add(5, 3);
console.log(result);

👉 Output:

8

🔹 4. Function Expression

A function can also be stored in a variable.

const multiply = function(a, b) {
    return a * b;
};console.log(multiply(4, 5));

👉 Output:

20

🔹 5. Arrow Function (Modern Way)

Short syntax introduced in ES6.

const subtract = (a, b) => {
    return a - b;
};console.log(subtract(10, 4));

👉 Short version:

const subtract = (a, b) => a - b;

🔹 6. Default Parameters

function greet(name = "Guest") {
    console.log("Hello " + name);
}greet();        // Hello Guest
greet("Ram");   // Hello Ram

🔹 7. Function with Multiple Parameters

function userInfo(name, age, city) {
    console.log(name + " is " + age + " years old from " + city);
}userInfo("Deepesh", 25, "Bhopal");

🔹 8. Callback Function

A function passed as an argument to another function.

function processUser(name, callback) {
    console.log("Processing " + name);
    callback();
}function done() {
    console.log("Completed!");
}processUser("Deepesh", done);

🔹 9. Anonymous Function

A function without a name.

setTimeout(function() {
    console.log("Executed after 2 seconds");
}, 2000);

🔹 10. Immediately Invoked Function (IIFE)

Runs immediately after definition.

(function() {
    console.log("IIFE executed");
})();

🔹 11. Function Scope

Variables inside a function are not accessible outside.

function testScope() {
    let x = 10;
    console.log(x);
}testScope();
// console.log(x); ❌ Error

🔹 12. Rest Parameters

Used to handle multiple arguments.

function sum(...numbers) {
    let total = 0;
    for (let num of numbers) {
        total += num;
    }
    return total;
}console.log(sum(1, 2, 3, 4));

🔹 13. Higher-Order Function

Function that takes another function or returns one.

function calculator(a, b, operation) {
    return operation(a, b);
}const add = (x, y) => x + y;console.log(calculator(5, 3, add));

🔹 Real-World Usage

Functions are used in:

  • 🔹 Form validation
  • 🔹 API calls
  • 🔹 Event handling (click, submit)
  • 🔹 Reusable utilities
  • 🔹 Automation scripts (like Playwright tests)

🔹 Example: Real Use Case (Form Validation)

function validateEmail(email) {
    return email.includes("@");
}function submitForm(email) {
    if (validateEmail(email)) {
        console.log("Form submitted");
    } else {
        console.log("Invalid email");
    }
}submitForm("test@gmail.com");

🔹 Best Practices

✔ Use meaningful function names
✔ Keep functions small and focused
✔ Use arrow functions for short logic
✔ Avoid global variables
✔ Always return values when needed

🔹 Summary

  • Functions make code reusable
  • Can take inputs (parameters)
  • Can return outputs
  • Support modern syntax (arrow functions)
  • Essential for real-world JavaScript development

Leave a Comment