Globális változók függvényekben JavaScriptben

A JavaScriptben (más nyelvekben legtöbbször nem így van) a függvényen kívül definiált változók láthatóak lesznek a függvényen belül. Az ilyen változókat globális változóknak nevezzük. Nézzünk egy példát:

javascriptlet num = 1; // változó a függvényen kívül

function func() {
  console.log(num); // a num változó látható a függvényen belül
}

func(); // kiírja az 1-et

Valójában a változónak nem a függvény definíciója előtt, hanem a hívása előtt kell definiálva lennie:

javascriptfunction func() {
  console.log(num);
}

let num = 1; // változó a függvényen kívül
func();      // kiírja az 1-et

Ha megváltoztatjuk a változó értékét, és utána minden alkalommal meghívjuk a függvényt - a console.log minden alkalommal különböző eredményt fog kiírni:

javascriptfunction func() {
  console.log(num);
}

let num; // deklaráljuk a változót

num = 1; // beállítjuk az értékét 1-re
func();  // kiírja az 1-et

num = 2; // beállítjuk az értékét 2-re
func();  // kiírja a 2-t

Ha több függvényünk van, akkor a globális változó mindegyik függvényben elérhető lesz:

javascriptfunction func1() {
  console.log(num);
}

function func2() {
  console.log(num);
}

let num = 1;

func1(); // kiírja az 1-et
func2(); // kiírja az 1-et

Ha az egyik függvényben módosítások történnek a globális változóval, akkor ez a változó megváltozik minden olyan függvényben, amelyik ezt a változót használja:

javascriptfunction func1() {
  console.log(num);
  num++; // módosítjuk a globális változót
}

function func2() {
  console.log(num);
}

let num = 1;

func1(); // kiírja az 1-et
func2(); // kiírja a 2-t

Mivel bármelyik függvény könnyen megváltoztathatja a globális változót, ezért a használatuk nehézben megtalálható hibák forrása. Emiatt a globális változók használatát a szkriptben minimálisra kell csökkenteni. Ideális esetben egyáltalán ne legyenek, vagy a lehető legkevesebb legyen belőlük.

javascriptlet num = 1;
    
function func() {
  console.log(num);
}

func();

javascriptlet num = 1;
    
function func() {
  console.log(num);
}

num = 2;
func();

javascriptfunction func() {
  console.log(num);
}

let num;

num = 1;
func();

num = 2;
func();