Javascript Function

Introduction

In JavaScript, functions are one of the most important building blocks of programming. They allow you to write reusable, organized, and modular code. Instead of repeating the same logic multiple times, you can define a function once and use it whenever needed.

Functions are widely used in almost every JavaScript application—from simple calculations to complex web applications. Whether you are working with events, APIs, or frameworks like React, understanding functions is essential.

In this guide, you’ll learn everything about JavaScript functions, including syntax, types, examples, real-life use cases, common mistakes, and interview questions.

What is a JavaScript Function?

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

Syntax of a Function

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

Example:

function greet() {
   console.log("Hello, World!");
}

greet();

Note: greet() is a function that prints a message.

Function with Parameters

Parameters allow you to pass values into a function.

function add(a, b) {
   return a + b;
}

console.log(add(10, 5)); // 15

Output:

Function with Default Parameters

Suppose you pass a default value into the function’s parameter.

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

greet(); // Hello Guest

Output:

Types of JavaScript Functions

There are many types of JavaScript Functions.

1. Function Declaration

Defined using the function keyword.

function multiply(a, b) {
   return a * b;
}

multiply(10, 5); // 50

Output:

2. Function Expression

A function stored in a variable.

const divide = function(a, b) {
   return a / b;
};

divide(10, 5); // 2

Output:

3. Arrow Function (ES6)

A shorter syntax for writing functions.

const add = (a, b) => a + b;

4. Anonymous Function

A function does not have a name.

setTimeout(function() {
   console.log("Hello");
}, 1000);

5. Immediately Invoked Function Expression (IIFE)

When the function call itself, it is called an Immediately Invoked Function.

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

6. Callback Function

A function passed as an argument to another function.

function greet(name, callback) {
   console.log("Hello " + name);
   callback();
}

greet("John", function() {
   console.log("Welcome!");
});

Function Return Statement

Functions can return values using the return keyword.

function square(x) {
   return x * x;
}

square(5);

Output:

Note: Without a return, the function returns undefined.

Function Scope

There are 2 types of Function Scope.

1. Local Scope

Variables declared inside a function.

function test() {
   let x = 10;
   console.log(x);
}

Output:

2. Global Scope

Variables accessible anywhere.

x = 20;
function test() {
   console.log(x);
}

Output:

Real-Life Examples: Calculator Function

In the example below, I used 3 parameters.

function calculate(a, b, operator) {
   if (operator === "+") return a + b;
   if (operator === "-") return a - b;
}

Function Hoisting

Function declarations are hoisted.

greet();

function greet() {
   console.log("Hello");
}

Output:

Note: Function expressions are NOT hoisted.

Arrow Function vs Regular Function

Higher-Order Functions

Functions that take other functions as arguments or return functions.

Syntax:

function process(callback) {
   callback();
}

Example:

// Higher-Order Function Example in JavaScript

function calculate(a, b, operation) {
    return operation(a, b);
}

// Callback functions
function add(x, y) {
    return x + y;
}

function multiply(x, y) {
    return x * y;
}

// Using Higher-Order Function
console.log(calculate(10, 5, add));       // 15
console.log(calculate(10, 5, multiply));  // 50

Output:

Common Mistakes

1. Forgetting return

When Beginners forget to return in a function.

function add(a, b) {
   a + b; // no return
}

2. Using Arrow Function Incorrectly

const obj = {
   name: "John",
   greet: () => console.log(this.name) // undefined
};

JavaScript Function – Interview Questions

JavaScript Function – Objective Questions (MCQs)

Conclusion

JavaScript functions are essential for writing clean, reusable, and efficient code. From simple tasks to complex logic, functions help you organize your code and improve maintainability.

By mastering functions—including declarations, expressions, arrow functions, and callbacks—you’ll be well-prepared for real-world JavaScript development.