What is an arrow function in JavaScript?

An arrow function is a compact syntax for writing functions using the => operator. Unlike standard function expressions, arrow functions inherit this lexically from their enclosing scope rather than binding their own this.

Arrow functions were introduced in ES6 and represent the standard syntax for callbacks and test functions across modern JavaScript and Playwright. In Playwright test definitions, instead of writing function ({ page }) { ... }, you write async ({ page }) => { ... }.

Beyond concise syntax, the fundamental semantic difference is the lexical scoping of this. Standard function expressions bind their own dynamic this depending on how and where they are called, which frequently produces undefined inside callbacks. Arrow functions do not bind their own this; they capture this directly from the surrounding lexical scope.

In Playwright, test definitions, hooks like beforeEach(), and array transformations like .map() and .filter() standardise on arrow functions for predictability and clean syntax.

arrow-this.mjs(node)

const suite = {
  name: 'Catalog Suite',
  runRegular: function () {
    setTimeout(function () {
      console.log('regular function this.name:', this?.name);
    }, 0);
  },
  runArrow: function () {
    setTimeout(() => {
      console.log('arrow function this.name:', this?.name);
    }, 0);
  }
};

suite.runRegular();
suite.runArrow();

Output

regular function this.name: undefined
arrow function this.name: Catalog Suite

Test yourself

What does an arrow function do with this?

AI can write the test now. The job is knowing whether it checks anything. That's what the course teaches, one chapter at a time.

163 lessons · 226 drills · start free

What is an arrow function in JavaScript?

Related questions