Functions are one of the most important concepts in JavaScript. They allow us to organize code and reuse logic.

In modern JavaScript, arrow functions provide a shorter and cleaner way to write functions. They help reduce unnecessary syntax and improve readability.

In this article, we will 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 an arrow function and a normal function

What Are Arrow Functions?

Arrow functions are a shorter syntax for writing functions in JavaScript.

They were introduced in ES6 (ECMAScript 2015) to make function expressions simpler and more readable.

Example (Normal Function)

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

Same Function Using Arrow Function

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

Arrow functions remove the function keyword and use the arrow => symbol.

Basic Arrow Function Syntax

The general syntax of an arrow function is:

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

Example:

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

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

Output:

5

Arrow Functions with One Parameter

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

Example

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

console.log(square(5));

Output:

25

Arrow Functions with Multiple Parameters

When there are multiple parameters, parentheses are required.

Example

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

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

Output:

12

Implicit Return vs Explicit Return

Arrow functions support two ways of returning values.

Explicit Return

When we use {} (curly braces), We must write the return keyword.

Example:

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

Implicit Return

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

Example:

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

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

Output:

8

This is called implicit return.

Difference Between Arrow Function and Normal Function

Normal Function	Arrow Function
Uses the function keyword	Uses => arrow syntax
More verbose	Shorter and cleaner
Common in older JavaScript	Preferred in modern JavaScript

Example Comparison

Normal function:

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

Arrow function:

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

Arrow functions help reduce boilerplate code and make code easier to read.

Assignment Examples

1. Normal Function to Calculate Square

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

console.log(square(4));

Output:

16

2. Arrow Function Version

const square = num => num * num;

console.log(square(4));

3. Arrow Function to Check Even or Odd

const checkEvenOdd = num => {
  if (num % 2 === 0) {
    return "Even";
  } else {
    return "Odd";
  }
};

console.log(checkEvenOdd(7));

4. Using Arrow Function with map()

Arrow functions are commonly used with array methods.

Example:

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

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

console.log(squares);

Output:

[1, 4, 9, 16]

Diagram Ideas

Normal Function → Arrow Function

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

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

---

Arrow Function Syntax Breakdown

const add = (a, b) => a + b
      |      |      |
   name   parameters  expression