If you’ve been learning JavaScript, you’ve probably noticed that modern code often uses arrow functions (=>) instead of traditional functions.

Arrow functions were introduced in ES6 (ECMAScript 2015) and they help us write shorter, cleaner, and more readable code.

In this article, we’ll learn:

• What arrow functions are

• Basic arrow function syntax

• Arrow functions with one parameter

• Arrow functions with multiple parameters

• Implicit return vs explicit return

• Basic difference between arrow functions and normal functions

All examples will be very simple so you can easily try them in your browser console or Node.js.

---

Why Arrow Functions?

Before arrow functions, we usually wrote functions like this:

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

This works perfectly fine. But JavaScript introduced arrow functions to reduce boilerplate code.

The same function using an arrow function looks like this:

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

Shorter, cleaner, and easier to read.

---

Basic Arrow Function Syntax

General syntax:

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

Example:

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

greet();

Output:

Hello!

Here:

• greet is the function name

• () represents parameters

• => is called the arrow operator

---

Arrow Functions with One Parameter

If a function has only one parameter, you can remove the parentheses.

Normal function:

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

Arrow function version:

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

console.log(square(5));

Output:

25

Both versions work the same way.

---

Arrow Functions with Multiple Parameters

If a function has multiple parameters, parentheses are required.

Normal function:

function multiply(a, b) {
  return a * b;
}

Arrow function version:

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

console.log(multiply(4, 3));

Output:

12

---

Explicit Return vs Implicit Return

One of the most useful features of arrow functions is implicit return.

Let’s understand the difference.

---

Explicit Return

This is the standard way where we use the return keyword.

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

console.log(add(2, 3));

Output:

5

Here we explicitly write return.

---

Implicit Return

If the function contains only one expression, we can remove {} and return.

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

console.log(add(2, 3));

Output:

5

JavaScript automatically returns the result.

So instead of writing:

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

We can write:

(a, b) => a + b

This makes the code much shorter and cleaner.

---

Another Simple Example

Greeting example.

Explicit return:

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

console.log(greet("Alex"));

Implicit return:

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

console.log(greet("Alex"));

Output:

Hello Alex

---

Arrow Function vs Normal Function (Basic Difference)

For beginners, the main differences are:

1. Syntax

Normal function:

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

Arrow function:

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

Arrow functions are shorter and cleaner.

---

2. Modern JavaScript Style

Most modern JavaScript code (React, Node.js, frontend frameworks) uses arrow functions heavily.

Example with arrays:

const numbers = [1, 2, 3];

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

Arrow functions make code more readable and concise.

---

When Should You Use Arrow Functions?

Arrow functions are great for:

• Short helper functions

• Array methods (map, filter, reduce)

• Simple calculations

• Cleaner modern JavaScript code

But traditional functions are still useful in some advanced cases.

For beginners, the best approach is to get comfortable using arrow functions for small functions.

---

Arrow functions are one of the most commonly used features in modern JavaScript. They help reduce unnecessary code and make functions easier to read.

Key takeaways:

• Arrow functions use the => syntax

• Parentheses can be skipped with one parameter

• Arrow functions support implicit return

• They are widely used in modern JavaScript development