Arrow Functions in JavaScript: A Simpler Way to Write Functions

If you’ve been learning JavaScript, you already know that functions are used to organize and reuse code.

But sometimes normal functions can feel a bit long or repetitive.
To make writing functions easier and cleaner, JavaScript introduced arrow functions.

Arrow functions allow us to write functions in a shorter and more modern way.

In this article, we’ll understand arrow functions with simple examples.

What Are Arrow Functions?

An arrow function is simply a shorter way to write a function in JavaScript.

Instead of writing the full function keyword, we use the arrow symbol =>.

Example of a normal function:

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

The same function using an arrow function:

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

Both functions do the same job, but the arrow function is shorter and cleaner.

Basic Arrow Function Syntax

The general syntax looks like this:

const functionName = (parameters) => {
  // code
}

Example:

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

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

Output:

8

Arrow Function with One Parameter

If a function has only one parameter, we can skip the parentheses.

Example:

Normal function:

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

Arrow function:

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

Usage:

console.log(square(4));

Output:

16

Arrow Function with Multiple Parameters

If a function has two or more parameters, parentheses are required.

Example:

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

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

Output:

15

Explicit Return vs Implicit Return

Arrow functions allow us to return values in two ways.

Explicit Return

This is the normal way where we use return.

Example:

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

Here we explicitly write the return statement.

Implicit Return

If the function has only one line, we can skip return and curly braces.

Example:

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

Usage:

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

Output:

10

This is called implicit return because JavaScript automatically returns the value.

Basic Difference Between Arrow Function and Normal Function

Feature	Normal Function	Arrow Function
Syntax	Uses function keyword	Uses => arrow
Code length	Longer	Shorter
Modern usage	Older style	Modern JavaScript style

Example comparison:

Normal function:

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

Arrow function:

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

Arrow functions are a modern feature of JavaScript that help developers write cleaner and shorter code.

They are especially useful when working with array methods like map(), filter(), and reduce().

Once you get comfortable with arrow functions, you’ll notice they appear everywhere in modern JavaScript code.