JavaScript Funkcije: Lokalne spremenljivke

Lokalne spremenljivke se ustvarijo, ko se funkcija zažene, in izbrišejo, ko je funkcija dokončana. Vsaka funkcija ima svoj lasten obseg (scope), zato lahko v različnih funkcijah uporabimo iste imenske oznake brez medsebojnega konflikta. To omogoča varno enkapsulacijo podatkov, zapiranje (closure) in bolj berljivo kodo.

PRIMER

<!DOCTYPE html>
<html lang="sl">
<head>
    <meta charset="UTF-8">
    <title>Lokalne spremenljivke – sedem praktičnih primerov (+3 dodatni)</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    
    <style>
        body {
            font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
            padding: 20px;
        }
        .example {
            border: 1px solid #ccc;
            border-radius: 8px;
            padding: 15px;
            margin-bottom: 25px;
        }
        .example h2 { 
            margin-top:0; 
        }
        .desc   { 
            margin-bottom:8px; 
        }
        .output { 
            margin-top:6px; 
            line-height:1.5; 
            white-space:pre-wrap; 
        }
        code    { 
            background:#f4f4f4; 
            padding:2px 4px; 
            border-radius:4px; 
        }
    </style>
</head>
<body>
    <div class="example" id="ex1">
        <h2>Primer 1 – Osnovni lokalni obseg</h2>
        <div class="desc">Spremenljivka <code>sad</code> je definirana z <code>var</code> 
        znotraj funkcije, zato je vidna le v njej.</div>
        <div class="output" id="out1"></div>
    </div>
    
    <div class="example" id="ex2">
        <h2>Primer 2 – Block scope z <code>let</code> in <code>const</code></h2>
        <div class="desc">Spremenljivki sta omejeni na blok <code>{ … }</code> in ne preživita izven njega.</div>
        <div class="output" id="out2"></div>
    </div>
    
    <div class="example" id="ex3">
        <h2>Primer 3 – Closure</h2>
        <div class="desc">Funkcija <code>makeGreeter</code> vrne drugo funkcijo, ki “zapre” spremenljivko 
        <code>msg</code>.</div>
        <div class="output" id="out3"></div>
    </div>
    
    <div class="example" id="ex4">
        <h2>Primer 4 – Rekurzija</h2>
        <div class="desc">Vsak rekurziven klic ima svojo kopijo <code>step</code>, kar preprečuje prepisovanje.</div>
        <div class="output" id="out4"></div>
    </div>
    
    <div class="example" id="ex5">
        <h2>Primer 5 – IIFE (Immediately Invoked Function Expression)</h2>
        <div class="desc">Funkcija se izvede takoj in njene lokalne spremenljivke ostanejo skrite.</div>
        <div class="output" id="out5"></div>
    </div>
    
    <div class="example" id="ex6">
        <h2>Primer 6 – Hoisting (Var) vs. Temporal Dead Zone (Let)</h2>
        <div class="desc">Poskus dostopa do <code>var</code> pred deklaracijo vrne <code>undefined</code>, 
        <code>let</code> pa sproži napako.</div>
        <div class="output" id="out6"></div>
    </div>
    
    <div class="example" id="ex7">
        <h2>Primer 7 – Konflikt med globalno in lokalno spremenljivko</h2>
        <div class="desc">Lokalna definicija <code>temp</code> ne vpliva na globalno <code>temp</code>.</div>
        <div class="output" id="out7"></div>
    </div>
    
    <script>
        // Primer 1
        function basicScope() {
            var sad = "jagode";
            return sad;
        }
        document.getElementById('out1').textContent =
            `Znotraj funkcije: ${basicScope()}, izven: ${typeof sad}`; // sad ni definiran izven
        
        // Primer 2
        {
            let a = 10;
            const b = 20;
            document.getElementById('out2').textContent = `Blok: a=${a}, b=${b}`;
        }
        // console.log(a); // ReferenceError – a ni dostopen izven bloka
        
        // Primer 3
        function makeGreeter(msg) {
            return function(name) {
                return `${msg}, ${name}!`;
            };
        }
        const hello = makeGreeter('Pozdravljen');
        document.getElementById('out3').textContent = hello('Oseba');
        
        // Primer 4
        function countDown(n, step = 0) {
            if (n <= 0) return step;
            return countDown(n - 1, step + 1);
        }
        document.getElementById('out4').textContent = `Število korakov od 5 do 0: ${countDown(5)}`;
        
        // Primer 5
        (function() {
            const secret = "skrivnost";
            document.getElementById('out5').textContent = `IIFE sporočilo: ${secret}`;
        })();
        
        // Primer 6
        // var je hoisted – vrne undefined
        document.getElementById('out6').textContent = `var hoisted: ${hoistedVar}\n`;
        
        // let povzroči ReferenceError – zato ga ovijemo v try/catch
        let tdzMessage = '';
        try {
            console.log(tdzLet); // ReferenceError
        } catch (e) {
            tdzMessage = e.name;
        }
        var hoistedVar = 42;
        document.getElementById('out6').textContent += `let TDZ: ${tdzMessage}`;
        
        // Primer 7
        var temp = "globalna temperatura";
        function localTemp() {
            var temp = "lokalna temperatura";
            return temp;
        }
        document.getElementById('out7').textContent = `Globalno: ${temp}, Lokalno: ${localTemp()}`;
    </script>
</body>
</html>

REZULTAT