JavaScript — Functions & Control Flow

Learn to make decisions in code with if/else, repeat actions with loops, and organize code into reusable functions.

Playwright Automation • Prep • Lesson 5
16 min read

What you'll learn

  • Write functions with parameters and return values
  • Use if/else for decision making
  • Use for and while loops for repetition
  • Understand comparison and logical operators
Playwright AutomationlessonsJump to another lesson

JavaScript --- Functions & Control Flow

Three big ideas: functions (reusable recipes), conditionals (decisions), and loops (repetition). Together they make code that thinks and acts.

What is a Function?

name"Alice"
greet()

return "Hello, " + name

returns
"Hello, Alice"
A function is like a machine: inputs go in, processed, output comes out.
 
function greet(name) {
  return "Hello, " + name + "!";
}

greet("Alice");  // "Hello, Alice!"
greet("Bob");    // "Hello, Bob!"

How a function flows

  1. 1

    Input — parameters come in

    function double(number) {
  2. 2

    Do stuff — body runs

      const result = number * 2;
  3. 3

    Output — return sends a value back

      return result;
}
  4. 4

    Call it — use it anywhere

    double(5); // 10

A function with no return returns undefined. Functions can take 0, 1, or many parameters.

a5
b3
addNumbers()

return a + b

return
8
Multiple inputs? No problem. The machine combines them into one output.

Arrow Functions --- The Shorter Way

Regular function

  • Uses the function keyword
  • Has its own name after function
  • Return is always explicit

Arrow function

  • Uses => arrow syntax
  • Assigned to a const
  • One-liner auto-returns (no curly braces needed)
 
// Regular
function isEven(n) {
  return n % 2 === 0;
}

// Arrow (verbose)
const isEven = (n) => {
  return n % 2 === 0;
};

// Arrow (one-liner — return is automatic)
const isEven = (n) => n % 2 === 0;

You’ll see arrow functions everywhere in Playwright code. Get comfortable reading them.

Quick check

Question 1 of 10 correct

What does this output? function addOne(n) { n + 1; // no return! } console.log(addOne(5));

Comparison Operators

OperatorMeaningExampleResult
===exactly equal5 === 5true
!==not equal5 !== 3true
>greater than10 > 5true
<less than3 < 8true
>=at least5 >= 5true
<=at most3 <= 2false

Every comparison returns a boolean (true / false).

if / else --- Making Decisions

const score = 75;

if (score >= 90) {
  console.log("Grade: A");
} else if (score >= 70) {
  console.log("Grade: C");
} else {
  console.log("Grade: F");
}
// Grade: C

JavaScript checks conditions top-to-bottom and stops at the first true.

score = 75

score >= 90?

No

score >= 70?

Yes!

Grade: C

Logical Operators

Combine conditions with &&, ||, !.

// && (AND) — both must be true
if (age >= 18 && hasLicense) { /* can drive */ }

// || (OR) — at least one must be true
if (isWeekend || isHoliday) { /* day off! */ }

// ! (NOT) — flips true/false
if (!isLoggedIn) { /* please log in */ }

Loops --- Doing Things Repeatedly

for loop — run a set number of times

for (let i = 0; i < 3; i++) {
  console.log(i);
}
node
# Output of the loop above012

Try it in your terminal!

Three parts inside ():

  1. Start: let i = 0 (counter)
  2. Condition: i < 3 (keep going while true)
  3. Step: i++ (add 1 each time)

for...of loop — each item in a list

const colors = ["red", "green", "blue"];
for (const color of colors) {
  console.log(color);  // red, then green, then blue
}

while loop — run while a condition is true

let count = 0;
while (count < 3) {
  console.log(count);
  count++;  // CRITICAL — without this, infinite loop!
}

Quick check

To check if two values are NOT equal (strict), use the operator.

Putting It Together

function gradeScores(scores) {
  for (const score of scores) {
    if (score >= 90) {
      console.log(`${score}: A`);
    } else if (score >= 70) {
      console.log(`${score}: C`);
    } else {
      console.log(`${score}: F`);
    }
  }
}

gradeScores([95, 72, 58]);
// 95: A
// 72: C
// 58: F

Practice Time

Exercise 1: Write an If/Else and a Function

Fill in the blanks to complete this function that checks if someone can vote (must be 18 or older).

function canVote(age) {
 (age  18) {
   "Yes, you can vote!";
}  {
   "Sorry, not old enough yet.";
}
}

console.log(canVote(20));  // Yes, you can vote!
console.log(canVote(15));  // Sorry, not old enough yet.

Exercise 2: Fill in the Blank

To check if two values are exactly equal (same value AND same type), use

Exercise 3: Check Your Understanding

Question 1 of 30 correct

What does this code output? function double(n) { return n * 2; } console.log(double(7));