Functions are one of the most powerful and important features in JavaScript. They allow you to group code together, reuse it whenever needed, and make your programs clean, modular, and easy to maintain.

In simple words,

A function is a block of code that runs only when it is called.

Let’s explore what functions are, how to create them, and the different ways you can write them in JavaScript.

Why Use Functions?

Imagine you have to calculate the square of different numbers multiple times in your program. Without functions, you would repeat the same lines of code again and again — messy and hard to manage!

Instead, you can just create a function once and call it whenever you need it.

Function Declaration (Regular Function)

A function declaration is the classic way to define a function in JavaScript.

Syntax:

function functionName(parameters) {
  // code to be executed
}

• functionName → The name of the function (you’ll use this name to call it).
• parameters → Variables that act as placeholders for input values.
• The code inside { } runs when the function is called.

Example:

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

To call the function, simply write its name followed by parentheses:

greet("Alice"); // Output: Hello, Alice!
greet("Bob");   // Output: Hello, Bob!

Note: Functions can take any number of parameters — or even none at all!

Returning Values from Functions

Functions can also return values using the return keyword.

Example:

function add(a, b) {
  return a + b;
}
 
let result = add(5, 10);
console.log(result); // Output: 15

Here, the function add() returns the sum of a and b. You can store that returned value in a variable or use it directly.

Function Expression

A function expression is when you assign a function to a variable. This is another way to define a function — and it’s especially useful when you want to treat functions like data.

Syntax:

const variableName = function(parameters) {
  // code to be executed
};

Example:

const multiply = function(x, y) {
  return x * y;
};
 
console.log(multiply(4, 5)); // Output: 20

Key Difference: Unlike function declarations, function expressions are not hoisted — that means you can’t call them before they are defined in the code.

Arrow Functions (Modern ES6)

Arrow functions are a shorter and cleaner way to write functions. They were introduced in ES6 (ECMAScript 2015) and are now widely used.

Syntax:

const functionName = (parameters) => {
  // code to be executed
};

Example:

const square = (x) => {
  return x * x;
};
 
console.log(square(5)); // Output: 25

You can make it even shorter if your function has a single statement and one parameter:

const double = x => x * 2;
 
console.log(double(4)); // Output: 8

Arrow Function Rules:

• If there’s only one parameter, you can skip the parentheses.
• If there’s only one statement, you can skip the {} and return.
• Arrow functions don’t have their own this, which makes them great for callbacks and shorter utility functions.

Comparing All Three Function Types

Nested Functions

You can also define a function inside another function. This is called a nested function, and the inner function can only be used inside the outer one.

Example:

function outer() {
  console.log("Outer function running...");
 
  function inner() {
    console.log("Inner function running...");
  }
 
  inner(); // Can only be called here
}
 
outer();

Output:

Outer function running...
Inner function running...

Real-World Example

Here’s a simple example showing functions working together:

function calculateBill(amount, taxRate) {
  function addTax(value) {
    return value + (value * taxRate);
  }
  return addTax(amount);
}
 
console.log(calculateBill(100, 0.05)); // Output: 105

Here:

• The inner function addTax() adds tax to the given amount.
• The outer function calculateBill() calls it and returns the final value.

Quick Recap -

• Functions are reusable blocks of code that perform specific tasks.

• You can define them using:

  • Function Declaration – function name() {}
  • Function Expression – const name = function() {}
  • Arrow Function – const name = () => {}

• Functions can return values, accept parameters, and even be nested inside other functions.

• Arrow functions are shorter and cleaner, but behave slightly differently with this.