Arrow functions

The () => {} shorthand you'll see everywhere in Playwright tests.

Lesson 1.11of 24

Step 1

The idea

In Lesson 1.10 you wrote functions like this:

function greet(name) {
  console.log(`Hello ${name}`);
}

Arrow functions are a shorter way to write the same thing:

const greet = (name) => {
  console.log(`Hello ${name}`);
};

Same behaviour. Different syntax. Arrow functions are extremely common in modern JavaScript and in every Playwright codebase you'll ever read — so you need to recognise them on sight.

Step 2

See it run

Output

Hello Priya
Hello Rahul
Doubled: 10
Status: PASS

arrow-functions.js

// Regular function
function greet(name) {
  console.log(`Hello ${name}`);
}

// Arrow function — same thing
const greetArrow = (name) => {
  console.log(`Hello ${name}`);
};

greet("Priya");
greetArrow("Rahul");

// One-line arrow function — no braces needed when the body is a single expression
const double = (n) => n * 2;
console.log("Doubled:", double(5));

// One-liner returning a string
const getStatus = (passed) => passed ? "PASS" : "FAIL";
console.log("Status:", getStatus(true));

Terminal

$ node arrow-functions.js

Step 3

Now you try

Convert this regular function to an arrow function:

function formatTestName(name, number) {
  return `[${number}] ${name}`;
}

console.log(formatTestName("Login Test", 1));

Then shorten it to a one-liner arrow function. Same output, fewer lines.

💡Tip

Arrow functions are stored in const variables, not declared with function. This means they must be defined before they're called — unlike regular function declarations which are "hoisted" to the top automatically.

Step 4

Why a tester cares

Arrow functions are everywhere in modern JavaScript — especially when working with arrays. Here are three powerful array methods that all take arrow functions:

arrays.js

const scores = [85, 42, 91, 60, 73, 38, 95];

// filter — keep only items that match the condition
const passing = scores.filter(score => score >= 60);

// map — transform each item into something new
const grades = scores.map(score => score >= 60 ? "PASS" : "FAIL");

// find — get the first item that matches
const firstFail = scores.find(score => score < 60);

console.log("All scores:", scores);
console.log("Passing:", passing);
console.log("Grades:", grades);
console.log("First fail:", firstFail);

Terminal

$ node arrays.js

Output

All scores: [85, 42, 91, 60, 73, 38, 95]
Passing: [85, 91, 60, 73, 95]
Grades: ['PASS', 'FAIL', 'PASS', 'PASS', 'PASS', 'FAIL', 'PASS']
First fail: 42

filter, map, and find are three of the most used methods in JavaScript. Arrow functions make them clean and readable.

Recap

3 key points

1Arrow functions: const name = (params) => { body }; — shorter syntax, same result.
2One-liner: const fn = (x) => x * 2; — omit braces and return when the body is one expression.
3Playwright test blocks and helpers almost always use arrow functions — recognise the shape.

Up next

Lesson 1.12 — Parameters and return

Function declarations vs expressions

Parameters, defaults, and return