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

Modern JavaScript introduced **arrow functions** to make writing functions shorter and cleaner.

If you're learning JS, arrow functions will quickly become your favorite feature.

Let’s understand them step by step.

![](https://cdn.hashnode.com/uploads/covers/656ed88ac1f28c5dd219df1a/a04622bf-893d-432f-add6-b1692ba317f5.png align="center")

## ❋ What Are Arrow Functions?

Arrow functions are a **shorter way to write functions** in JavaScript.

They were introduced in ES6 (2015) to reduce boilerplate code and improve readability.

Instead of writing:

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

We can write:

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

## ❋ Basic Arrow Function Syntax

Here is the general syntax:

```javascript
const functionName = (parameters) => {
  // code
};
```

*   `const` → storing function in a variable
    
*   `(parameters)` → input values
    
*   `=>` → arrow symbol
    
*   `{}` → function body
    

* * *

## ❋ Arrow Function with One Parameter

If there is **only one parameter**, you can remove parentheses.

Normal function:

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

Arrow function:

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

## ❋ Arrow Function with Multiple Parameters

If there are multiple parameters, parentheses are required.

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

Example:

```javascript
console.log(add(5, 3)); // 8
```

* * *

## ❋ Implicit Return vs Explicit Return

This is the most powerful feature.

### 🔹 Explicit Return (using return keyword)

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

### 🔹 Implicit Return (no return keyword)

If your function has **only one expression**, you can remove `{}` and `return`.

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

JavaScript automatically returns the value.

That’s called **implicit return**.

* * *

## ❋ Basic Difference: Normal Function vs Arrow Function

| Feature | Normal Function | Arrow Function |
| --- | --- | --- |
| Syntax | Longer | Shorter |
| `this` behavior | Has its own `this` | Uses parent `this` |
| Hoisting | Yes | No |
| Beginner friendly | Yes | Yes |

## ❋ Why Arrow Functions Matter

*   Less boilerplate
    
*   Cleaner callbacks
    
*   Perfect for array methods like:
    
    *   `map()`
        
    *   `filter()`
        
    *   `reduce()`
        
*   Modern JavaScript standard
    

* * *

### **Want More…?**

I write articles on [**blog.prakashtsx.com**](http://blog.prakashtsx.com) and also post development-related content on the following platforms:

*   [**Twitter/X**](https://x.com/prakashtsx)
    
*   [**LinkedIn**](https://www.linkedin.com/in/prakashtsx)