Day 16 of 100: Scope and Hoisting — Where Variables Live

Day 16 of 100 — 100 Days of Playwright with TypeScript Challenge. Phase: JavaScript Fundamentals. JavaScript (Days 1-33) → TypeScript (Days 34-63) → Playwright (Days 64-96) → AI Framework Capstone (Days 97-100).

🎭 Want to master this with real projects? Join the Playwright Automation Mastery course at The Testing Academy.

---

Scope determines visibility. Hoisting explains the weird ‘works before defined’ behavior.

Three Scopes

const global = 'visible everywhere';

function outer() {
  const fnScoped = 'visible in outer';
  if (true) {
    const blockScoped = 'visible in this if only';
    let alsoBlock = 'same';
  }
  // blockScoped NOT accessible here
}

Hoisting

sayHi();              // works! declarations hoist fully
function sayHi() { console.log('hi'); }

// console.log(x);    // ReferenceError — let/const in 'dead zone'
let x = 5;

// var hoists as undefined — source of silent bugs
console.log(y);       // undefined (not an error!)
var y = 5;

Test File Implications

// Top-level consts shared by all tests in the file
const BASE_URL = 'http://localhost:3000';

// Inside test = isolated per test
// test('a', async ({ page }) => {
//   const localData = makeUser();  // fresh each test
// });
// Never share mutable state at file level between tests — parallel runs will collide

Tomorrow (Day 17): The this keyword — demystified for Page Objects.