JavaScript Arrow Functions

Learn JavaScript arrow functions with detailed explanations, syntax, examples, outputs, and real-world practical usage.

JavaScript Arrow Functions

Arrow functions are a shorter and modern way of writing functions in JavaScript. They were introduced in ES6 (ECMAScript 2015).

Arrow functions make code cleaner, shorter, and easier to read. Modern JavaScript applications use arrow functions very frequently.

Why Arrow Functions are Important?

  • Reduce code length
  • Improve readability
  • Provide modern syntax
  • Useful in callbacks and events
  • Commonly used in modern frameworks

Basic Syntax of Arrow Function

let functionName = () => {

    // code block

};

Explanation of Syntax

  • => is called the arrow operator.
  • Arrow functions are stored inside variables.
  • The function executes when called.

Basic Arrow Function Example

The following example creates a simple arrow function. 

let greet = () => {

    console.log("Welcome to JavaScript");

};

greet();

Output

Welcome to JavaScript

Detailed Explanation

  • The arrow function is stored inside greet variable.
  • greet(); calls the function.
  • The message is displayed after execution.

Arrow Function with Parameters

Arrow functions can receive parameters. 

let greet = (name) => {

    console.log("Hello " + name);

};

greet("Rahul");

Output

Hello Rahul

Explanation

  • name is the parameter.
  • "Rahul" is passed as an argument.
  • The function uses the value dynamically.

Arrow Function with Multiple Parameters

let add = (a, b) => {

    console.log(a + b);

};

add(10, 20);

Output

30

Explanation

  • The function accepts two parameters.
  • The + operator performs addition.
  • The result is displayed using console.log().

Arrow Function with Single Parameter

Parentheses are optional when only one parameter exists. 

let square = num => {

    console.log(num * num);

};

square(5);

Output

25

Explanation

  • The function receives one parameter.
  • num * num calculates the square value.
  • Parentheses around num are optional.

Arrow Function with return

Arrow functions can return values. 

let multiply = (a, b) => {

    return a * b;

};

let result = multiply(5, 4);

console.log(result);

Output

20

Detailed Explanation

  • The function multiplies two numbers.
  • return sends the result back.
  • The returned value is stored inside result variable.

Short Return Syntax

Arrow functions can return values without using return keyword. 

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

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

Output

12

Explanation

  • Single expressions automatically return values.
  • This syntax makes code shorter.

Normal Function vs Arrow Function

function greet1(){

    console.log("Normal Function");

}

let greet2 = () => {

    console.log("Arrow Function");

};

greet1();

greet2();

Output

Normal Function

Arrow Function

Explanation

  • Both functions work similarly.
  • Arrow functions use shorter syntax.

Arrow Functions in Callback

Arrow functions are commonly used with array methods. 

let numbers = [1, 2, 3];

numbers.forEach(num => {

    console.log(num);

});

Output

1

2

3

Explanation

  • forEach() loops through array values.
  • The arrow function executes for every item.
  • Arrow functions are widely used in callbacks.

Arrow Functions and this Keyword

Arrow functions do not have their own this keyword. They inherit this from their surrounding scope. 

let person = {

    name: "Rahul",

    greet: () => {

        console.log("Hello");

    }

};

person.greet();

Output

Hello

Important Note

  • Arrow functions behave differently with this keyword.
  • Normal functions are usually preferred for object methods.

Complete Real Life Example

The following example shows a simple product discount calculator using JavaScript arrow functions. 

<!DOCTYPE html>

<html>

<head>

    <title>JavaScript Arrow Function Example</title>

</head>

<body>

<h2>Discount Calculator</h2>

<input type="number"
id="price"
placeholder="Enter Product Price">

<br><br>

<button onclick="calculateDiscount()">

Calculate Final Price

</button>

<h3 id="output"></h3>

<script>

let discountCalculator = (price) => {

    return price - (price * 10 / 100);

};

function calculateDiscount(){

    let price =
    document.getElementById("price").value;

    let finalPrice =
    discountCalculator(price);

    document.getElementById("output").innerHTML =

    "Final Price: ₹" + finalPrice;

}

</script>

</body>

</html>

Output

Discount Calculator

Input:
1000

Output:
Final Price: ₹900

Detailed Explanation of Example

  • The input field accepts product price.
  • The arrow function calculates 10% discount.
  • The returned value stores the final price.
  • The button executes calculateDiscount() function.
  • innerHTML displays the result dynamically.
  • Arrow functions help write cleaner reusable logic.

Common Mistakes

  • Forgetting arrow operator =>.
  • Using return incorrectly.
  • Using arrow functions incorrectly with this keyword.
  • Missing parentheses for multiple parameters.

Best Practices

  • Use arrow functions for short reusable logic.
  • Use meaningful variable names.
  • Keep arrow functions simple and readable.
  • Use normal functions for object methods when needed.
  • Prefer concise syntax for small functions.

Important Notes

  • Arrow functions provide shorter syntax.
  • Arrow functions were introduced in ES6.
  • They are widely used in callbacks.
  • Arrow functions behave differently with this keyword.
  • Modern JavaScript heavily uses arrow functions.

Summary

  • Arrow functions are shorter versions of functions.
  • => is called the arrow operator.
  • Arrow functions improve readability.
  • They support parameters and return values.
  • Short syntax allows automatic return.
  • Arrow functions are commonly used in modern JavaScript.
  • They are widely used in callbacks and frameworks.
← Previous Next →