Arrow Functions in (JavaScript)

A Simpler Way to Write Functions

When writing JavaScript, we often create small helper functions. Earlier we used the traditional function syntax, but modern JavaScript introduced arrow functions to make this cleaner and shorter.

In simple words, arrow functions help reduce extra code and make functions easier to read.

What Are Arrow Functions?

Arrow functions are a shorter syntax for writing functions introduced in ES6.
Instead of the function keyword, they use the => arrow.

Example of a normal function:

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

The same function written using an arrow function:

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

Both work exactly the same. The arrow version is just more concise.

Arrow Function Syntax

Basic structure:

(parameters) => {
   function body
}

Example:

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

This function simply adds two numbers.

Arrow Function with One Parameter

If there is only one parameter, parentheses are optional.

Normal function:

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

Arrow function:

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

This small change removes unnecessary syntax and makes the code lighter.

Arrow Function with Multiple Parameters

If there are two or more parameters, parentheses are required.

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

This works the same way as a normal function but uses the arrow syntax.

Explicit Return vs Implicit Return

Arrow functions allow a shorter form called implicit return.

Explicit return (using return):

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

Implicit return (shorter version):

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

When the function contains a single expression, JavaScript automatically returns the result.

Arrow Functions with map()

Arrow functions are commonly used with array methods.

Example:

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

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

Result:

[2,4,6,8]

The arrow function makes the map() callback much shorter and easier to read.

Normal Function vs Arrow Function

Main differences you should remember:

• Normal functions use the function keyword

• Arrow functions use =>

• Arrow functions are shorter and commonly used in modern JavaScript

• Best used for small functions and callbacks

Quick TIP --- Try It Yourself

Open your browser console and try these:

1️ Write a normal function to calculate the square of a number.

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

2️Rewrite the same function using an arrow function.

3️ Create an arrow function that checks if a number is even or odd.

4️ Use an arrow function inside map() to double numbers in this array:

let numbers = [2,4,6,8];

Quick Visual Idea

Normal function:

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

Arrow function:

(a,b) => a+b

Same logic, less syntax.