Arrow Functions in JavaScript :- A Simpler Way to Write Functions

Understanding Arrow Functions in JavaScript

While writing my blog about JavaScript Promises, I noticed that I was using arrow functions quite frequently.

That made me think:

Why not explain what arrow functions are and why most developers prefer them?

Arrow functions are one of the most commonly used features in modern JavaScript, and understanding them will make your code cleaner and easier to read.

In this blog, we’ll explore how arrow functions work and how they differ from normal functions.

---

Topics Covered

In this guide we will learn:

• What arrow functions are
• Basic arrow function syntax
• Arrow functions with one parameter
• Arrow functions with multiple parameters
• Implicit return vs explicit return
• Differences between arrow functions and normal functions

---

What Are Arrow Functions?

Arrow functions were introduced in ES6 (ECMAScript 2015) as a shorter and more concise way to write functions.

Before arrow functions existed, developers wrote functions using the traditional function keyword.

Let’s start with a simple example using a normal function.

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

console.log("1 + 2 is", add(1, 2));

Output:

1 + 2 is 3

The code works perfectly. So why do we need arrow functions?

Arrow functions help make code shorter, cleaner, and easier to read, especially when working with callbacks or small utility functions.

---

Arrow Function Syntax

The main idea behind arrow functions is replacing the function keyword with the arrow (=>) syntax.

Traditional anonymous function:

function () {}

Arrow function:

() => {}

Now let’s rewrite our add function using an arrow function.

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

console.log("1 + 2 is", add(1, 2));

This does exactly the same thing as the previous example but uses modern syntax.

---

Handling Parameters in Arrow Functions

Arrow functions handle parameters almost the same way as normal functions.

However, there are small differences depending on the number of parameters.

Let’s look at them one by one.

---

1. Arrow Functions with No Parameters

If a function takes no parameters, we use empty parentheses ().

Example:

const func = () => {
  return "Like this blog";
};

console.log(func());

Since the function returns a single value, we can shorten it even more.

const func = () => "Like this blog";

console.log(func());

Here, the function automatically returns the string "Like this blog".

---

2. Arrow Functions with One Parameter

If an arrow function has only one parameter, the parentheses around the parameter are optional.

Example:

const squareNum = num => num * num;

console.log("Square of 2 is", squareNum(2));

Both of these are valid:

num => num * num
(num) => num * num

But most developers prefer the shorter version.

---

3. Arrow Functions with Multiple Parameters

If a function has multiple parameters, parentheses are required.

Example:

let sum = 0;

const calculateMarks = (maths, english, science) => {
  return (sum += maths + english + science);
};

console.log("Total marks out of 300:", calculateMarks(80, 90, 95));

You can try running this code in your browser console or Node.js to better understand how it works.

---

Implicit Return vs Explicit Return

Arrow functions support two types of returns:

• Implicit return
• Explicit return

Understanding this difference helps write cleaner functions.

---

1. Implicit Return

Implicit return happens when the function contains a single expression without curly brackets {}.

The value is automatically returned.

Example:

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

No return keyword is needed.

---

2. Explicit Return

Explicit return happens when the function body uses curly brackets {}.

In this case, you must use the return keyword.

Example:

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

Quick Rule

• No curly brackets → Implicit return
• Curly brackets → Explicit return

---

Difference Between Arrow Functions and Normal Functions

Feature	Normal Function	Arrow Function
Syntax	Uses the function keyword	Uses the => arrow syntax
Parameters	Parentheses always required	Parentheses optional for one parameter
Return	Must use return keyword	Can use implicit return
this keyword	Has its own this	Inherits this from surrounding scope
Usage	Traditional JavaScript	Common in modern ES6+ JavaScript

One of the biggest differences is how arrow functions handle the this keyword, which becomes very important when working with objects, classes, and event handlers.

---

Final Thoughts

Arrow functions are widely used in modern JavaScript because they make code:

• Shorter
• Cleaner
• Easier to read

They are especially useful when working with:

• Array methods (map, filter, reduce)
• Callbacks
• Promises
• Asynchronous JavaScript

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

---