Arrow Functions in JavaScript: A Simpler Way to Write Functions

When you learn JavaScript, the first thing you write is a function.
But traditional functions sometimes feel long and repetitive.

Arrow functions were introduced in modern JavaScript (ES6) to make functions shorter, cleaner, and more readable.

In this blog, we will understand arrow functions step by step using very simple examples.

Open your browser console and try each example yourself.

What are Arrow Functions?

Arrow functions are a shorter way to write functions in JavaScript.

They help you:

• Write less code

• Improve readability

• Follow modern JavaScript style

Arrow functions use the => symbol.

Normal Function vs Arrow Function (Why Arrow?)

Normal function

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

Arrow function

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

Same result, but arrow function is shorter and cleaner.

Basic Arrow Function Syntax

const functionName = (parameters) => {
  return value;
};

Example

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

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

Output

5

Arrow Function with One Parameter

If there is only one parameter, brackets are optional.

Normal way

const square = (n) => {
  return n * n;
};

Shorter way

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

console.log(square(5));

Output

25

Arrow Function with Multiple Parameters

For multiple parameters, brackets are required.

Example

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

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

Output

20

Explicit Return vs Implicit Return

Explicit Return

When you use curly braces { }, you must write return.

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

Implicit Return

If the function has only one line, you can:

• Remove{ }

• Remove return

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

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

Output

7

This is called implicit return.

Simple Examples of Implicit Return

Greeting example

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

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

Output

Hello Rahul

Even or Odd example

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

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

Output

true
false

Arrow Function vs Normal Function

Normal Function	Arrow Function
Longer syntax	Shorter syntax
Uses function keyword	Uses =>
More boilerplate	Cleaner code
Older JS style	Modern JS style

Using Arrow Function with map()

Arrow functions are commonly used with array methods like map().

Example

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

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

console.log(squares);

Before

[1, 2, 3, 4]

After

[1, 4, 9, 16]

This looks much cleaner than using a normal function.

Important Tips for Beginners

• Use arrow functions for small logic

• Prefer arrow functions with map (),filter(),reduce()

• Focus on readability

• Practice by converting normal functions to arrow functions