Article Categories

Selected Reading

Explain shorthand functions in JavaScript?

Javascript Web Development Object Oriented Programming

Arrow functions, also known as shorthand functions, were introduced in ES2015 and allow us to write functions in a shorter, more concise way. They don't have their own binding to this and inherit this from the surrounding context.

Basic Syntax

Arrow functions use the => syntax instead of the function keyword:

// Regular function
function add(a, b) {
    return a + b;
}

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

Different Arrow Function Forms

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Arrow Functions</title>
</head>
<body>
    
    <script>
        let result = document.getElementById("result");
        
        // Single parameter (parentheses optional)
        const square = x => x * x;
        
        // Multiple parameters (parentheses required)
        const multiply = (a, b) => a * b;
        
        // No parameters (parentheses required)
        const greeting = () => "Hello World!";
        
        // Multiple statements (curly braces required)
        const processData = (data) => {
            let processed = data * 2;
            return processed + 1;
        };
        
        result.innerHTML = `
            <p>Square of 5: ${square(5)}</p>
            <p>Multiply 3 and 4: ${multiply(3, 4)}</p>
            <p>Greeting: ${greeting()}</p>
            <p>Process 10: ${processData(10)}</p>
        `;
    </script>
</body>
</html>

The 'this' Binding Difference

Arrow functions inherit this from their enclosing scope, while regular functions have their own this context:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>This Binding Example</title>
</head>
<body>
    
    <button id="testBtn">Test This Binding</button>
    
    <script>
        let output = document.getElementById("output");
        
        let person = {
            name: "Alice",
            age: 25,
            
            // Regular function - has its own 'this'
            regularMethod() {
                function innerRegular() {
                    return this.age; // 'this' is undefined or window
                }
                return innerRegular();
            },
            
            // Arrow function - inherits 'this' from parent
            arrowMethod() {
                const innerArrow = () => {
                    return this.age; // 'this' refers to person object
                };
                return innerArrow();
            }
        };
        
        document.getElementById("testBtn").addEventListener("click", () => {
            let regularResult = person.regularMethod();
            let arrowResult = person.arrowMethod();
            
            output.innerHTML = `
                <p>Regular function result: ${regularResult} (undefined)</p>
                <p>Arrow function result: ${arrowResult}</p>
                <p>Arrow function correctly accesses 'this.age' from person object</p>
            `;
        });
    </script>
</body>
</html>

Common Use Cases

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Arrow Functions Use Cases</title>
</head>
<body>
    
    
    <script>
        let demo = document.getElementById("demo");
        
        // Array methods with arrow functions
        const numbers = [1, 2, 3, 4, 5];
        
        const doubled = numbers.map(n => n * 2);
        const evens = numbers.filter(n => n % 2 === 0);
        const sum = numbers.reduce((acc, n) => acc + n, 0);
        
        // Event handlers
        setTimeout(() => {
            demo.innerHTML = `
                <h3>Array Operations:</h3>
                <p>Original: [${numbers.join(', ')}]</p>
                <p>Doubled: [${doubled.join(', ')}]</p>
                <p>Even numbers: [${evens.join(', ')}]</p>
                <p>Sum: ${sum}</p>
            `;
        }, 1000);
    </script>
</body>
</html>

Comparison Table

Feature	Regular Function	Arrow Function
Syntax	`function() {}`	`() => {}`
this binding	Own context	Inherited from parent
Hoisting	Yes	No
Constructor	Can be used with 'new'	Cannot be used with 'new'

Conclusion

Arrow functions provide cleaner syntax and solve the common this binding issues in JavaScript. Use them for callbacks, array methods, and when you need to preserve the parent context's this value.

AmitDiwan

Updated on: 2026-03-15T23:18:59+05:30

1K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next