# Arrow Functions in JavaScript

Hey guys , in this article we learn everything about the arrow function in js, how it is different from the normal function expression. so, let start.

### What Are Arrow Functions?

Arrow functions are a **shorter and cleaner way to write functions in JavaScript**. They were introduced in **ES6 (ECMAScript 2015)** to make function syntax **simpler and more readable**. Instead of using the `function` keyword, arrow functions use the **arrow (**`=>`**) syntax**.

**Example -**

```javascript
// normal function expression. 
function add(a, b) {
  return a + b;
}

// arrow function expression
const add = (a, b) => {
  return a + b;
};
```

> Both functions perform the **same task**, but the arrow function version is **shorter and modern**.

### Arrow Function syntax

```javascript
() => expression

param => expression

(param) => expression

(param1, paramN) => expression

() => {
  statements
}

param => {
  statements
}

(param1, paramN) => {
  statements
}
```

### Converting function Expression to Arrow function

```javascript
// Traditional anonymous function
(function (a) {
  return a + 100;
});

// 1. Remove the word "function" and place arrow between the argument and opening body brace
(a) => {
  return a + 100;
};

// 2. Remove the body braces and word "return" — the return is implied.
(a) => a + 100;

// 3. Remove the parameter parentheses
a => a + 100;
```

```javascript
// Traditional anonymous function
(function (a, b) {
  return a + b + 100;
});

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

const a = 4;
const b = 2;

// Traditional anonymous function (no parameters)
(function () {
  return a + b + 100;
});

// Arrow function (no parameters)
() => a + b + 100;
```

### Implicit Return vs Explicit Return

When we use `{}`, we must use the `return` keyword.

```javascript
// explicit return
const add = (a, b) => {
  return a + b;
};

// this same arrow function can be converted to something less.
// implicit return
const add = (a,b) => a + b;
```

### Conclusion