When we write JavaScript, we often create functions.

A function is like a small machine.
You give it something, and it gives you a result.

Example:

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

But JavaScript introduced a shorter and cleaner way to write functions.

These are called Arrow Functions.

Arrow functions make code shorter, cleaner, and easier to read.

Let’s learn them step by step in the simplest way possible.

---

1. What Are Arrow Functions?

Arrow functions are a modern way to write functions in JavaScript.

They use the arrow symbol (=>).

Think of it like:

input  =>  result

Example:

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

This does the same thing as a normal function.

---

2. Basic Arrow Function Syntax

Normal Function

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

Arrow Function

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

Notice the differences:

Normal function

function greet(name) {

Arrow function

const greet = (name) =>

Arrow functions remove a lot of extra typing (boilerplate code).

---

3. Arrow Function with One Parameter

If there is only one parameter, we can even remove the parentheses.

Example

Normal function

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

Arrow function

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

Both produce the same result.

Example:

square(4);

Output:

16

---

4. Arrow Functions with Multiple Parameters

If we have more than one parameter, we must keep parentheses.

Example:

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

Usage:

add(3, 5);

Output:

8

---

5. Implicit Return vs Explicit Return

This is where arrow functions become very powerful.

Explicit Return

Explicit return means we write the return keyword.

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

---

Implicit Return

If the function has only one line, we can remove:

• return

• { }

Example:

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

This automatically returns the result.

Example:

multiply(4, 3);

Output:

12

---

6. Difference Between Normal Function and Arrow Function

Normal Function	Arrow Function
Uses function keyword	Uses =>
More typing	Shorter syntax
Traditional JavaScript style	Modern JavaScript style
Good for many cases	Great for short functions

Example comparison:

Normal Function

function double(num) {
  return num * 2;
}

Arrow Function

const double = num => num * 2;

Arrow functions make the code cleaner and easier to read.

---

7. Using Arrow Functions with map()

Arrow functions are very common with arrays.

Example:

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

We want to double every number.

Using map()

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

console.log(doubled);

Output:

[2, 4, 6, 8]

Here the arrow function:

num => num * 2

means:

take num → return num * 2

---

Simple Visual

Normal function

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

↓

Arrow function

(a,b) => a+b

Less typing.
Same result.

---

Practice Assignment

Try these in your browser console.

1. Normal function to calculate square

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

---

2. Rewrite using arrow function

const square = num => num * num;

Example:

square(5);

Output:

25

---

3. Arrow function to check even or odd

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

Example:

isEven(6);

Output:

true

Example:

isEven(7);

Output:

false

---

4. Use arrow function inside map()

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

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

console.log(squares);

Output:

[1,4,9,16,25]