Arrow Functions in JavaScript (Beginner-Friendly Guide)

Why arrow functions?

Before arrow functions, writing a function felt like writing duplicate code again and again.

Function Before Arrow Functions:

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

Arrow function syntax:

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

Benefits of using arrow functions:

1. Clear Syntax

2. Easier to read

3. Less Code than normal functions

That's why you can see arrow functions are widely used in modern Javascript.

What Are Arrow Functions?

Arrow functions were introduced in ES6 (ES2015) to make code easier and more readable. It is a shorter way of writing functions.

Basic Arrow Function Syntax

const functionName = (parameters) => {
    // write function logic here  
};

Example:

const greet = () => {
  console.log("Hello!");
};

Arrow Function with One Parameter

If there is only one parameter, you can skip the parentheses.

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

Arrow Function with Multiple Parameters

If there are multiple parameters, parentheses are required.

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

Implicit Return vs Explicit Return

Explicit Return (using return)

Explicit return in arrow functions means it uses the return keyword inside the function body to return the final result. It is used when the function's body requires multiple statements to calculate the result.

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

Implicit Return (no return keyword)

The function result can also be returned without the return keyword by removing the function curly braces. This approach will only be applicable where the function will calculate the value in a single statement.

const multiply = (a, b) => a * b;

Converting Normal Function → Arrow Function

Normal Function:

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

Arrow Function:

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

Arrow Function vs Normal Function

Feature	Normal Function	Arrow Function
Syntax	Longer	Shorter
this	Own this	Inherits this
Use Case	General-purpose	Short functions, callbacks

For beginners: Use arrow functions for short and simple tasks

Simple Examples

• Greeting

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

• Addition

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

• Square

const square = num => num * num;

Using an Arrow Function with map()

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

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

console.log(squares); // [1, 4, 9, 16]

Assignment

Try these on your own 👇

1. Write a normal function to calculate the square of a number

2. Rewrite it using an arrow function

3. Create an arrow function that checks if a number is even or odd

4. Use an arrow function inside map() on an array

Arrow Function Breakdown

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

• const add → function name

• (a, b) → parameters

• => → arrow syntax

• a + b → returned value

Conclusion

• Arrow functions make your code.

• Cleaner

• Shorter

• More modern

Follow the series for more blogs!