> ## Documentation Index
> Fetch the complete documentation index at: https://docs.syntblaze.com/llms.txt
> Use this file to discover all available pages before exploring further.
# TypeScript 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.
```typescript theme={"dark"}
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.
```typescript theme={"dark"}
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.
```typescript theme={"dark"}
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.
```typescript theme={"dark"}
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.
```typescript theme={"dark"}
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).
```typescript theme={"dark"}
var globalProperty: boolean = true;
// In a non-module browser environment, this is accessible via window.globalProperty
```
Tired of Poor TypeScript Skills? Fix That With Deep Grasping!
Learn More
