Arrow Functions in JavaScript: A Simpler Way to Write Functions

When writing JavaScript, functions are used everywhere. They help us group logic into reusable blocks of code. However, traditional function syntax can sometimes feel a bit verbose, especially for small operations.

Arrow functions were introduced in modern JavaScript to provide a shorter and cleaner way to write functions.

They make code easier to read and are commonly used in modern JavaScript applications.

---

What Are Arrow Functions?

Arrow functions are a more compact way of writing functions in JavaScript. They use the => symbol instead of the traditional function keyword.

Example of a normal function:

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

Arrow function version:

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

Both functions behave the same way, but the arrow function syntax is shorter.

---

Transforming a Normal Function into an Arrow Function

This diagram shows the idea of converting a traditional function into an arrow function.

---

Basic Arrow Function Syntax

The general syntax of an arrow function looks like this:

const functionName = (parameters) => {
  // function body
};

Example:

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

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

Output:

7

---

Arrow Function with One Parameter

If a function has only one parameter, parentheses can be omitted.

Example:

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

console.log(square(5));

Output:

25

---

Arrow Function with Multiple Parameters

If there are multiple parameters, parentheses are required.

Example:

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

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

---

Implicit Return vs Explicit Return

Arrow functions allow a shorter syntax when the function returns a single value.

Explicit Return

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

Implicit Return

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

In implicit return, the value is returned automatically without the return keyword.

---

Arrow Function Syntax Breakdown

This structure represents the basic components of an arrow function.

---

Difference Between Arrow Functions and Normal Functions

Feature	Normal Function	Arrow Function
Syntax	Uses function keyword	Uses => syntax
Code length	Longer	Shorter
Common use	General functions	Short callbacks and modern JS code

Arrow functions are especially useful in modern JavaScript when working with array methods such as map, filter, and forEach.

---

Using Arrow Functions with Arrays

Arrow functions are frequently used with array methods because they keep code concise.

Example using map():

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

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

console.log(doubled);

Output:

[2, 4, 6, 8]

---

Assignment Practice

• Write a normal function that calculates the square of a number.

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

console.log(square(5));

• Rewrite the same logic using an arrow function.

const squareArrow = num => num * num;

console.log(squareArrow(5));

• Create an arrow function that checks whether a number is even or odd.

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

console.log(checkEven(10));

• Use an arrow function inside map().

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

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

console.log(squares);

Try experimenting with arrow functions in the browser console to see how the syntax works with different examples.