var Variable

The var keyword is a legacy variable declaration mechanism in TypeScript, inherited from JavaScript, that defines a variable with function-level or global-level scope. Unlike let and const, var does not adhere to lexical block scoping and exhibits specific hoisting and closure-binding behaviors that dictate how the variable is allocated and evaluated within the execution context.

var identifier: TypeAnnotation = initialValue;

Core Mechanics

Function and Global Scoping Variables declared with var are scoped to their nearest enclosing function block. If a var is declared outside of any function, it is bound to the global scope. Because var ignores block-level boundaries (such as if, for, or while statements), variables declared inside these blocks will leak into the outer function or global scope.

function scopeDemonstration(): void {
    if (true) {
        var scopedVariable: number = 10;
    }
    // scopedVariable is accessible here due to function-scoping
    console.log(scopedVariable); 
}

Hoisting and Initialization During the compilation phase, var declarations are hoisted to the top of their enclosing function or global scope. The underlying JavaScript engine allocates memory for the variable before executing the code, initializing it with undefined. However, modern TypeScript’s static analysis (specifically with strictNullChecks enabled) strictly tracks control flow and will emit a compilation error if a var is accessed before its assignment in the source code, even though it would not throw a runtime ReferenceError in JavaScript.

function hoistingDemonstration(): void {
    // console.log(hoistedVar); // TypeScript Error TS2454: Variable 'hoistedVar' is used before being assigned.
    
    var hoistedVar: string = "Initialized";
    console.log(hoistedVar); // Outputs: "Initialized"
}

Redeclaration TypeScript permits the redeclaration of the same var identifier within the same scope without emitting a compilation error. However, TypeScript’s static type checker enforces that any subsequent redeclarations must possess the exact same type as the original declaration. Providing a compatible subtype or supertype will result in a compilation error.

var duplicateIdentifier: string = "First declaration";
var duplicateIdentifier: string = "Second declaration"; // Valid

var mixedIdentifier: string | number;
// var mixedIdentifier: string; // TypeScript Error TS2403: Subsequent variable declarations must have the same type.

Closures and Loop Bindings Because var is function-scoped rather than block-scoped, it shares a single binding across all iterations of a loop. When asynchronous callbacks or closures are created inside a for loop using a var declaration, every closure captures the exact same variable reference. Consequently, when the closures are eventually invoked, they will all evaluate to the final mutated value of the loop variable.

function closureDemonstration(): void {
    for (var i: number = 0; i < 3; i++) {
        setTimeout(() => {
            console.log(i); // Outputs '3' three times, not 0, 1, 2
        }, 0);
    }
}

Global Object Binding When declared in the global scope (outside of any module or function), var declarations automatically become properties of the global environment object (e.g., the window object in a browser environment or global in Node.js).

var globalProperty: boolean = true;
// In a non-module browser environment, this is accessible via window.globalProperty

Master TypeScript with Deep Grasping Methodology!

Learn More