Arrow Functions in JavaScript

JavaScript is evolving, and one of the most useful modern features is arrow functions.

If you’ve ever felt that writing function repeatedly is verbose, arrow functions provide a cleaner and more concise alternative.

What Are Arrow Functions?

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

• Introduced in ES6 (2015)

• Reduce boilerplate code

• Improve readability

Example:

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

// Arrow function
const add = (a, b) => a + b;

Notice:

• No function keyword

• Shorter syntax

• Cleaner code

Basic Arrow Function Syntax

There are different ways to write arrow functions depending on parameters:

() => expression              // no parameters
x => expression               // one parameter
(a, b) => expression          // multiple parameters
(a, b) => { return value }    // block body

Examples:

() => 10

x => x * 2

(a, b) => a + b

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

---

Arrow Function with One Parameter

When there is only one parameter, you can skip parentheses.

const square = x => x * x;

Equivalent normal function:

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

---

Arrow Function with Multiple Parameters :

When there are multiple parameters, parentheses are required.

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

Example with block body:

const max = (a, b, c) => {
  return Math.max(a, b, c);
};

---

Implicit Return vs Explicit Return

Implicit Return (No {})

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

• No return keyword needed

• Automatically returns value

---

Explicit Return (With {})

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

• Must use return

• Used when writing multiple lines

---

Important Gotcha

const obj = () => { name: "Ravina" };

This returns undefined.

Correct way:

const obj = () => ({ name: "Ravina" });

---

Arrow Function vs Normal Function

Feature	Normal Function	Arrow Function
Syntax	Longer	Shorter
this	Own this	Inherits from parent
Constructor	Yes	No
arguments	Available	Not available
Use case	Methods, classes	Callbacks, simple logic

Use arrow functions for:

• Short logic

• Callbacks (map, filter)

• Cleaner modern code

---

Examples

1. Square of a Number

// Normal
function square(x) {
  return x * x;
}

// Arrow
const squareArrow = x => x * x;

---

2. Even or Odd Checker

const evenOrOdd = n => (n % 2 === 0 ? "Even" : "Odd");

console.log(evenOrOdd(7)); // Odd

---

3. Using Arrow Function in map()

the map() function is used to transform each element of an array and return a new array

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

const doubled = nums.map(n => n * 2);

console.log(doubled); // [2, 4, 6, 8]

---

Final Thoughts

Arrow functions are not just a shortcut — they are a modern JavaScript standard.

Start using them in:

• Small functions

• Array methods

• Clean readable code

However, avoid using them where this behavior is important (such as object methods).