Article Categories

Selected Reading

Lambdas with Arrow Functions in JavaScriptLambdas with Arrow Functions in JavaScript

Javascript Web Development Object Oriented Programming

Lambda functions in JavaScript are small anonymous functions that can take parameters and return values. Arrow functions provide a concise way to write lambda functions and are commonly used for functional programming operations like map(), filter(), and reduce().

Syntax

// Single parameter (parentheses optional)
const lambda1 = x => x * 2;

// Multiple parameters
const lambda2 = (x, y) => x + y;

// No parameters
const lambda3 = () => "Hello World";

// Multiple statements (requires curly braces and return)
const lambda4 = x => {
    const result = x * x;
    return result;
};

Basic Arrow Function Examples

// Simple lambda functions
const square = x => x * x;
const add = (a, b) => a + b;
const greet = () => "Hello!";

console.log(square(5));        // 25
console.log(add(3, 4));        // 7
console.log(greet());          // Hello!

25
7
Hello!

Using Arrow Functions with Array Methods

const numbers = [1, 2, 3, 4, 5];

// Using map() with arrow function
const squared = numbers.map(x => x * x);
console.log("Squared:", squared);

// Using filter() with arrow function
const evenNumbers = numbers.filter(x => x % 2 === 0);
console.log("Even numbers:", evenNumbers);

// Using reduce() with arrow function
const sum = numbers.reduce((acc, x) => acc + x, 0);
console.log("Sum:", sum);

Squared: [ 1, 4, 9, 16, 25 ]
Even numbers: [ 2, 4 ]
Sum: 15

Passing Arrow Functions as Parameters

// Higher-order function that accepts a lambda
function processArray(arr, operation) {
    return arr.map(operation);
}

// Define lambda functions
const double = x => x * 2;
const cube = x => x * x * x;

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

console.log("Doubled:", processArray(numbers, double));
console.log("Cubed:", processArray(numbers, cube));

// Using inline arrow functions
console.log("Plus 10:", processArray(numbers, x => x + 10));

Doubled: [ 2, 4, 6, 8 ]
Cubed: [ 1, 8, 27, 64 ]
Plus 10: [ 11, 12, 13, 14 ]

Interactive Browser Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lambda Functions Demo</title>
</head>
<body>
    <h2>Array: [1, 2, 3, 4, 5]</h2>
    <button onclick="squareArray()">Square Array</button>
    <button onclick="doubleArray()">Double Array</button>
    <div id="result"></div>

    <script>
        const originalArray = [1, 2, 3, 4, 5];
        
        // Lambda functions using arrow syntax
        const square = x => x * x;
        const double = x => x * 2;
        
        function squareArray() {
            const result = originalArray.map(square);
            document.getElementById('result').innerHTML = 
                `<p>Squared: [${result.join(', ')}]</p>`;
        }
        
        function doubleArray() {
            const result = originalArray.map(double);
            document.getElementById('result').innerHTML = 
                `<p>Doubled: [${result.join(', ')}]</p>`;
        }
    </script>
</body>
</html>

Comparison: Regular Functions vs Arrow Functions

Feature	Regular Function	Arrow Function
Syntax	`function(x) { return x * 2; }`	`x => x * 2`
`this` binding	Dynamic	Lexical (inherited)
Hoisting	Yes	No
Best for	Methods, constructors	Callbacks, lambdas

Common Use Cases

const users = [
    { name: 'Alice', age: 25 },
    { name: 'Bob', age: 30 },
    { name: 'Charlie', age: 35 }
];

// Extract names
const names = users.map(user => user.name);
console.log("Names:", names);

// Filter adults
const adults = users.filter(user => user.age >= 18);
console.log("Adults:", adults.length);

// Sort by age
const sortedByAge = users.sort((a, b) => a.age - b.age);
console.log("Youngest first:", sortedByAge[0].name);

Names: [ 'Alice', 'Bob', 'Charlie' ]
Adults: 3
Youngest first: Alice

Conclusion

Arrow functions provide a concise syntax for writing lambda functions in JavaScript. They're particularly useful for functional programming operations and as callback functions. While they can't replace regular functions entirely due to different this binding behavior, they excel in scenarios requiring short, anonymous functions.

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