Arrow Functions in JavaScript: A Simpler Way to Write Functions

Introduction

Imagine you are writing a recipe for making chai in your kitchen. Instead of writing "Boil water, add tea leaves, add milk, add sugar, and stir", you could write "Boil, add ingredients, and stir". Arrow functions work the same way. They are a shorter, cleaner way to write functions in JavaScript.

Arrow functions were introduced in modern JavaScript (ES6) to make code more concise and readable. In this blog, we will learn what they are, how to write them, and how they differ from normal functions.

---

1. What Are Arrow Functions?

An arrow function is a shorter way to write a function. Instead of using the function keyword, you use an arrow (=>). The arrow is what gives this syntax its name.

Why Arrow Functions?

Arrow functions help you write less code and make your code more readable. They are especially useful when you have simple, one-line functions.

Simple Comparison

Normal function (longer):

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

Arrow function (shorter):

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

Arrow function (even shorter with implicit return):

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

All three do the same thing, but the arrow function is more concise!

Real-Life Example

Imagine you want to create a greeting function:

Normal function:

const greet = function(name) {
  return "Hello, " + name + "!";
};

console.log(greet("Ashish")); // Output: Hello, Ashish!

Arrow function:

const greet = (name) => "Hello, " + name + "!";

console.log(greet("Ashish")); // Output: Hello, Ashish!

The arrow function does the same thing but is cleaner and easier to read.

---

2. Basic Arrow Function Syntax

Let's learn the syntax of arrow functions step by step.

General Syntax

const functionName = (parameters) => {
  // Function body
  return result;
};

Breaking Down the Syntax

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

• const - declares a variable

• add - the function name

• (a, b) - parameters inside parentheses

• => - the arrow (read as "goes to")

• { } - function body

• return a + b - the result

Example 1: Simple Subtraction

JavaScript

const subtract = (a, b) => {
  return a - b;
};

console.log(subtract(10, 3)); // Output: 7

Example 2: Checking if a Number Is Positive

JavaScript

const isPositive = (number) => {
  return number > 0;
};

console.log(isPositive(5));  // Output: true
console.log(isPositive(-3)); // Output: false

---

3. Arrow Functions with One Parameter

When an arrow function has only one parameter, you can omit the parentheses around the parameter.

Syntax with One Parameter

const functionName = parameter => {
  // Function body
  return result;
};

Notice that the parentheses around parameter are optional.

Example 1: Squaring a Number

// With parentheses (also correct)
const square = (number) => {
  return number * number;
};

console.log(square(5)); // Output: 25

// Without parentheses (also correct)
const square = number => {
  return number * number;
};

console.log(square(5)); // Output: 25

Both work! The second one is slightly shorter.

Example 2: Greeting with One Parameter

const greet = name => {
  return "Welcome, " + name + "!";
};

console.log(greet("Ashish")); // Output: Welcome, Ashish!

Important Note

When you have zero parameters or more than one parameter, you MUST use parentheses:

// Zero parameters - parentheses required
const getDate = () => {
  return new Date();
};

// One parameter - parentheses optional
const square = number => {
  return number * number;
};

// Two or more parameters - parentheses required
const add = (a, b) => {
  return a + b;
};

---

4. Arrow Functions with Multiple Parameters

When you have multiple parameters, list them inside parentheses separated by commas.

Syntax with Multiple Parameters

const functionName = (param1, param2, param3) => {
  // Function body
  return result;
};

Example 1: Adding Three Numbers

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

console.log(addThree(10, 20, 30)); // Output: 60

Example 2: Calculate Student Grade

const getGrade = (marks, totalMarks) => {
  let percentage = (marks / totalMarks) * 100;
  
  if (percentage >= 90) return "A";
  if (percentage >= 80) return "B";
  if (percentage >= 70) return "C";
  return "F";
};

console.log(getGrade(450, 500)); // Output: A (90%)
console.log(getGrade(350, 500)); // Output: C (70%)

---

5. Implicit Return vs Explicit Return

This is a key feature of arrow functions. You can return a value without using the return keyword.

Explicit Return

Explicit return means you use the return keyword. This requires curly braces {}.

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

console.log(add(5, 10)); // Output: 15

The curly braces and return keyword make it explicit that you are returning a value.

Implicit Return

Implicit return means the value is automatically returned without using the return keyword. This only works when you have ONE line of code. You must remove the curly braces.

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

console.log(add(5, 10)); // Output: 15

Same result, but shorter! The value a + b is automatically returned.

Key Rule

• Implicit return: No curly braces, no return keyword, single line only

• Explicit return: With curly braces, use return keyword, can have multiple lines

When to Use Implicit Return

Use implicit return when:

1. Your function logic is simple

2. It fits on one line

3. You want cleaner, more readable code

// Good use of implicit return (simple)
const double = (n) => n * 2;
const isAdult = (age) => age >= 18;
const getFullName = (first, last) => first + " " + last;

When to Use Explicit Return

Use explicit return when:

1. Your function has multiple lines

2. You have complex logic

3. You want clarity about what is being returned

// Good use of explicit return (complex logic)
const getGrade = (marks) => {
  if (marks >= 90) return "A";
  if (marks >= 80) return "B";
  if (marks >= 70) return "C";
  return "F";
};

---

6. Basic Difference Between Arrow Function and Normal Function

Now let's compare arrow functions with normal functions (function declarations and expressions).

Syntax Difference

Normal Function (Declaration):

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

Normal Function (Expression):

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

Arrow Function:

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

The arrow function is the shortest!

Hoisting Difference

Normal function declarations are hoisted (can be called before defining):

console.log(add(5, 10)); // Works! Output: 15

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

Arrow functions are NOT hoisted (must be defined before calling):

console.log(add(5, 10)); // Error!

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

You must define the arrow function before calling it.

Readability Difference

Normal function:

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

numbers.forEach(function(num) {
  console.log(num);
});

Arrow function (cleaner):

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

numbers.forEach(num => console.log(num));

The arrow function version is much more concise!

Comparison Table

Feature	Normal Function	Arrow Function
Syntax	function name() {}	const name = () => {}
Hoisting	Hoisted, can call before defining	Not hoisted, must define first
Return Statement	Required return	Optional (implicit return)
Parameters (one)	function(param) {}	param => {} (parentheses optional)
Parameters (none)	function() {}	() => {} (must have parentheses)
Conciseness	More verbose	More concise
Modern Usage	Less common	Very common
Best For	Simple utility functions	Modern code, callbacks, short functions

---

Practical Examples: Converting Normal Functions to Arrow Functions

Example 1: Simple Addition

Normal Function (Expression):

JavaScript

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

console.log(add(10, 20)); // Output: 30

Arrow Function (Step by Step):

// Step 1: Remove "function" keyword and add arrow
const add = (a, b) => {
  return a + b;
};

// Step 2: Use implicit return (remove curly braces and return keyword)
const add = (a, b) => a + b;

console.log(add(10, 20)); // Output: 30

Example 2: Check if Number Is Even

Normal Function:

const isEven = function(number) {
  return number % 2 === 0;
};

console.log(isEven(10)); // Output: true
console.log(isEven(7));  // Output: false

Arrow Function:

const isEven = (number) => number % 2 === 0;

console.log(isEven(10)); // Output: true
console.log(isEven(7));  // Output: false

Even shorter: with one parameter, you can remove parentheses:

JavaScript

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

Example 3: Square of a Number

Normal Function:

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

console.log(square(5)); // Output: 25

Arrow Function (Implicit Return):

const square = (num) => num * num;

console.log(square(5)); // Output: 25

Or without parentheses:

const square = num => num * num;

---

Arrow Functions with Arrays

Arrow functions are very useful when working with arrays. We will dive deeper into this in the "Array Methods" blog, but here are some quick examples.

Example 1: Double Each Number in an Array

Normal Function:

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

const doubled = numbers.map(function(num) {
  return num * 2;
});

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

Arrow Function:

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

const doubled = numbers.map(num => num * 2);

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

Much shorter! Arrow functions shine when used with array methods.

Example 2: Filter Even Numbers

Normal Function:

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

const evenNumbers = numbers.filter(function(num) {
  return num % 2 === 0;
});

console.log(evenNumbers); // Output: [2, 4, 6]

Arrow Function:

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

const evenNumbers = numbers.filter(num => num % 2 === 0);

console.log(evenNumbers); // Output: [2, 4, 6]

---

Visual Syntax Breakdown

Arrow Function Anatomy

const square = (num) => num * num;
      |        |       |  |
      |        |       |  +-- Implicit return (single line)
      |        |       +------ Arrow (goes to)
      |        +-------------- Parameters in parentheses
      +----------------------- Variable name (function name)

---

Summary

1. Arrow functions are a shorter, cleaner way to write functions

2. Basic syntax: const name = (params) => result;

3. One parameter: You can omit parentheses: param => result

4. Multiple parameters: Use parentheses: (p1, p2) => result

5. Implicit return: Single line, no curly braces or return keyword

6. Explicit return: Multiple lines, use curly braces and return keyword

7. Arrow functions are NOT hoisted - define before using

8. Modern JavaScript strongly prefers arrow functions for their conciseness

9. Arrow functions shine when used with array methods like map() and filter()