Part 4 - Master the Basics of TypeScript for Effective Playwright Automation - Functions

Anuradha Agarwal
Feb 10
3 min read

Introduction

In the previous post, we covered loops and string methods in TypeScript, learning how to repeat actions and manipulate text efficiently. These concepts are essential for controlling program flow and handling data, but they represent only the foundational level of TypeScript programming.

In this post, we move to the next core concept: functions in TypeScript. Functions are the backbone of every real-world TypeScript application and are heavily used in modern automation frameworks. They allow you to group logic into reusable, well-structured units, making code easier to read, maintain, and scale.

This TypeScript functions tutorial starts from the basics and gradually builds up. We will cover named functions, function parameters, return values, anonymous functions, callback functions, and self-invoking functions (IIFE), with simple, beginner-friendly examples throughout.

Understanding functions is essential before learning Playwright automation, because:

Every test step is written inside a function
Reusable test logic depends on functions
Callback and asynchronous behavior is built on top of functions

1️⃣ What Is a Function?

A function is a block of code that:

Has a purpose
Can be executed whenever needed
May take input
May return output

Simple Example

function greet(): void {
  console.log("Hello!");
}

greet();

Explanation

function → keyword to define a function
greet → function name
() → no parameters
void → function does not return anything
greet() → function call

2️⃣ Named Functions (Most Common)

A named function has a name and is usually reused.

function add(a: number, b: number): number {
  return a + b;
}

const result = add(10, 5);
console.log(result); // 15

Why named functions are important

Easy to read
Easy to debug
Clear intention
Reusable across files

3️⃣ Function Parameters (Inputs)

Parameters allow data to be passed into a function.

function greetUser(name: string): void {
  console.log(`Hello ${name}`);
}

greetUser("Anuradha");

What TypeScript does here

Ensures name is a string
Prevents invalid calls

❌ Not allowed:

// greetUser(10);

4️⃣ Optional Parameters

Some parameters may not always be provided.

function printMessage(message?: string): void {
  console.log(message ?? "No message provided");
}

printMessage();
printMessage("Welcome");

? makes the parameter optional
?? provides a fallback value

5️⃣ Default Parameters

Default values are used when no argument is passed.

function greet(name: string = "Guest"): void {
  console.log(`Hello ${name}`);
}

greet();
greet("Anuradha");

This avoids extra condition checks.

6️⃣ Return Statement (Output)

The return keyword sends a value back to the caller.

function square(num: number): number {
  return num * num;
}

const value = square(4);
console.log(value); // 16

Important rule

Once return executes, the function stops running.

7️⃣ Anonymous Functions (Function Without a Name)

An anonymous function does not have a name.It is usually:

Stored in a variable
Passed to another function

const multiply = function (a: number, b: number): number {
  return a * b;
};

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

Why use anonymous functions?

Short-lived logic
Used once
Useful for callbacks

8️⃣ Callback Functions (Very Important)

A callback function is a function that is passed to another function and executed later.

Simple Callback Example

function processTask(callback: () => void): void {
  console.log("Task started");
  callback();
}

processTask(function () {
  console.log("Task completed");
});

Step-by-step explanation

processTask starts
Callback is not executed immediately
processTask decides when to call it
Callback runs at the right time

Realistic Callback Example

setTimeout(function () {
  console.log("Executed after delay");
}, 2000);

Callbacks are commonly used for:

Delays
Events
Asynchronous work (covered next post)

9️⃣ Rest Parameters (Multiple Inputs)

Use rest parameters when the number of arguments is unknown.

function sum(...numbers: number[]): number {
  let total = 0;

  for (const num of numbers) {
    total += num;
  }

  return total;
}

console.log(sum(1, 2, 3, 4));

🔟 Self-Invoking Function (IIFE)

A Self-Invoking Function runs immediately after it is defined.

(function () {
  console.log("This runs immediately");
})();

Why use self-invoking functions?

Run setup logic once
Avoid global variables
Create isolated scope

Arrow Function IIFE

(() => {
  console.log("Arrow IIFE");
})();

1️⃣1️⃣ Arrow Functions (Modern & Preferred)

Arrow functions provide a shorter, cleaner syntax.

const divide = (a: number, b: number): number => {
  return a / b;
};

Single-line version:

const double = (x: number): number => x * 2;

Arrow functions are:

Concise
Widely used
Common in modern TypeScript

1️⃣2️⃣ Arrow Functions as Callbacks

setTimeout(() => {
  console.log("Arrow callback executed");
}, 1000);

This is the most common callback style today.

ANURADHA AGARWAL