+91 7387620624

Practical Examples

Introduction

Arrow functions are one of the most commonly used features in modern JavaScript. Their concise syntax makes code easier to read and maintain, especially when working with callbacks, array methods, asynchronous operations, and reusable utility functions.

In real-world applications, arrow functions are used in web development, automation testing, API testing, data processing, event handling, and Node.js applications.

This tutorial demonstrates practical examples that show how arrow functions are used in everyday JavaScript programming.

For automation engineers, arrow functions are extensively used in Playwright, Cypress, Selenium (JavaScript), API testing, promises, callbacks, and data-driven testing.

Example 1: Display a Welcome Message

const welcome = () => {

    console.log("Welcome to JavaScript!");

};

welcome();

Output

Welcome to JavaScript!

Example 2: Add Two Numbers

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

console.log(add(15, 25));

Output

40

Example 3: Calculate the Square of a Number

const square = number => number * number;

console.log(square(8));

Output

64

Example 4: Check Whether a Number is Even

const isEven = number => number % 2 === 0;

console.log(isEven(12));

console.log(isEven(7));

Output

true
false

Example 5: Convert a String to Uppercase

const convertToUpper = text => text.toUpperCase();

console.log(convertToUpper("javascript"));

Output

JAVASCRIPT

Example 6: Find the Largest Number

const largest = (a, b) => a > b ? a : b;

console.log(largest(45, 28));

Output

45

Example 7: Calculate a Discount

const calculateDiscount = amount => amount * 0.10;

console.log(calculateDiscount(5000));

Output

500

Example 8: Use Arrow Functions with map()

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

const doubled = numbers.map(number => number * 2);

console.log(doubled);

Output

[2, 4, 6, 8, 10]

Example 9: Use Arrow Functions with filter()

const numbers = [12, 25, 8, 31, 18];

const adults = numbers.filter(age => age >= 18);

console.log(adults);

Output

[25, 31, 18]

Example 10: Use Arrow Functions with find()

const users = [

    "John",

    "Alice",

    "David"

];

const result = users.find(user => user === "Alice");

console.log(result);

Output

Alice

Real-World Example 1: Calculate Shopping Cart Total

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

console.log(calculateTotal(799, 3));

Output

2397

Real-World Example 2: Calculate Student Percentage

const percentage = (marks, total) => (marks / total) * 100;

console.log(percentage(450, 500));

Output

90

Automation Testing Examples

Arrow functions are widely used in automation frameworks because they create concise and reusable code.

Playwright Example

Launch a browser.

const launchBrowser = browser => {

    console.log("Launching " + browser);

};

launchBrowser("Chromium");

Output

Launching Chromium

Selenium Example

Open an application.

const openApplication = url => {

    console.log("Opening " + url);

};

openApplication("https://example.com");

Output

Opening https://example.com

Cypress Example

Execute a test.

const executeTest = testName => {

    console.log("Executing " + testName);

};

executeTest("Checkout Test");

Output

Executing Checkout Test

API Testing Example

Validate a response.

const isSuccessful = statusCode => statusCode === 200;

console.log(isSuccessful(200));

Output

true

Data-Driven Testing Example

Display user information.

const displayUser = (username, role) => {

    console.log(username + " - " + role);

};

displayUser("admin", "Administrator");

Output

admin - Administrator

Why Use Arrow Functions?

Arrow functions provide several advantages:

  • Shorter and cleaner syntax.

  • Easy to read and write.

  • Perfect for callbacks and array methods.

  • Support implicit return for simple expressions.

  • Automatically inherit this from the surrounding scope.

  • Reduce boilerplate code.

Common Mistakes

Forgetting the return Keyword

const add = (a, b) => {

    a + b;

};

console.log(add(5, 10));

Output

undefined

Use an explicit return or an implicit return.

Returning an Object Incorrectly

Incorrect:

const user = () => {

    name: "John";

};

Correct:

const user = () => ({

    name: "John"

});

Using Arrow Functions as Constructors

const Person = name => {

    this.name = name;

};

const user = new Person("John");

Output

TypeError

Arrow functions cannot be used with the new keyword.

Best Practices

Use Arrow Functions for Short Functions

Arrow functions improve readability for simple operations.

Use Implicit Return When Appropriate

const cube = number => number * number * number;

Use Meaningful Parameter Names

Examples:

  • browserName

  • username

  • statusCode

  • pageTitle

  • apiResponse

Use Regular Functions When You Need Your Own this

Methods that rely on their own this value should use regular functions instead of arrow functions.

Conclusion

Arrow functions simplify JavaScript programming by providing a concise and expressive syntax for creating functions. They are ideal for calculations, callbacks, array methods, promises, asynchronous operations, and reusable utility functions.

These practical examples demonstrate how arrow functions can be applied to everyday programming tasks as well as automation testing scenarios.

For automation engineers, mastering arrow functions is essential for writing clean, maintainable, and modern Playwright, Selenium, Cypress, and API testing scripts.

Frequently Asked Questions (FAQs)

What are arrow functions mainly used for?

Arrow functions are commonly used for callbacks, array methods, utility functions, promises, event handlers, and asynchronous programming.

Can arrow functions return values?

Yes. They support both explicit and implicit return.

Can arrow functions have multiple parameters?

Yes.

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

Can arrow functions be used with array methods?

Yes. They are commonly used with map(), filter(), find(), reduce(), and forEach().

Can arrow functions be used as constructors?

No. They cannot be used with the new keyword.

Why are arrow functions useful in automation testing?

Automation engineers use arrow functions extensively for callbacks, Playwright actions, Cypress commands, asynchronous operations, array processing, API response handling, and reusable utility functions because they produce concise and readable code.

Key Takeaways

  • Arrow functions provide a concise syntax for creating functions.

  • They are ideal for calculations and reusable utility functions.

  • They support implicit and explicit return.

  • Arrow functions work well with array methods such as map(), filter(), and find().

  • They automatically inherit this from the surrounding scope.

  • They cannot be used as constructors.

  • Arrow functions improve code readability and maintainability.

  • They are heavily used in Playwright, Selenium, Cypress, API testing, and Node.js.

  • Use meaningful parameter names for better readability.

  • Mastering arrow functions is essential for modern JavaScript development and automation testing.