Variables & Scope (let, const, var)

What are Variables in JavaScript?

In computer science, a variable is a symbolic name for a reference to a memory location. In JavaScript, you use variables to store data that your program needs to process. Think of them as "labels" that point to values in your computer's RAM.

// Declaring variables with modern syntax
let userName = 'Alice';      // String literal
const userAge = 25;          // Number literal
let isVerified = true;       // Boolean literal

console.log(userName);       // Output: Alice
console.log(userAge);        // Output: 25

The Evolution of Variable Declaration

For many years, var was the only way to declare variables. However, due to its confusing scoping rules, ES6 (2015) introduced let and const, which are now the industrial standard for writing clean, predictable code.

1. let: The Standard Variable

Use let when you expect a variable's value to change over time (reassignment). The most important feature of let is Block Scoping. A block is any code wrapped in { } braces, such as if-statements or loops.

// 'let' is block-scoped
let score = 100;
score = 200;              // ✅ Reassignment is allowed
console.log(score);       // Output: 200

if (true) {
    let internalMessage = 'Hello from inside';
    console.log(internalMessage); // ✅ Works here
}
console.log(internalMessage);     // ❌ ReferenceError: Not defined in this scope

2. const: Immutable References

The const keyword is used for values that should not be reassigned. In professional development, const is the default choice. By using const, you signal to other developers (and the JS engine) that this value is stable.

Crucial Note: For objects and arrays, const prevents the variable from pointing to a new object, but it does NOT make the object's internal properties immutable.

// 'const' requires initialization and remains constant
const PI = 3.14159;
PI = 3.14;                // ❌ TypeError: Assignment to constant variable

// Objects and Arrays are reference types
const userProfile = { name: 'Alice', age: 25 };
userProfile.age = 26;           // ✅ Works - modifying a property
// userProfile = { name: 'Bob' };  // ❌ Error - reassignment of the reference

3. var: The Legacy Pattern (Avoid!)

The var keyword is function-scoped rather than block-scoped. This often leads to "variable leakage" where a variable declared inside an if orfor block is accessible outside of it, causing hard-to-track bugs.

// 'var' is function-scoped and hoisted
if (true) {
    var leakedVariable = 'I am everywhere';
}
console.log(leakedVariable); // ✅ Works: 'I am everywhere' (Problematic!)

// Redeclaration is dangerously allowed
var count = 5;
var count = 10; // ✅ No error, just overrides. Hard to debug.

Deep Dive into Scope

Scope defines the visibility and lifetime of variables. JavaScript utilizes "Lexical Scoping," meaning the access to variables is determined by the physical location of the code within your files.

• Global Scope: Variables declared outside any function or block. They are accessible throughout the entire application. Be careful: overusing global variables can lead to name collisions.
• Local/Function Scope: Variables declared inside a function are private to that function.
• Block Scope: Introduced by let and const. Variables only exist within the closest pair of curly braces.

// Global vs Block Scope
const globalConfig = 'PROD';

function initialize() {
    let localKey = 'ABC-123';
    
    if (globalConfig === 'PROD') {
        let secretToken = 'Shhh!'; 
        // localKey is accessible here
        // globalConfig is accessible here
    }
    // secretToken is NOT accessible here
} 

The Temporal Dead Zone (TDZ) & Hoisting

Have you ever wondered why you can sometimes use a variable before it's declared? This is called Hoisting. The JS engine moves declarations to the top of the script during the "creation phase."

However, let and const are safer because they enter aTemporal Dead Zone. If you try to access them before the actual declaration line, the program will crash with a clear error, preventing logical bugs.

// Hoisting with 'var'
console.log(myVar); // Output: undefined (no error)
var myVar = 'exists';

// Temporal Dead Zone with 'let'
// console.log(myLet); // ❌ ReferenceError
let myLet = 'safe';

Production Best Practices

To write high-quality, enterprise-ready JavaScript, follow these naming and declaration conventions: