Article Categories

Selected Reading

How to declare Block-Scoped Variables in JavaScript?

Javascript Web Development Object Oriented Programming

Block-scoped variables are declared using let and const keywords introduced in ES2015. Unlike var, these variables are only accessible within their containing block.

Block scope means the variable exists only within the nearest enclosing curly braces {}.

Syntax

let variableName = value;
const constantName = value;

Example: Basic Block Scope

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Block Scoped Variables</title>
</head>
<body>
    <h1>Block Scoped Variables Demo</h1>
    <div id="output"></div>
    <button onclick="testBlockScope()">Test Block Scope</button>
    
    <script>
        function testBlockScope() {
            let output = document.getElementById('output');
            output.innerHTML = '';
            
            // Block scope demonstration
            {
                let blockVar = 'Inside block';
                const blockConst = 42;
                
                output.innerHTML += 'Inside block: let = ' + blockVar + '<br>';
                output.innerHTML += 'Inside block: const = ' + blockConst + '<br>';
            }
            
            // Try to access variables outside their block
            try {
                output.innerHTML += 'Outside block: ' + blockVar;
            } catch (error) {
                output.innerHTML += 'Error accessing blockVar: ' + error.message + '<br>';
            }
            
            try {
                output.innerHTML += 'Outside block: ' + blockConst;
            } catch (error) {
                output.innerHTML += 'Error accessing blockConst: ' + error.message;
            }
        }
    </script>
</body>
</html>

Comparison: var vs let vs const

Feature	var	let	const
Scope	Function/Global	Block	Block
Reassignment	Yes	Yes	No
Hoisting	Yes	No	No

Example: Loop Scope

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Loop Scope Example</title>
</head>
<body>
    <h2>Loop Scope Demonstration</h2>
    <div id="loop-output"></div>
    <button onclick="demonstrateLoopScope()">Run Loop Example</button>
    
    <script>
        function demonstrateLoopScope() {
            let output = document.getElementById('loop-output');
            output.innerHTML = '';
            
            // Using let in loop - each iteration has its own scope
            for (let i = 0; i < 3; i++) {
                setTimeout(() => {
                    output.innerHTML += 'let i = ' + i + '<br>';
                }, i * 100);
            }
            
            // Using var in loop - shares same scope
            setTimeout(() => {
                output.innerHTML += '<br>With var:<br>';
                for (var j = 0; j < 3; j++) {
                    setTimeout(() => {
                        output.innerHTML += 'var j = ' + j + '<br>';
                    }, (j + 5) * 100);
                }
            }, 400);
        }
    </script>
</body>
</html>

Key Benefits

Prevents accidental global variables - Variables stay within their intended scope
Temporal Dead Zone - Variables cannot be used before declaration
Loop closure fix - Each loop iteration gets its own variable instance
Immutability with const - Prevents accidental reassignment

Conclusion

Use let and const for block-scoped variables to write cleaner, more predictable JavaScript code. They prevent common scoping issues associated with var.

AmitDiwan

Updated on: 2026-03-15T23:18:59+05:30

278 Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next