Arrow Functions in JavaScript

Arrow functions are a shorter and cleaner way to write functions in JavaScript. They were introduced in modern JavaScript (ES6) and are widely used in real-world projects. For college students and freshers, understanding arrow functions is important because most modern codebases and interview questions now use them.

Arrow functions make your code simple, readable, and professional.

What Is an Arrow Function?

An arrow function is a compact way to write a function using the => (arrow) symbol.

Regular function:

function greet() {
    console.log("Hello");
}

Arrow function:

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

Both do the same thing, but the arrow function is shorter.

Basic Arrow Function Syntax

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

Arrow functions must be stored in a variable (usually const).

Example 1: Simple Arrow Function

const sayHi = () => {
    console.log("Hi there!");
};

sayHi();

Output:

Hi there!

Arrow Functions With Parameters

Arrow functions accept parameters just like normal functions.

Example:

const greetUser = (name) => {
    console.log("Hello " + name);
};

greetUser("Aman");

Output:

Hello Aman

Arrow Function With Multiple Parameters

const add = (a, b) => {
    console.log(a + b);
};

add(5, 10);

Output:

15

Arrow Function With Return Value

const multiply = (x, y) => {
    return x * y;
};

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

Output:

12

Shortcut: Implicit Return (No need to write return)

If a function has only one statement, you can remove {} and return.

const square = (n) => n * n;

console.log(square(5));

Output:

25

JavaScript automatically returns the value.

Shortcut: Single Parameter (No need for parentheses)

const double = n => n * 2;

console.log(double(6));

Output:

12

If there's only one parameter, parentheses are optional.

Arrow Function Without Parameters

If no parameters, keep empty parentheses:

const showMessage = () => console.log("Welcome!");

showMessage();

Output:

Welcome!

Real-Life Examples

Example 1: Check if number is even

const isEven = (n) => n % 2 === 0;

console.log(isEven(10));
console.log(isEven(7));

Output:

true
false

Example 2: Calculate total price

const totalPrice = (price, quantity) => price * quantity;

console.log(totalPrice(50, 3));

Output:

150

Example 3: Arrow function for greeting

const welcome = (name = "Guest") => "Welcome " + name;

console.log(welcome("Karan"));
console.log(welcome());

Output:

Welcome Karan
Welcome Guest

Important Difference: this Keyword

Arrow functions do not have their own this.
They use the this value from the surrounding scope.

This topic will be covered later in detail, but it’s important to know.

Common Mistakes Beginners Make

1. Forgetting to use const or let when defining arrow functions

2. Confusing => with >=

3. Adding {} but forgetting return

4. Using arrow functions when a normal function is better (like in objects)

Example Program With Output

const add = (a, b) => a + b;
const greet = (name) => "Hello " + name;
const square = n => n * n;

console.log(add(10, 20));
console.log(greet("Riya"));
console.log(square(4));

Output:

30
Hello Riya
16

Practice Tasks (Do It Yourself)

1. Create an arrow function to find the sum of three numbers.

2. Create an arrow function to convert Celsius to Fahrenheit.

3. Create an arrow function to check if a student passed (marks = 35).

4. Create an arrow function that returns the largest of two numbers.

5. Create an arrow function that returns today’s date.