Functions are one of the most important concepts in JavaScript.

Traditionally, we create functions using the function keyword. But modern JavaScript introduced arrow functions, which allow us to write functions in a shorter and cleaner way.

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

• Difference between arrow functions and normal functions

---

What Are Arrow Functions?

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

They were introduced in ES6 to make code more concise and readable.

Instead of using the function keyword, arrow functions use the => arrow syntax.

---

Basic Arrow Function Syntax

Normal Function

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

Arrow Function

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

Both functions do the same thing, but the arrow function is shorter and more modern.

---

Arrow Functions with One Parameter

If a function has only one parameter, the parentheses are optional.

Normal Function

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

Arrow Function

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

Example:

console.log(square(5));

Output:

25

---

Arrow Functions with Multiple Parameters

If there are multiple parameters, parentheses are required.

Example

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

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

Output:

8

---

Implicit Return vs Explicit Return

Arrow functions allow a shortcut return called implicit return.

---

Explicit Return

You use return and curly braces {}.

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

---

Implicit Return

If the function has one expression, you can remove {} and return.

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

Example:

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

Output:

12

This makes the code shorter and cleaner.

---

Difference Between Arrow Function and Normal Function

Feature	Normal Function	Arrow Function
Syntax	Uses function keyword	Uses =>
Length	Longer	Shorter
Return	Requires return	Can use implicit return
Modern JS	Older style	Modern ES6 style

Example comparison:

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

// Arrow function
const greetArrow = name => "Hello " + name;

---

Assignment Practice

1️⃣ Normal Function to Calculate Square

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

console.log(square(4));

---

2️⃣ Arrow Function Version

const square = num => num * num;

console.log(square(4));

---

3️⃣ Arrow Function to Check Even or Odd

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

console.log(isEven(10));

Output:

true

---

4️⃣ Arrow Function with map()

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

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

console.log(doubled);

Output:

[2, 4, 6, 8]

This is one of the most common real-world uses of arrow functions.

---

Why Developers Prefer Arrow Functions

Arrow functions help developers:

• Write shorter code

• Improve readability

• Follow modern JavaScript practices

• Work better with array methods like map(), filter(), and reduce()

---

---