Varijable pohranjuju podatke koje možeš koristiti kasnije. U JavaScriptu možeš deklarirati varijable koristeći let, const ili var:
var: Stariji način deklariranja varijabli, ali još uvijek čest u starijem kodu.
let: Može se ponovno dodijeliti, a postoji samo unutar svog bloka. (Praktično unutar vitičastih zagrada).
const: Ne može se ponovno dodijeliti, vrijednost je konstantna.
U ovom primjeru koristimo let varijablu.
- Prvo imamo glavnu funkciju
demonstrateLet()koja se poziva kad korisnik klikne na gumb:
demonstrateLet() {
// Kod funkcije
}
- Na početku funkcije dohvaćamo vrijednost iz input polja:
let number = document.getElementById('numberInput').value;
Ovo stvara let varijablu number koja uzima vrijednost iz HTML input elementa s ID-em ‘numberInput’.
- Kreiramo praznu varijablu za spremanje poruka:
let output = '';Ova varijabla će sadržavati sav tekst koji želimo prikazati korisniku.
- Zatim imamo if-else blok koji demonstrira scope (doseg) let varijable:
if (number > 0) {
let message = "Broj je pozitivan!";
output += message + "<br>";
} else {
let message = "Broj je negativan ili nula!";
output += message + "<br>";
}
Ovdje je ključno primijetiti da je varijabla message deklarirana sa let unutar if i else blokova. To znači da je dostupna SAMO unutar tih blokova.
- Sljedeći dio demonstrira kako
letvarijable funkcioniraju izvan svog bloka:
try {
output += "Pokušavamo pristupiti 'message' varijabli izvan bloka: " + message;
} catch(error) {
output += "Ne možemo pristupiti 'message' varijabli izvan bloka – to je glavna karakteristika let varijable!";
}Ovaj kod će UVIJEK završiti u catch bloku jer varijabla message nije dostupna izvan if-else bloka gdje je definirana. Ovo je glavna karakteristika let varijabli – one su dostupne samo unutar bloka gdje su deklarirane.
- Na kraju, prikazujemo rezultat i dodajemo CSS klasu:
document.getElementById('result').innerHTML = output;
document.getElementById('result').className = 'result success';Ključne stvari za razumjeti o let varijablama u ovom primjeru:
- One su “block-scoped” (ograničene na blok u kojem su deklarirane)
- Ne možemo im pristupiti izvan njihovog bloka
- Za razliku od
varvarijabli, koje bi bile dostupne i izvan bloka,letosigurava bolju kontrolu nad dosegom varijabli - Ovo je korisno za sprječavanje slučajnih grešaka i “curenja” varijabli u dijelove koda gdje im ne bi trebalo biti pristupa
Evo jednostavnog primjera koji pokazuje razliku između const i let s obzirom na njihovu dostupnost. Ovaj praktični primjer možeš isprobati u uređivaču koda ili u pregledniku:
<!DOCTYPE html>
<html>
<head>
<title>Const vs Let Primjer</title>
<style>
.result {
margin: 20px;
padding: 10px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<button onclick="demonstrirajScope()">Pokreni demonstraciju</button>
<div id="output" class="result"></div>
<script>
// Const je dostupan kroz cijeli kod
const MAKSIMALNI_BROJ = 100;
function demonstrirajScope() {
let output = '';
if (true) {
// Let varijabla je dostupna samo unutar ovog bloka
let trenutniBroj = 42;
output += `Unutar bloka možemo vidjeti obje varijable:<br>`;
output += `MAKSIMALNI_BROJ: ${MAKSIMALNI_BROJ}<br>`;
output += `trenutniBroj: ${trenutniBroj}<br><br>`;
}
output += `Izvan bloka:<br>`;
output += `MAKSIMALNI_BROJ je još uvijek dostupan: ${MAKSIMALNI_BROJ}<br>`;
try {
output += `trenutniBroj: ${trenutniBroj}`;
} catch(error) {
output += `Ne možemo pristupiti 'trenutniBroj' jer je bio definiran sa 'let' unutar bloka`;
}
document.getElementById('output').innerHTML = output;
}
</script>
</body>
</html>