JavaScript has evolved a lot over the years, and one of the most useful additions introduced in ES6 (ECMAScript 2015) is arrow functions.

Arrow functions allow developers to write shorter, cleaner, and more readable functions, especially for simple operations.

In this blog, we'll understand:

• What arrow functions are

• Basic arrow function syntax

• Arrow functions with one parameter

• Arrow functions with multiple parameters

• Implicit return vs explicit return

• Basic difference between arrow function and normal function

We will also look at simple examples and practical usage.

Why Arrow Functions Exist

Before arrow functions, JavaScript functions often required more boilerplate code.

Example of a normal function:

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

With arrow functions, the same logic becomes shorter:

const add = (a, b) => {
  return a + b;
};

Arrow functions reduce unnecessary syntax and make code more concise and readable, especially in modern JavaScript applications.

Basic Arrow Function Syntax

The general syntax of an arrow function looks like this:

const functionName = (parameters) => {
  // function body
};

Example:

const greet = (name) => {
  return "Hello " + name;
};

console.log(greet("Sayantan"));

Output:

Hello Sayantan

Here:

• const greet → function stored in a variable

• (name) → parameter

• => → arrow operator

• {} → function body

Arrow Functions With One Parameter

If a function has only one parameter, the parentheses can be omitted.

Normal function:

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

Arrow function:

const square = num => {
  return num * num;
};

console.log(square(5));

Output:

25

Even though parentheses are optional here, many developers still keep them for consistency and readability.

Arrow Functions With Multiple Parameters

If a function has multiple parameters, parentheses are required.

Example:

const multiply = (a, b) => {
  return a * b;
};

console.log(multiply(4, 3));

Output:

12

Without parentheses, JavaScript would not understand multiple parameters correctly.

Implicit Return vs Explicit Return

Arrow functions support a feature called implicit return, which allows us to return values without using the return keyword.

Explicit Return

const add = (a, b) => {
  return a + b;
};

Here we explicitly write return.

Implicit Return

If the function has only one expression, we can write:

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

console.log(add(5, 2));

Output:

7

What happens here:

(a, b) => a + b

JavaScript automatically returns the result of a + b.

Example: Even or Odd

const isEven = num => num % 2 === 0;

console.log(isEven(6));
console.log(isEven(7));

Output:

true
false

This works because the function only contains one expression, so JavaScript returns it automatically.

Using Arrow Functions with map()

Arrow functions are extremely common when working with arrays.

Example:

const numbers = [1, 2, 3, 4];

const squares = numbers.map(num => num * num);

console.log(squares);

Output:

[1, 4, 9, 16]

Here:

• map() loops through each element

• num => num * num calculates the square of each number

• A new array is returned

Arrow functions make such operations very clean and readable.

mind map -

Normal Function → Arrow Function Transformation

Normal function:

function greet(name) {
  return "Hello " + name;
}

Arrow function:

const greet = name => "Hello " + name;

The arrow function removes:

• the function keyword

• unnecessary braces

• the explicit return

This leads to less code and clearer intent.

Mind map -

Basic Difference Between Arrow Functions and Normal Functions

Feature	Normal Function	Arrow Function
Syntax	Longer	Shorter
Readability	More boilerplate	Cleaner
this behavior	Has its own this	Inherits this from surrounding scope
Best use	General purpose functions	Short utility functions

For beginners, the main takeaway is:

Arrow functions are preferred for short, simple functions.