JavaScript var Keyword

4. Hoisting

In JavaScript, hoisting means that variable declarations made with var are moved to the top of their scope (global or function) before the code is executed. However, only the declaration is hoisted — the assignment stays where it is.

A helpful real-life analogy is to think of hoisting like reserving a name on a list. JavaScript knows the variable exists, but until a value is assigned, it remains undefined.

Because of this behavior, accessing a var variable before its assignment does not throw an error. Instead, it returns undefined, which can hide logical mistakes in your code.

// Variable declaration is hoisted
console.log(myVariable); // undefined (not an error)

// Variable assignment happens here
var myVariable = 10;

console.log(myVariable); // 10
            

Internally, JavaScript interprets the above code as if the declaration were written at the top of the scope, while the assignment remains in its original position. This behavior is unique to var and does not apply to let or const.

5. No Block Scope

Unlike let and const, variables declared with var do not follow block scope. This means a variable created inside a block (such as an if statement, for loop, or while loop) is still accessible outside of that block.

A real-life analogy would be writing a note meant for a single meeting room, but leaving it on the building’s main notice board. Even though it was intended for a limited space, everyone can still see and modify it.

This behavior often leads to accidental variable leaks, unexpected value changes, and hard-to-track bugs—especially in large applications or when multiple developers are working on the same codebase.

// Variable declared inside a block
if (true) {
    var userStatus = "Logged In";
}

// Still accessible outside the block
console.log(userStatus); // Logged In
        

In modern JavaScript, this issue is avoided by using let or const, which limit the variable’s visibility strictly to the block in which it is declared. This makes code safer, more predictable, and easier to maintain.

6. Global Object Property

When a variable is declared using var in the global scope, JavaScript automatically attaches it as a property of the global object. In web browsers, this global object is the window.

A real-life analogy would be placing your personal belongings in a shared public space. Anyone else using the same space can access, modify, or overwrite them—often without realizing it.

This implicit global binding increases the risk of naming collisions, unexpected overwrites, and difficult-to-debug issues, especially when multiple scripts, third-party libraries, or browser extensions are running on the same page.

// Global variable declared with var
var appVersion = "1.0.0";

// Accessible through the global window object
console.log(window.appVersion); // Output: 1.0.0
            

Modern JavaScript avoids this issue by using let and const, which do not attach variables to the global object when declared in the global scope. This leads to safer, more modular, and more predictable applications.

7. Performance Considerations

Modern JavaScript engines are highly optimized and handle var, let, and const with comparable performance in most real-world scenarios. In practice, performance differences are usually negligible compared to factors such as algorithm choice and code readability.

However, improper use of var—particularly in loops and shared scopes—can introduce subtle bugs and unnecessary re-evaluations. Writing clear and predictable loop logic is often more important than micro-optimizations.

One common best practice is to cache values, such as an array’s length, when they are used repeatedly inside a loop. This improves readability and can provide minor performance benefits in certain situations.

// Create an array with sample values
var numbers = [10, 20, 30, 40, 50];

// Loop without caching the length
var start1 = Date.now();
for (var i = 0; i < numbers.length; i++) {
    console.log(numbers[i]);
}
var end1 = Date.now();
console.log("Without cache:", (end1 - start1) + " ms");

// Cache the array length before looping
var length = numbers.length;
var start2 = Date.now();
for (var i = 0; i < length; i++) {
    console.log(numbers[i]);
}
var end2 = Date.now();
console.log("With cache:", (end2 - start2) + " ms");

In modern JavaScript development, prioritizing clean logic and using let or const for block-scoped variables generally leads to more maintainable and reliable code than focusing on minor performance optimizations with var.

8. Backward Compatibility

The var keyword is supported by all versions of JavaScript, including very old browsers and environments that predate ES6 (ECMAScript 2015). For this reason, var remains relevant when maintaining, debugging, or gradually modernizing legacy applications.

However, in modern development workflows, backward compatibility is typically handled through tools such as transpilers (for example, Babel) rather than relying on older language features. As a result, let and const are strongly preferred for new code.

Understanding var is still valuable for reading older codebases, integrating third-party scripts, and preparing for technical interviews—but it should rarely be used in modern production code.

9. Using var with setTimeout()

When var is used inside a loop together with setTimeout(), all scheduled callbacks share the same variable reference. This happens because var is function-scoped rather than block-scoped, which often leads to unexpected results.

A simple real-life analogy is setting multiple reminders that all reference the same changing note. By the time the reminders trigger, the note contains only its final value.

for (var i = 1; i <= 3; i++) {
    setTimeout(function () {
        console.log(i);
    }, 1000);
}

// Output: 4 4 4
        

By the time the setTimeout callbacks execute, the loop has already completed and the variable i holds its final value (4). Since all callbacks reference the same variable, they all log the same result.

This issue is avoided in modern JavaScript by using let, which creates a new block-scoped variable for each loop iteration, or by wrapping the callback in an immediately invoked function expression (IIFE).