JavaScript változók és konstansok (var, let és const magyarul)

Ebben a JavaScript leckében megismerkedünk a változók fogalmával, szintaktikájával, illetve megtanuljuk használni őket. Továbbá említést teszünk egy speciális változófajtáról, amit magyarul konstansnak nevezhetünk. Megtanuljuk, hogy mi a különbség a „var”, a „let” és a „const” között.

Mik azok a változók?

A változók azt a célt szolgálják, hogy adatot tároljunk bennük. Az adat típusa bármilyen lehet, például szám, karakter, szöveg vagy logikai érték.

Leggyakrabban azért mentünk el valamit egy változóba, mert azt az értéket szeretnénk többször is felhasználni. Így a későbbiekben nem kell minden egyes alkalommal újból foglalkoznunk vele, azaz előállítanunk azt az értéket, szimplán csak elő kell szednünk a változónkból.

Nézzünk egy példát: ha van egy hosszú mondatunk, akkor azt nem kell minden alkalommal leírnunk, amikor használni szeretnénk, elég csak arra a változóra hivatkoznunk, amelyben eltároltuk a mondatunkat.

Az elmélet így nézne ki a fent említett esetben: legyen egy X nevű változónk, amelyben tároljuk ezt a szöveget: “Jó reggelt, hogy aludtál?“. Ha a későbbiekben (akár többször) kiakarjuk íratni ezt a szöveget, akkor nem kell annyiszor begépelnünk, ahányszor kiszeretnénk íratni, elég lesz minden esetben csak annyit írnunk helyette, hogy X.

Természetesen nem csak ebben az esetben használhatóak a változók, tárolhatunk bennük számokat, amelyekkel műveleteket végezhetünk. Tárolhatunk benne például életkort és ha a vizsgálat alapján 18 év alatti, akkor jogosult valamilyen kedvezményre.

A var, let, const története

2015 előtt csak a „var” kulcsszóval lehetett változót létrehozni (deklarálni) a JavaScript-ben.

Viszont 2015-ben a JavaScript ES6 verziójában bevezették a „const” kulcsszót, amellyel olyan változót lehet létrehozni, amelyet később nem lehet felülírni. Az ilyen típusú változókat konstansoknak nevezzük, olyan értékeket szoktunk konstansokban tárolni, amelyek sosem változnak. Például a hónapok nevei, ezek minden évben pontosan ugyanabban a sorrendben követik egymást és sosem változik a nevük sem.

Ezenfelül az ES6-al vezették be a „let” kulcsszót is, amely csak egy blokk hatókörben érvényes.

Változók elnevezése

Van pár szabály, amit mindenképp be kell tartanunk a változónk elnevezése során:

• a változók nevének kötelező egyedinek lennie
• a változók nevének a hosszának kötelező minimum 1 karakterből állniuk, de akár többől is állhatnak
• a változók nevei tartalmazhatnak karaktereket, számokat, aláhúzásokat és dollárjeleket
• a változók nevei csak karakterrel, aláhúzással vagy dollárjellel kezdődhetnek, számmal nem
• a nevek kis- és nagybetű érzékenyek (szóval a „JS” és a „js” két különböző változó)
• a JavaScript előre lefoglalt kulcsszavait nem lehet használni (például let, var, const, if, break stb)

Változó létrehozása kezdőértékkel

Egy változót elkészíteni nevetségesen egyszerű. Több módszer közül is választhatunk. Nézzük meg az elsőt, amikor már a változó létrehozásakor értéket adunk neki.

Szintaxis

var/let/const NÉV = ÉRTÉK;
Code language: JavaScript (javascript)

Fontos szem előtt tartanunk, hogy a változónkban tárolt érték típusától függ az érték megadásának a módja.

• karakter esetében aposztrófot kell használni (például ‘A’)
• szó, szöveg esetében idézőjelet kell használni (például „alma” vagy „Hogy vagy?”)
• szám esetében semmi sem kell használnunk (például 6)

Természetesen szám esetében is használhatunk idézőjelet, de akkor a rendszer szövegként fogja kezelni, azaz nem fogunk tudni matematikai műveleteket végezni vele.

Példa

<script>
    var eletkor = 18;
</script>
Code language: HTML, XML (xml)

>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

Változó létrehozása kezdőérték nélkül

Illetve van még egy olyan megoldás, amikor először csak létrehozzuk a változót és majd utólag adunk neki értéket.

Szintaktika

var/let/const NÉV;

//tetszőleges kódok

NÉV = ÉRTÉK;
Code language: JavaScript (javascript)

Ilyenkor elsőnek létrehozunk a szokásos módon egy változót, de nem adunk neki kezdőértéket. Majd később már csak a nevét kell megadnunk és utána az értékét, ilyenkor már tilos megadnunk a változót létrehozó kulcsszót.

Példa

<script>
    var eletkor;
    eletkor = 18;
</script>
Code language: HTML, XML (xml)

>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

Több változó létrehozása egyszerre

Van még egy olyan lehetőségünk, hogy akár több változót is létrehozzunk egyszerre. Ezt az alább bemutatott módon tehetjük meg.

Szintaxis

var/let/const NÉV1 = ÉRTÉK, NÉV2 = ÉRTÉK, NÉV3 = ÉRTÉK;
Code language: JavaScript (javascript)

Természetesen itt is megtehetjük azt, hogy nem adunk egyből értéket a változóknak, csak utólag tesszük meg azt.

Példa

<script>
    var eletkor = 18, szuletesi_honap = "Június";
</script>
Code language: HTML, XML (xml)

>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

Egy változó értékének a felülírása

A JavaScript-ben (és az összes programnyelvben) lehetőségünk van arra, hogy felülírjuk a már egyszer létrehozott változónk értékét. Ez a művelet akárhányszor végrehajtható.

var/let/const NÉV = ÉRTÉK1;

//tetszőleges kódok

NÉV = ÉRTÉK2;

//tetszőleges kódok

NÉV = ÉRTÉK3;

//tetszőleges kódok

NÉV = ÉRTÉK4;
Code language: JavaScript (javascript)

Természetesen a változót bármely fentebb megadott módon deklarálhatjuk, az értékfelülírás minden esetben működni fog. Annyira kell odafigyelnünk, hogy a felülírások során ne adjuk meg a „var” , „let” vagy „const” kulcsszavakat, hiszen az csak akkor kell, ha egy új változót szeretnénk létrehozni, és jelenesetben már egy létezőt szeretnénk csak felülírni.

Példa

<script>
    var eletkor = 18;

    //eltelt egy év

    eletkor = 19;

    //eltelt egy újabb év

    eletkor = 20;
</script>
Code language: HTML, XML (xml)

<body>
  <p id="szoveg">Szia, nyomd meg a gombokat sorban.</p>
  <button onclick="kiirat()">1. Kiíratás</button>
  <button onclick="szoroz()">2. Szorzás</button>
  <button onclick="vizsgalat()">3. Vizsgálat</button>
  <button onclick="valtoztat()">4. Változtatás</button>
  <button onclick="kiirat()">6. Kiíratás</button>
  <button onclick="szoroz()">7. Szorzás</button>
  <button onclick="vizsgalat()">8. Vizsgálat</button>

  <script>
    var szam1=5;
    var szam2=10;
  
    function kiirat() {
         document.getElementById("szoveg").innerHTML = "A két változó értéke: " + szam1 + " és " + szam2;
         }
         
    function szoroz() {
         document.getElementById("szoveg").innerHTML = "A szorzatuk: " + szam1*szam2;
         }
         
    function vizsgalat() {
        if (szam1 > szam2)
        {
         document.getElementById("szoveg").innerHTML = szam1 + " nagyobb, mint a " + szam2;
         }
         else if (szam2 > szam1)
         {
         document.getElementById("szoveg").innerHTML = szam2 + " nagyobb, mint a " + szam1;
         }
         else
         {
         document.getElementById("szoveg").innerHTML = szam1 + " és " + szam2 + " pontosan egyenlőek.";
         }
        }
        
     function valtoztat() {
     
         szam1 = 200;
         szam2 = 150;
         }
  </script>

</body>
Code language: HTML, XML (xml)

Ha hasznos volt számodra, akkor kérlek oszd meg másokkal is, hogy ezzel támogass minket!