Difference Between var, let, and const

  • var — function-scoped, allows redeclaration and hoisting. It's older syntax and can cause bugs if redeclared unintentionally.

  • let — block-scoped, cannot be redeclared in the same scope, suitable for variables that change value during execution.

  • const — block-scoped, cannot be reassigned; ideal for constants like locators, URLs, or fixed test data.

    Advertisement

Quick Summary

  • var → function-scoped, can redeclare, hoisted.

  • let → block-scoped, can reassign, preferred for dynamic values.

  • const → block-scoped, cannot reassign, ideal for constants.

Real-Life Example

In my project, we use const for locators and test data that should not change, and let for loop counters or dynamic values.

Real-Time Testing Example

While automating login scenarios in Playwright, username/password variables were declared using const, but dynamic iteration counters were declared using let.

var is function-scoped and hoisted, which can lead to unexpected behavior and bugs.

Modern JavaScript prefers let and const for block scoping and safer code.

Function Scope vs Block Scope

var is function-scoped, meaning variables declared inside a block (like if or for) are accessible outside that block, which can lead to accidental overwrites.

Hoisting Issues

var declarations are hoisted to the top of the scope and initialized as undefined, which can produce confusing runtime errors.

Redeclaration Problem

You can redeclare a var variable in the same scope, increasing the chance of overwriting critical data.

Real-Time Testing Example

In my automation project, using var for loop counters sometimes caused values to leak outside the loop, creating flaky tests.

While iterating over multiple elements in Playwright, replacing var with let ensured each iteration maintained the correct element reference.

What is Scope? Global, Function, and Block Scope

Scope determines the accessibility of variables in different parts of the code.

JavaScript has global, function, and block scope.

Global Scope

Variables declared outside any function or block are globally accessible throughout the script.

Function Scope

Variables declared inside a function (var, let, or const) are accessible only within that function.

Block Scope

Variables declared with let or const inside a block ({}) are accessible only inside that block.

var does not follow block scope—it's function-scoped.

Real-Time Automation Example

In Playwright automation, we declare global locators at the top for all tests, and loop counters inside tests are declared with let to maintain block scope and avoid overwriting values across iterations.

What is Hoisting?

Hoisting is JavaScript's behavior of moving variable and function declarations to the top of their scope during compilation.

It moves declarations (not initializations) to the top of their scope before code execution.

Behavior by Type

  • var → hoisted and initialized as undefined. You can access it before declaration, but the value is undefined.

  • let and const → hoisted but not initialized. Accessing them before declaration throws a ReferenceError.

Real-Time Testing Example

In Playwright, declaring let inside a loop avoids accessing it before definition, preventing runtime errors while iterating over multiple elements.

Can We Reassign a const Variable?

No—const cannot be reassigned because it is meant to hold a constant reference.

const creates a read-only reference to a value; reassigning a new value to the same variable throws an error.

Important Note

If a const variable holds an object or array, the contents can be modified, but the reference cannot be changed.

Real-Time Testing Example

Declaring const loginButton = '#login' ensures the selector used across multiple Playwright tests never changes accidentally.

Redeclaration vs Reassignment

Redeclaration

Redeclaration means declaring the same variable again in the same scope.

  • Allowed with var.

  • Not allowed with let and const in the same scope.

Reassignment

Reassignment means assigning a new value to an existing variable.

  • Allowed with var and let.

  • Not allowed with const.

Feature var let const
Redeclaration (same scope) Allowed Not allowed Not allowed
Reassignment Allowed Allowed Not allowed

Real-Time Testing Example

Locators like const loginBtn = '#login' cannot be redeclared or reassigned, so they're safe across multiple tests.

Counters in loops like let attempt = 0 can be reassigned for each iteration.

Why We Mostly Use let and const (Playwright)

In Playwright, we use const for locators and fixed data and let for dynamic values.

Block Scope Advantage

let and const are block-scoped, preventing variables from leaking outside loops or conditionals and avoiding accidental overwrites.

Immutability with const

const ensures locators, URLs, and reusable test data are not accidentally changed during execution.

Quick Summary

  • Use const for locators, URLs, and fixed test data (immutable).

  • Use let for counters, temporary values, and dynamic data.

FAQs

What is the difference between var, let, and const?

var is function-scoped, hoisted, and redeclarable; let is block-scoped and reassignable; const is block-scoped and cannot be reassigned.

Because it's function-scoped, hoisted (initialized as undefined), and redeclarable, which causes value leakage, confusing runtime behavior, and accidental overwrites—let and const are safer.

What are the three types of scope in JavaScript?

  • Global scope (accessible everywhere)

  • Function scope (inside a function)

  • Block scope (inside {}, for let/const only; var ignores block scope)

What is hoisting?

JavaScript moving declarations (not initializations) to the top of their scope.

  • var is hoisted as undefined.

  • let/const are hoisted but uninitialized and throw a ReferenceError if accessed early.

Can you reassign a const variable?

No—const holds a read-only reference.

However, if it holds an object or array, the contents can still be modified; only the reference is fixed.

What is the difference between redeclaration and reassignment?

Redeclaration is declaring the same variable again in the same scope (allowed only for var).

Reassignment is giving an existing variable a new value (allowed for var and let, not const).