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

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:

```plaintext
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:

```plaintext
input  =>  result
```

Example:

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

This does the **same thing** as a normal function.

* * *

# 2\. Basic Arrow Function Syntax

### Normal Function

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

### Arrow Function

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

Notice the differences:

Normal function

```plaintext
function greet(name) {
```

Arrow function

```plaintext
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

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

Arrow function

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

Both produce the same result.

Example:

```plaintext
square(4);
```

Output:

```plaintext
16
```

* * *

# 4\. Arrow Functions with Multiple Parameters

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

Example:

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

Usage:

```plaintext
add(3, 5);
```

Output:

```plaintext
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**.

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

* * *

## Implicit Return

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

*   `return`
    
*   `{ }`
    

Example:

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

This automatically returns the result.

Example:

```plaintext
multiply(4, 3);
```

Output:

```plaintext
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

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

### Arrow Function

```plaintext
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:

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

We want to **double every number**.

### Using map()

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

console.log(doubled);
```

Output:

```plaintext
[2, 4, 6, 8]
```

Here the arrow function:

```plaintext
num => num * 2
```

means:

```plaintext
take num → return num * 2
```

* * *

# Simple Visual

Normal function

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

↓

Arrow function

```plaintext
(a,b) => a+b
```

Less typing.  
Same result.

* * *

# Practice Assignment

Try these in your browser console.

## 1\. Normal function to calculate square

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

* * *

## 2\. Rewrite using arrow function

```plaintext
const square = num => num * num;
```

Example:

```plaintext
square(5);
```

Output:

```plaintext
25
```

* * *

## 3\. Arrow function to check even or odd

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

Example:

```plaintext
isEven(6);
```

Output:

```plaintext
true
```

Example:

```plaintext
isEven(7);
```

Output:

```plaintext
false
```

* * *

## 4\. Use arrow function inside map()

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

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

console.log(squares);
```

Output:

```plaintext
[1,4,9,16,25]
```