Introduction

Arrow functions become even more useful when they accept parameters. Parameters allow you to pass values into a function so it can perform operations using different inputs.

Arrow functions can have:

No parameters
One parameter
Multiple parameters
Default parameters
Rest parameters

Using parameters makes arrow functions reusable, flexible, and easier to maintain.

For automation engineers, arrow functions with parameters are commonly used to pass URLs, usernames, passwords, API endpoints, test data, browser names, element locators, and configuration values into reusable utility functions.

What are Parameters?

Parameters are variables listed inside the parentheses of a function definition.

They receive values (called arguments) when the function is called.

Example:

const greet = (name) => {

    console.log("Hello " + name);

};

greet("John");

Here:

name is the parameter
"John" is the argument

Syntax

No Parameters

const functionName = () => {

    // Code

};

One Parameter

Parentheses are optional.

const functionName = parameter => {

    // Code

};

Multiple Parameters

Parentheses are required.

const functionName = (parameter1, parameter2) => {

    // Code

};

Arrow Function with No Parameters

const welcome = () => {

    console.log("Welcome!");

};

welcome();

Output

Welcome!

Arrow Function with One Parameter

const greet = name => {

    console.log("Hello " + name);

};

greet("Alice");

Output

Hello Alice

Arrow Function with Multiple Parameters

const add = (a, b) => {

    console.log(a + b);

};

add(15, 20);

Output

Arrow Function with Default Parameters

const greet = (name = "Guest") => {

    console.log("Hello " + name);

};

greet();

greet("John");

Output

Hello Guest
Hello John

The default value is used when no argument is passed.

Arrow Function with Rest Parameters

Rest parameters collect multiple arguments into an array.

const displayNumbers = (...numbers) => {

    console.log(numbers);

};

displayNumbers(10, 20, 30, 40);

Output

[10, 20, 30, 40]

Arrow Function with Implicit Return

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

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

Output

Real-World Example

Calculate the total price.

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

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

Output

Another example:

Display employee information.

const employee = (name, department) => {

    console.log(name + " works in " + department);

};

employee("David", "Sales");

Output

David works in Sales

Automation Testing Example

Arrow functions with parameters are widely used in test automation frameworks.

Playwright Example

Launch a browser.

const launchBrowser = browserName => {

    console.log("Launching " + browserName);

};

launchBrowser("Chromium");

Output

Launching Chromium

Selenium Example

Open a URL.

const openApplication = url => {

    console.log("Opening " + url);

};

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

Output

Opening https://example.com

Cypress Example

Run a test.

const executeTest = testName => {

    console.log("Executing " + testName);

};

executeTest("Login Test");

Output

Executing Login Test

API Testing Example

Validate a response.

const validateStatus = statusCode => statusCode === 200;

console.log(validateStatus(200));

Output

true

Data-Driven Testing Example

Display test data.

const showUser = (username, role) => {

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

};

showUser("admin", "Administrator");

Output

admin - Administrator

Types of Parameters

Type	Example
No Parameters	`() => {}`
One Parameter	`name => {}`
Multiple Parameters	`(a, b) => {}`
Default Parameters	`(name = "Guest") => {}`
Rest Parameters	`(...values) => {}`

Common Mistakes

Omitting Parentheses for Multiple Parameters

Incorrect:

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

Correct:

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

Forgetting Arguments

const greet = name => {

    console.log("Hello " + name);

};

greet();

Output

Hello undefined

Use default parameters if appropriate.

Passing Too Few Arguments

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

console.log(multiply(5));

Output

NaN

Both parameters are required unless default values are provided.

Best Practices

Use Descriptive Parameter Names

Choose names that clearly describe the data.

Examples:

username
password
browserName
statusCode
pageTitle

Use Default Parameters When Appropriate

Default values prevent undefined when arguments are omitted.

Keep the Number of Parameters Reasonable

If a function requires many parameters, consider passing an object instead.

Use Rest Parameters for Variable-Length Input

Rest parameters make functions flexible when the number of arguments is unknown.

Conclusion

Arrow functions with parameters provide a concise and flexible way to write reusable JavaScript functions. They support no parameters, one parameter, multiple parameters, default parameters, and rest parameters, making them suitable for a wide range of programming tasks.

For automation engineers, parameterized arrow functions are essential for writing reusable Playwright scripts, Selenium utilities, Cypress commands, API helpers, and data-driven tests where different input values are supplied during execution.

Frequently Asked Questions (FAQs)

What are parameters in an arrow function?

Parameters are variables that receive values passed into a function.

Are parentheses required for one parameter?

No. Parentheses are optional when there is exactly one parameter.

const greet = name => "Hello " + name;

Are parentheses required for multiple parameters?

Yes.

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

Can arrow functions have default parameters?

Yes.

const greet = (name = "Guest") => "Hello " + name;

What are rest parameters?

Rest parameters collect multiple arguments into a single array using the ... operator.

Why are arrow functions with parameters useful in automation testing?

Automation engineers use parameters to pass dynamic values such as URLs, browser names, credentials, API endpoints, test data, page titles, and element locators into reusable functions, making automation scripts flexible and easier to maintain.

Key Takeaways

Arrow functions can accept zero, one, or multiple parameters.
Parentheses are optional for a single parameter.
Parentheses are required for multiple parameters.
Parameters receive values passed as arguments.
Default parameters provide fallback values.
Rest parameters collect multiple arguments into an array.
Arrow functions support implicit and explicit return.
Use meaningful parameter names for readability.
Keep functions reusable by passing data through parameters.
Understanding arrow function parameters is essential for modern JavaScript development and automation testing.