Vezérlési szerkezetek: Feltételes végrehajtás, ciklusok, iterátorok


A kezdő programozók körében a vezérlési szerkezetek működésének szemléletes bemutatásakor általában egy szem receptes hasonlattal szoktak élni: ahhoz, hogy egy ételt újra és újra el tudjunk készíteni a konyhában, a döntéseinket a munkafolyamat során egyértelműsíteni kell. Amint a recept összeállt, igyekezzünk elkerülni ennek a módosítását. Értelemszerű ha valamelyik összetevőből nincs pontosan olyan, akkor azt nyugodtan helyettesíthetjük hozzá hasonlóra (barna cukor helyett fehér cukor). Az elvégzendő lépések viszont ugyanannak kell maradnia. Ez a fejezet a dolgok megváltoztatásáról és a döntésekről fog szólni: megadni a programunknak a feltételekhez való alkalmazkodás képességét és a munkafolyamatok intelligens-módon történő automatizálásának lekezelését [20]. Egy JavaScript alkalmazás egy adott szintaxisban megírt utasítások sorozatából áll. Egy utasítás több sort is kitehet. Több utasítás egy sorban is elfér, amennyiben mindegyik utasítást pontosvesszővel látjuk el. Ez nem tekinthető egy kulcsszónak, sokkal inkább egy csoportnyi kulcsszónak fogható fel [19].

Feltételes végrehajtás


A feltételes utasítások olyan egyéb utasításokat tartalmaznak, melyek csakis egy előre meghatározott feltétel teljesülése esetén hajtódnak végre.

If-else utasítás


Az if-else utasítás szinraktikailag a következőképpen néz ki: Az if kulcsszót követi az utasítás argumentuma, ahol vár egy JavaScript kifejezést (maga a feltétel). Ha az első_feltétel feltétel teljesül (true értékkel tér vissza), akkor a {} blokkba definiált első_utasítás utasítás került végrehajtásra (if ág). Ellenkező esetben (amikor false értékkel tér vissza) egy másik {} blokkba definiált második_utasítás utasítás kerül végrehajtásra (else ág). Ezt követően az if után definiált utasításokkal folytatódik maga a program.

if (első_feltétel) {
	első_utasítás
}
[else {
	második_utasítás
}]

Tegyük fel fel azt az esetet, amikor el kell döntenünk egy számról, hogy teljesít-e egy bizonoy kritériumot. Legyen ez a kritérium az, hogy nagyobb vagy kisebb mint 5. Amennyiben teljesül, akkor térjen vissza a A feltétel teljesült! sztringgel, egyébként a következő sztringgel: A feltétel nem teljesült!. Nézzünk rá a lenti példára:

const ellenoriz = (szam) => {
  if (szam > 5) {
    return "A feltétel teljesült!";
  } else {
    return "A feltétel nem teljesült!";
  }
};

console.log(ellenoriz(-10));  
//  "A feltétel nem teljesült!"

switch utasítás


A switch egy olyan többágú kiválasztási lehetőséget megvalósító utasítás, ami egy kifejezés kiértékelését követően igyekszik a kifejezés értékéhez megfelelő elnevezésű esetet keresni. Amennyiben talál egyezőséget, akkor az arra az ágra vonatkozó utasítás hajtódik végre. Szintaktikailag a következőképpen néz ki: A switch kulcsszót követi az utasítás argumentuma, ahol vár egy JavaScript kifejezést (maga a feltétel). Ezt követi a {} blokk, ahova definiálhatjuk az egyes eseteket. Minden egyes eset kezdetét a case kulcsszóval jelezzük. Ezt követi az ághoz társított sztring érték (például ”egyik_eset”). a : kettőspontot követően magát az utasítást definiáljuk. Ha több ágról van szó és az utasítás végrehajtása után ki szeretnénk lépni az egyikből és belépni a soron következőbe, akkor szokás a break kulcsszavat használni. Amennyiben a kifejezés egy olyan értékkel tér vissza, mely egyik ágban sincs lekezelve, akkor egy úgynevezett alapértelmezett ágat is definiálhatunk a default kulcsszóval.

switch (kifejezés){
	case ”egyik_eset”:
		első_utasítás
		break;
	case ”másik_eset”:
		második_utasítás
		break;
	default:
		alapértelmezett_utasítás
}

Tegyük fel fel azt az esetet, amikor azt szeretnénk megtudni egy zöldségről, hogy mennyibe kerül a kilógrammonként az ára. Amennyiben van definiálva olyan nevű zöldség, akkor térjen vissza sztring formában a kilógrammonkénti ára, alapértelmezett esetben a "Nincs ilyen zöldség" sztringgel térjen vissza. Nézzünk rá a lenti példára:

const ellenoriz = (zoldseg) => {
	switch (expr) {
		case 'hagyma':
			return '149 Ft/kg';
			break;
		case 'répa':
			 return '299 Ft/kg';
			break;
		case 'burgonya':
			 return '279 Ft/kg';
			break;
		default:
			return 'Ilyen zöldség nincs a kínálatban!';
	}
};

console.log(ellenoriz('paprika'));  
//  'Ilyen zöldség nincs a kínálatban!'

Ciklusok


A ciklusok olyan definíció szerint olyan utasítások összessége, melyek akár többször is lefutnak egészen addig, míg egy adott feltétel be nem teljesül. A ciklusokat szokás előltesztelős és hátultesztelős ciklusokra csoportosítani. A tesztelés sorrendje meghatározza azt, hogy a feltétel vizsgálata, vagy a ciklusmagban definiált utasítások fussanak le előbb. Vannak ciklusok, melyek egyszer se futnak le, de vannak olyanok, melyek egyszer mindenféleképpen lefutnak.

for ciklus


A for ciklus addig ismétlődik, ameddig az adott feltétel hamissá nem értékelődik ki. Szintaktikailag a következőképpen néz ki: Három paramétert vár az argumentuma: egy az inicializáláshoz (mint kifejezés), egy a léptetéshez és még egy a ciklus feltételhez. Az inicializáló paraméternél az úgynevezett ciklusváltozókat deklarálhatjuk valamilyen kezdő értékkel. Az inkrementáló szekciónál a ciklusváltozók értékeit növelhetjük. Végezetül a feltétel résznél a ciklusváltozókra szabhatunk feltételt. Az inicializálás egyetlen egyszer hajtódik végre. A ciklus addig ismétli az utasítás végrehajtását, ameddig a feltétel igaz marad. Minden egyes alkalommal, amikor az úgynevezett ciklusmagon belüli utasítások maradéktalanul végrehajtódnak, a léptető kifejezést hajtja végre a for ciklus. Vannak olyan esetek (olyan feltételek), amikor maga a ciklus egszer se fut le.

for ([inicializálás]; [feltétel]; [léptetés]){
	ciklusmag - végrehajtandó utasítások
}

Tegyük fel fel azt az esetet, amikor azt szeretnénk elvégezni, hogy végigmegyünk két tetszőleges egész szám közti egész számokon és visszatérünk egy sztringgel, ami bármilyen elválasztó karakter nélkül tartalmazza ezen számokat ömlesztve. Nézzünk rá a lenti példára:

const forciklus = () => {
	var valtozo = "";
	for (let i = 5; i < 15; i++) {
		// Figyelem, itt típuskonverzió következik be!
		valtozo = valtozo + i;
	}
	return valtozo;
}

console.log(forciklus());  
// "567891011121314"

while ciklus


A while ciklus előltesztelős, ami azt jelenti, hogy a feltétel vizsgálat előbb következik be, mint a ciklusmagban definiált utasítások végrehajtása. Egyes terminológiák szerint a while ciklust simán ciklusként szokták emlegetni. Amennyiben a feltétel teljesül, a ciklusmagban lévő utasítások maradék nélkül végrehajtódnak, ezt követően ismét sor kerül a feltételvizsgálatra. Vannak olyan esetek (olyan feltételek), amikor maga a ciklus egszer se fut le. Különösen ugyelnünk kell arra, hogy egy idő után mindenféleképpen hamis legyen a feltétel, különben létrejön az úgynevezett végtelen-ciklus jelenség. Szerencsénkre erre vonatkozólag léteznek ellenintézkedések a böngészőkben és egyes keretrendszerekben. Ha egy ilyen eseményt észlel a fordító, akkor automatikusan leállítódik a ciklus és kidob egy erre vonatkozó hibaüzenetet. Szintaktikailag a következőképpen néz ki: A while kulcsszót követi az utasítás argumentuma, ahol vár egy JavaScript kifejezést (maga a feltétel). Ezt követi a {} blokk, ami a ciklusmagot tartalmazza.

while (feltétel){ 
	ciklusmag - végrehajtandó utasítások 
}

A for ciklus példa mintájára lent található a while ciklusra megírt példa:

const whileciklus = () => {
	var valtozo = "";
	var i = 5;
	while (i < 15) {
		i++;
		// Figyelem, itt típuskonverzió következik be!
		valtozo = valtozo + i;
	}
	return valtozo;
};

console.log(whileciklus());  
// "567891011121314"

do-while ciklus


A do-while ciklus hátultesztelős, ami azt jelenti, hogy a feltétel vizsgálat később következik be, mint a ciklusmagban definiált utasítások végrehajtása. Amennyiben a ciklusmagban lévő utasítások maradék nélkül végre nem hajtódnak, addig nem következhet be a feltételvizsgálat. Tehát a do-while ciklus minimum egyszer lefut, függetlenül attól, hogy mi szerepel a feltételben. Szintaktikailag a következőképpen néz ki: A do kulcsszót követi a {} blokk, ami a ciklusmagot tartalmazza. Ezt követi a while kulcsszó és az utasítás argumentuma, ahol vár egy JavaScript kifejezést (maga a feltétel).

do { ciklusmag - végrehajtandó utasítások } 
while (feltétel)

A for ciklus példa mintájára lent található a do-while ciklusra megírt példa. Azt vehetjük észre, hogy ugyanazon kezdő értékek mellett a számozás 1-gyel eltolódik.

const dowhileciklus = () => {
	var valtozo = "";
	var i = 5;
	do {
		i++;
		// Figyelem, itt típuskonverzió következik be!
		valtozo = valtozo + i;
	}
	while (i < 15)
	return valtozo;
};

console.log(dowhileciklus());  
// "6789101112131415"

Iterátorok


Irodalomjegyzék

[1]
Vue.js core team. Vue.js: The Progressive JavaScript Framework. https://vuejs.org, Legutóbb megtekintve: 2019. április 22.
[2]
Vue.js core team. API, Global Config, directive. https://vuex.vuejs.org/vuex.png, Legutóbb megtekintve: 2019. április 22.
[3]
Vue.js core team. API, Global Config, computed. https://vuejs.org/v2/api/#computed, Legutóbb megtekintve: 2019. április 22.
[4]
Vue.js core team. API, Global Config, components. https://vuejs.org/v2/api/#components, Legutóbb megtekintve: 2019. április 22.
[5]
Vue.js core team. Vue-CLI. https://cli.vuejs.org/guide/creating-a-project.html#vue-create, Legutóbb megtekintve: 2019. április 22.
[6]
Vue.js core team. Vue-router. https://router.vuejs.org/guide/#html, Legutóbb megtekintve: 2019. április 22.
[7]
Vue.js core team. Render Functions and JSX. https://vuejs.org/v2/guide/render-function.html, Legutóbb megtekintve: 2019. április 22.
[8]
w3schools core team. JavaScript RegExp Reference. https://www.w3schools.com/jsref/jsref_obj_regexp.asp, Legutóbb megtekintve: 2019. április 22.
[9]
Google Chrome DevTools core team. Chrome DevTools. https://developers.google.com/web/tools/chrome-devtools, Legutóbb megtekintve: 2019. április 22.
[10]
Node.js core team. Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. https://nodejs.org/en/, Legutóbb megtekintve: 2019. április 22.
[11]
NPMJS core team. NPMJS. https://www.npmjs.com, Legutóbb megtekintve: 2019. április 22.
[12]
ExpressJS core team. Express Fast, unopinionated, minimalist web framework for Node.js. https://expressjs.com, Legutóbb megtekintve: 2019. április 22.
[13]
EJS core team. EJS: Embedded JavaScript templating. https://ejs.co, Legutóbb megtekintve: 2019. április 22.
[14]
Olga Filipova. Learning Vue.js 2. Packt Publishing Ltd., Livery Place, 35 Livery Street, Birmingham, B3 2PB, UK, 3, 2016.
[15]
E.F. Codd. A relational Model of Data for Large Shared Data Banks. Communications of the ACM, 13 (6) 1970.
[16]
Papp Edit. Adatbáziskezelés. Booklands 2000 Könyvkiadó Kft., 5600 Békéscsaba, Dr. Becsey Oszkár u. 42., 1, 2004.
[17]
Nemzeti Szakképzési és Felnőttképzési hivatal. Szoftverfejlesztő tanfolyam. https://www.nive.hu, Legutóbb megtekintve: 2019. április 22.
[18]
JavaScript.info core team. JavaScript.info. https://javascript.info/promise-basics, Legutóbb megtekintve: 2019. április 22.
[19]
Craig Buckler. Sitepoint (JavaScript) - Understanding ES6 Modules. https://www.sitepoint.com/understanding-es6-modules/, Legutóbb megtekintve: 2019. április 22.