Fundamenten

Als we JavaScript, maar ook elke andere programmeertaal, willen bestuderen is het makkelijk ze op te delen in verschillende fundamentele bouwstenen. Die passen dan later weer netjes in elkaar. De belangrijkste worden hier opgesomd en besproken. We gaan ze nodig hebben!

  • Commentaar
  • Variabelen
  • Wiskunde (Gegevens types en wiskundige bewerkingen)
  • Vraagstellingen (Flow-control)
  • Lussen (Itterations)
  • Functies (Functions)
  • Arrays
  • Objecten

Commentaar

Terwijl je je code schrijft, is het handig dat je commentaar schrijft in je code. Dit doe je door de commentaar te laten voorafgaan door // aan het begin van de lijn. JavaScript zal alles wat achter de // staat negeren. Het dient enkel ter verduidelijking van de code die je schrijft. Wat op de volgende lijn staat, telt wel terug mee als code. Normaal gezien schrijf je commentaar vòòr de regel die je uitvoert, maar je kan ook je commentaar schrijven achter de regel, na de punt-komma. Je kan ook een hele reeks lijnen 'in commentaar' zetten. Dit doe je door aan het begin */ te gebruiken en aan het einde /*. Meestal gebruik je dit om een blok code uit te schakelen, zodat die even niet meer meedoet. Bij het testen van je code, kan dit zeer handig zijn.

// Dit is commentaar

/* start van blok-commentaar
dit is ok nog commentaar
einde commentaar */

Variabelen (let)

In alle programma's en alle programmeertalen moeten we gegevens kunnen bijhouden, email adressen, geboortedata, positie van een afbeelding, de huidige score in een spel, ... En dus moeten we variabelen creëren om die gegevens bij te houden.

Een variabele is als een container waarin we dingen kunnen opslaan. We reserveren een beetje geheugen van de computer en geven deze een naam zodat we die kunnen gebruiken tijdens ons script. We creëren de variabele, geven die een naam, zetten er gegevens in en veranderen dit gegeven als dit nodig is.

In JavaScript gebruiken we het volgende statement om een variabele aan te maken of te declareren:

let mijnVariabele;

Je gebruikt het woord let, volledig in kleine letters. Het is een gereserveerd deel van de JavaScript taal. De naam van de variabele kiezen we volledig zelf en die naam zou de gegevens die de variabele zal onthouden, moeten representeren. In dit geval is het mijnVariabele, maar het zou evengoed jaartal of schoenmaat of klantEmail of datum kunnen zijn. Soms kunnen we deze namen ook korter kiezen, zoals a of b of c of ... maar dit doen we enkel tijdens kortere experimenten omdat deze namen niet vertellen wat de inhoud van de variabele zou kunnen zijn.

De naam van de variabele is steeds één woord en kan zowel letters als cijfers bevatten. Spaties zijn niet toegelaten en het mag niet beginnen met een cijfer. Speciale tekens laat je beter achterwege, alhoewel er steeds mensen zijn die graag underscores gebruiken.

Nadat deze lijn let mijnVariabele; wordt uitgevoerd, bestaat er een plaats in het geheugen met die naam, maar er zit nog geen waarde in. JavaScript zegt dan ook dat de waarde undefined is.

We kunnen de variabele een waarde geven tijdens de declaratie:

let mijnVariabele = 12;

Maar we kunnen dit ook in 2 stappen doen:

let mijnVariabele;
mijnVariabele = 12;

Het 'is gelijk aan' teken (=) is een opdracht. Het zegt tegen de browser, "steek de waarde 12 in mijnVariabele"

Gegevenstypes

De waarde die in mijnVariabele is opgeslagen is duidelijk een getal of 'Number'.

let aantalKaarten = 52;

Maar een variabele kan veel meer opslaan dan dat. We kunnen er ook woorden en zinnen in opslaan. In dat geval noemen we het type van gegeven een 'String'. Een String staat steeds tussen dubbele aanhalingstekens ("). Je kan ook enkele aanhalingstekens gebruiken ('), maar je mag ze niet mengen. Let toch even op het laatste voorbeeld. Vermits het enkele aanhalingsteken binnen het dubbele staat, is het toegelaten. Het is tenslotte een leesteken en geen aanduiding voor JavaScript dat dit te verstaan is als een string.

let naam = "Jefke";
let naam2 = "janneke";
let zin = "'s Morgens is het mooi weer.";

Ook kan je in een variabele een booleaanse waarde opslaan. Dit wil zeggen dat je kiest uit slechts twee mogelijkheden; true of false. We moeten deze woorden niet omringen met aanhalingstekens.

let lichtAan = true;
let hetRegent = false;

Boodschappen naar de console sturen

We gebruikten tot hiertoe de alert-box omdat we een manier nodig hadden om een boodschap van een resultaat dat JavaScript voor ons gegenereerd heeft, te kunnen zien. Maar dat is niet handig, zeker niet als we er meerdere nodig hebben. Maar gelukkig is er de web-inspector met de console, vooradig in elke browser. vb:

alert("Hello, world!");
// wordt dan
console.log("Hello, world!");

Alle resultaten kunnen we nu bekijken in de console. Natuurlijk wordt het dan ook mogelijk om de inhoud van variabelen op te vragen. vb:

let a = 2;
console.log((a *= 2));

In de console verschijnt de waarde 4, die de uitkomst is van de berekening tussen de ronde haken van het 'console.log()' statement. Als we meerdere waarden in de 'console.log()' willen steken, kunnen we die scheiden door een komma. vb:

let a = 2;
let b = 4;
console.log(a, b);

In de console krijgen we nu de waarden van a en b te zien op dezelfde lijn, gescheiden door een spatie.

Het grote verschil met dit statement tegenover de alert-box, is dat de gebruiker van de website deze meldingen nooit te zien krijgt, tenzij hij of zij ook een console venster hebben openstaan in de browser die ze gebruiken. Het dient dus enkel voor ons, om te kunnen ontwikkelen, om fouten te kunnen opsporen, om te kunnen testen, ...

Een log boodschap is slechts een boodschap. Dit kan een goede of een slechte of een informatieve boodschap zijn. We kunnen de boodschappen een beetje aankleden zodat ze visueel zichtbaarder worden. Afhankelijk van het soort boodschap kunnen we de volgende mogelijkheden gebruiken.

console.info();
console.warn();
console.debug();
console.error();

console.time(); // laten samen toe om de verstreken tijd
console.timeEnd(); // te meten tussen de twee statements.

De boodschap blijft steeds dezelfde, enkel de voorstelling ervan veranderd. console.log() is een zeer belangrijk instrument in het beter verstaanbaar maken van onze code.

Wiskundige bewerkingen

Werken met operators Bijna alle statements die we zullen gaan schrijven, zullen bewerkingen bevatten zoals optellen of aftrekken, ... Om deze bewerkingen te kunnen uitvoeren, hebben we bewerkers of 'operators' nodig. Dat is een moeilijk woord voor de tekens die we gaan gebruiken om bewerkingen uit te voeren op onze waarden.

Rekenkundige operatoren

De meest voorkomende zijn waarschijnlijk wel de rekenkundige:

+ optellen

- aftrekken

* vermenigvuldigen

/ delen

We zullen deze meestal samen zien met het = teken. Formeel heet dit het toewijzingsteken of 'assignment operator'. Als we dit teken tegenkomen dan bedoelt dit letterlijk dat dat wat aan de rechterzijde wordt uitgerekend en wordt 'toegewezen' aan dat wat aan de linkerzijde staat. Met andere woorde, het is echt een commando dat zegt; los dit op en wijs het toe. vb:

a = 1 + 2;

Wat we ook heel dikwijls zien is dat dezelfde variabele wordt gebruikt zowel links als rechts van het '='. vb:

score = score + 10;

Wat men hier wil bereiken is dat men de huidige waarde van de 'score' neemt, er een waarde 10 bij telt en dat dan terug in 'score' steekt.

Deze methode van bijtellen gebeurt zoveel dat er een kortere notatie voor bestaat.

score += 10;

We mogen geen spatie schrijven tussen '+' en '='. Als er een korte notatie bestaat voor optellen, bestaat die natuurlijk ook voor aftrekken.

score -= 2;

En natuurlijk bestaat deze korte notatie ook voor vermenigvuldigen en delen.

score *= 10;
score /= 2;

Als we echter optellen of aftrekken met 1, dan kan er nog korter geschreven worden:

score++;
score--;

Vermenigvuldigen of delen heeft geen zin omdat vermenigvuldigen of delen door 1 geen verandering brengt.

Natuurlijk worden de rekenkundige regels van volgorde van bewerking gerespecteerd in JavaScript. Eerst vermenigvuldigen en delen, daarna optellen en aftrekken.

a = 5 + 5 * 10;
a = (5 + 5) * 10;

De uitkomst van deze formule is niet 100 maar 55. Als je dit niet begrijpt, is het tijd voor de bijles wiskunde. Als je echter toch wil dat het 100 is, zal je ronde haakjes moeten gebruiken.

Modulus of restwaarde (%)

Deze operator, die we voorstellen als een %-teken, berekent de restwaarde van een deling. Stel we willen weten of we een schrikkeljaar hebben. Een simpele benadering is door het jaartal te delen door 4 en kijken of we restwaarde hebben. Als we een restwaarde hebben dan hebben we geen schrikkeljaar. Als de restwaarde gelijk is aan 0 dan hebben we wel een schrikkeljaar.

let jaartal = 2013;
let schrikkeljaar = jaartal % 4;
if (schrikkeljaar == 0) {
	alert("dit is een schrikkeljaar");
} else {
	alert("dit is geen schrikkeljaar");
}

Als we deze code uitvoeren, dan krijgen we een melding dat dit geen schrikkeljaar is. Dit komt omdat de restwaarde van 2013/4 gelijk is aan 1. De conditie is dus niet waar en het tweede codeblok zal uitgevoerd worden. Als het jaartal echter 2016 is, dan zal de restwaarde 0 zijn en wordt het eerste code blok uitgevoerd.

Concatenatie

Als we twee getallen willen optellen, dan gebruiken we de + operator. Dit kennen we, dit zijn we gewoon. Maar wat gebeurt er als we het volgende doen?

let a = "5";
let b = "6";
console.log(a + b);

Wat zal er verschijnen in de console? Zal er 11 komen te staan, of iets anders. Zo ja, waarom? We merken op dat er in de variabelen a en b twee Strings zitten. Dus als we de formule tussen de haakjes van het console.log() statement herschrijven, dan staat er:

"5" + "6";

We merken dat er rond de + operator in feite twee Strings staan en geen getallen. Op dat moment zal de + operator geen optelling meer doen, maar een samenvoeging of concatenatie. Dit wil zeggen dat de twee Strings aan elkaar gekleefd zullen worden. Het resultaat van deze bewerking is dan ook: "56". Daarom is het belangrijk dat je goed weet welke soort waarde (String of nummer) er in je variabele staat vooraleer je er mee gaat rekenen.

Maar wat gebeurt er als één van de twee waarden en getal is, en de andere een String, terwijl je deze wil optellen of samenvoegen. Wel, als één van beide termen rond een + teken een String is, zal het altijd over samenvoegen gaan. Enkel als beide termen nummers zijn, zal er een optelling plaatsvinden.

NaN (Not a Number)

Maar wat gebeurt er met de andere gekende operatoren ( - * / % ) als één of beide termen een String bevat. Eigenlijk doen we iets wat onmogelijk is. Je hebt nog nooit een woord door een ander gedeeld.

let a = "Dit is een String";
let b = 5;
console.log(a * b);

JavaScript zal dit oplossen door een speciale waarde terug te geven: NaN oftewel 'Not a Number'. Met andere woorden, het resultaat is geen nummer, maar ook geen String, ook geen Array, maar ook geen error. JavaScript gaat wel verder, maar met NaN waar je verder niets mee kan aanvangen. Je kan er niet verder mee rekenen. Dus moet je eigenlijk voorzien dat dit niet gebeurt. vb:

In een formulier moet een gebruiker een leeftijd invullen. Hij zou een getal moeten invullen, en vermits alle invulvelden in een HTML-formulier een String terug geven, moeten we dat daarna omzetten, al dan niet tijdens een berekening naar een getal (Number). Als de gebruiker echter "abc" invult, dan werkt ons formulier niet meer. We moeten de waarden die uit onze velden komen valideren, nakijken of het type van waarden die we uit de velden krijgen, juist zijn. Om het voorbeeld te vergemakkelijken, vullen we de variable input met een String.

let input = "55"; // zou "abc" kunnen zijn
let myNumber = Number(input);

De tweede regel zal er voor zorgen dat de waarde van de String zal omgezet worden naar een getal. Als er echter "abc" in staat, zal de omzetting NaN genereren omdat er geen nummerieke waarde is.

We kunnen nu nagaan of myNumber NaN bevat of niet.

if (isNaN(myNumber)) {
	console.log("This is NOT a Number");
}

Als de variabele input werkelijk "abc" had bevat, dan is de conditie van het if-statement waar en zal de console tonen dat er geen nummer is. Het isNaN-statement kijkt of de waarde die het meegegeven krijgt een NaN is.

Maar wat interessanter is, is dat we weten dat het wel een nummer is. We kunnen het if-statement uitbreiden met een else deel, maar als we het direct willen weten, kunnen we het volgende doen:

if (!isNaN(myNumber)) {
	console.log("This IS a Number!!");
}

Door het uitroepteken er voor te zetten in de conditie, vragen we of myNumber niet, niet een getal is. (NOT isNaN)

Het Math object

Iets dat veel wordt gebruikt en erg handig is, is het Math object. Dit object zit vol met wiskundige functies die we veel gebruiken. Stel dat we het getal 200,6 willen afronden, dan

myNumber = 200.6;
let myRoundedNumber = Math.round(myNumber);
console.log("myRoundedNumber"); // --> 201

Zo hebben we ook Math.PI, Math.random(), Math.sqrt() (vierkantswortel), Math.pow() (machtsverheffing), ...

Logische operatoren (&& en ||)

De twee belangrijkste logische operatoren zijn de 'en' en de 'of'. Deze zijn beter gekend als de AND en de OR. Deze kunnen we handig gebruiken om samengestelde vragen te maken. Een voorbeeld: We willen gaan nakijken of a == b AND c == d. Hiervoor gebruiken we &&

let a = 1;
let b = 1;
let c = 2;
let d = 3;
if(a==b && c==d){.....}
// deze conditie is niet waar want c is niet gelijk aan d

Als we echter willen nakijken of a == b OR c == d dan gebruiken we ||

if(a==b || c==d){.....}
// deze conditie is waar want a is gelijk aan b

Vraagstellingen en condities (if)

In JavaScript of in eender welke andere taal, moeten we vragen kunnen stellen. We moeten de mogelijkheid hebben om code uit te voeren in bepaalde omstandigheden, in plaats van altijd. In veel talen en dus ook in JavaScript begint dit met het if-statement.

if (conditie) { uit te voeren code }

We hebben het woord if, daarna volgt de conditie, de vraag, tussen ronde haakjes. Tussen de accolades staat de uit te voeren code als de conditie of vraag 'waar' is. Als de conditie echter niet waar is, zal de code tussen de accolades 'niet' uitgevoerd worden.

Het maakt niet uit wat er in de conditie wordt gevraagd en hoe het wordt gevraagd, maar het antwoord moet steeds 'waar' of 'niet waar' zijn, 'true' of 'false'. Er zijn geen andere antwoorden mogelijk. Er is geen 'misschien' of 'soms'. Dus moet je je vragen, je condities ook zo formuleren zodat je deze antwoorden kan krijgen. Deze kan je het best bereiken door te vragen of iets kleiner, groter of gelijk aan is. Je kan ook vragen of iets verschillend is. Dit zijn de gebruikte operatoren.

  • < kleiner dan
  • > groter dan
  • >= groter dan of gelijk aan
  • <= kleiner dan of gelijk aan
  • == gelijk aan elkaar (let op! -> dubbel 'gelijk aan' teken)
  • != verschillende van elkaar

De uit te voeren code, wat honderden lijnen kan bevatten, staat steeds tussen accolades. We noemen deze code: een code blok. Dit is dan ook wat accolades doen. Ze groeperen secties code in een blok. Een voorbeeld:

let aantal = 500;
if (aantal < 1000) {
	alert("aantal is minder dan 1000");
}

Als we dit uitvoeren zullen we zien dat we een alert-box krijgen met daarin de tekst dat de variabele aantal een waarde bevat die kleiner is dan 1000. Moest aantal een waarde bevatten die groter is dan 1000, dan kregen we die alert-box niet. Het code blok wordt overgeslagen want de conditie is 'niet waar' of 'false'.

Als we echter willen dat er toch iets gebeurt als aantal groter is dan 1000, dan kunnen we de code uitbreiden naar het volgende:

let aantal = 500;
if (aantal < 1000) {
	// wordt uitgevoerd als de conditie waar of true is
	alert("aantal is minder dan 1000");
} else {
	// wordt uitgevoerd als de conditie niet waar of false is
	alert("aantal is meer dan 1000");
}

Als de conditie 'waar' of 'true' is dan wordt het eerste code blok uitgevoerd en het tweede overgeslagen. Als de conditie echter 'niet waar' of 'false' is, dan wordt het eerste code blok overgeslagen en het tweede uitgevoerd.

Wat het antwoord ook is, Javascript zal steeds verder gaan na het tweede code blok.

We kunnen code blokken en if-statements ook nesten. Dit wil zeggen: in elkaar steken. We kennen dit reeds uit HTML waar je de nodige div's in elkaar kan steken. We breiden het vorige voorbeeld verder uit:

let aantal = 500;
if (aantal < 1000) {
	alert("aantal is minder dan 1000");
} else {
	if (aantal == 1000) {
		alert("aantal is gelijk aan 1000");
	} else {
		alert("aantal is meer dan 1000");
	}
}

Je ziet dat er nu drie mogelijke antwoorden zijn afhankelijk van de waarde die in aantal zit. Merk ook op dat we steeds slechts één antwoord krijgen. Op deze manier kunnen we steeds dieper en dieper doorvragen. Maak echter geen te diepe nesten, de code wordt niet alleen moeilijker leesbaar, ze zal ook minder makkelijk aan te passen zijn. Merk ook op waar de punt-komma's staan, welke zinnen we afsluiten en welke code blokken niet.

Werken met lussen (while, for)

Voor we het weten zullen we merken dat we steeds weer de zelfde code blijven herhalen om dingen die steeds opnieuw moeten voorkomen te doen herhalen. Of het nu over het grijpen gaat van elke paragraaf in een pagina zodat we de achtergrondkleur kunnen veranderen, of alles verbergen van een menu systeem, of alle afbeeldingen een omlijsting geven, of alle formulier velden valideren, dan merken we dat we heel dikwijls hetzelfde aan het herhalen zijn.

In plaats van alle regels opnieuw te schrijven, is het handiger om dit slechts één keer te schrijven en ze dan te laten herhalen zo dikwijls je ze nodig hebt door te zeggen; herhaal dit 5 keer, herhaal dat 5000 keer of blijf dit herhalen totdat je de opdracht krijgt te stoppen. We kunnen dit doen aan de hand van lussen. In het Engels noemt men dit 'loops' of 'iterations'.

Het belangrijkste met eender welke lus, is niet om te lussen, das makkelijk, maar om er mee te stoppen op een wel bepaald moment. Als we iets 200 keer moeten herhalen, wie houdt dan de telling daarvan in het oog? Door wie en hoe wordt er bepaald te stoppen? Hoe schrijven we een eenvoudige lus? vb:

let teller = 1;
while (teller < 10) {
	console.log(teller);
}

Het 'while' zal de code die tussen de accolades staat blijven herhalen zolang de conditie 'waar' is. Merk op dat dit de zelfde schrijfwijze kent als het 'if'-statement.

Uit dit voorbeeld kunnen we afleiden dat de code die tussen de accolades staat zich zal blijven herhalen, omdat de conditie die wordt aangegeven altijd waar is. Er is trouwens niets dat er voor zorgt dat de waarde van teller groter wordt naargelang de tijd verstrijkt. We hebben nu een oneindige lus (infinite loop) geschreven en dat is een slecht ding.

Om teller toch te vergroten terwijl de lus loopt, passen we de code als volgt aan.

let teller = 1;
while (teller < 10) {
	console.log(teller);
	teller++;
}

Op deze manier zullen we de waarde in teller bij elke doorgang van de lus vermeerderen met 1. Op die manier zal teller ooit wel 10 worden. De lus zal zich blijven herhalen zolang teller kleiner is dan 10. Op dat moment is de conditie niet meer waar en zal de code verder gaan met de eventuele code na de sluitende accolade van de 'while'-lus.

In alle lussen zie je steeds weer dezelfde informatie verschijnen. Er is altijd een variabele die de stand van de telling bijhoudt. Er is altijd een conditie die nakijkt of we reeds een einde hebben bereikt. En er is altijd iets dat zegt met hoeveel er moet opgeteld worden (meestal met 1) bij elke iteratie van de lus, elke keer we door de lus lopen. Een variabelnaam die heel veel gebruikt wordt, ook in ander programmeertalen, is de naam i, wat kort is en voor 'iteratie' of 'index' staat. We kunnen al deze gegevens makkelijk meegeven met een 'for'-lus. Deze lus is trouwens veel voorkomend.

for (let i = 0; i < 10; i++) {
	// uit te voeren code
}

We doen inderdaad drie dingen na het 'for'-statement. We maken een variabele 'i' en geven deze een startwaarde, we geven een conditie tot waar die moet tellen, en we geven een manier mee om op te tellen, in dit geval, + 1.

Functies (function)

Als we steeds meer en meer code beginnen schrijven, willen we er zeker van zijn dat het geen rommeltje wordt of moeilijk te lezen wordt, of nog erger, moeilijk te verbeteren wordt. Dus gaan we, zoals in bijna alle programmeertalen, de code opdelen in kleinere handelbare stukjes die we kunnen hergebruiken.

Een functie is een herbruikbare blok code.

Het enige dat we moeten doen, is de code omringen door accolades toe te voegen en die blokken een naam geven. Dit betekent dat we functies aan het maken zijn.

Het kiezen van de naam, moeten we zelf doen. Omdat een functie iets doet, geven we ze meestal een werkwoord mee: bereken, omzetten, uitvoeren, tonen, ... De regels van de naamgeving zijn dezelfde als die voor variabelen, die we trouwens meestal een eigennaam meegaven: huisnummer, schoenmaat, huidigJaar, ...

function myFunction() {
	console.log("We are in a function");
	// loops, if-statements, anything...
}

We geven aan door het woord function dat we een functie willen maken of definiëren. Daarna volgt de naam die we de functie willen geven. In het voorbeeld hierboven is dat myFunction.

Daarna volgen er twee ronde haken. Dit is de plaats waar we straks parameters kunnen meegeven die de functie moet gaan verwerken. Op dit moment zijn er nog geen parameters meegegeven, maar de ronde haakjes moeten er wel staan.

Daarna vinden we de accolades terug, waarin de code staat die moet uitgevoerd worden als we de functie oproepen (calling the function, of functioncall). In dit voorbeeld staat er maar één regel code.

Als we bovenstaand script uitvoeren, gebeurt er niets, alsof er geen code bestaat. We moeten de functie oproepen:

myFunction();

Vanaf het moment dat we dit doen, zal alle code, die in de functie omschreven zit, uitgevoerd worden. Een groot voordeel is dat we dit zoveel mogen doen als we willen. Waar de functies in je code staan speelt geen rol, omdat de browser eerst je Javascript code snel doorneemt vooraleer hij aan de uitvoering ervan begint en uitzoekt welke functies er zijn. Het is echter de gewoonte om eerst je functies te definiëren voordat je ze oproept.

Het is veelvoorkomend om functies te schrijven die parameters kunnen verwerken, die informatie verwachten als je ze oproept. Om deze functies te definiëren kunnen we het volgende doen:

function myFunction(x) {
	console.log(x);
}
myFunction(12);
myFunction(245);

Bij het definiëren geven we tussen de ronde haken een variabelnaam waarin we een waarde willen ontvangen. Merk op dat we het woord 'let' hier niet moeten schrijven. Deze variabele kunnen we dan verder gaan gebruiken in onze functie. Als we meer dan één waarde willen meegeven, gebruiken we een komma om deze te scheiden:

function bereken(a, b) {
	console.log(a * a + b);
}
bereken(12, 34);
bereken(4, 6);

We kunnen niet alleen waarden meegeven aan een functie, we kunnen er ook waarden uit terug krijgen. Je kan dit alletwee doen, of één van de twee, of helemaal niet. Dit hangt allemaal af van de soort functie die je wil gaan gebruiken.

Als ik informatie uit mijn functie wil zien verschijnen, dan gebruiken we het woord return met daarachter de waarde die we terug willen geven aan onze code. Op die manier kan er dan verder in de code worden gerekend met de waarde die uit de functie komt. Meestal doe je dit om makkelijk een berekening uit te voeren die zeer veel voorkomt, zoals het omzetten van radialen naar graden of omgekeerd, of het berekenen van de discriminant van een vierkantsvergelijking. De functioncall zal er ook anders gaan uitzien. We krijgen namelijk een resultaat van de functie die we moeten opslaan in een variabele:

function bereken(a, b) {
	let resultaat = a * a - b;
	return resultaat;
}
let berekening = bereken(6, 9);
console.log(berekening);

De 'scope' van een variabele

Dit betekent waar je variabele zichtbaar is. Tot waar is de variabele bruikbaar, geldig, bestaand, ...

Om dit te verduidelijken, gebruiken we onderstaand voorbeeld:

function simple() {
	let a = 500;
	console.log(a);
}
simple();

Als we deze functie zouden uitvoeren, dan merken we dat er in de console inderdaad de waarde die in variabele a zit, zal getoond worden. De variabele kan op deze moment gebruikt worden. Als we echter de regel met console.log(a) buiten de accolades van de functie zetten, zullen we merken dat er undefined in de console zal tevoorschijn komen, alsof de variabele a niet bestaat en niet gedeclareerd is.

function simple() {
	let a = 500;
}
simple();
console.log(a);

De variabele a die we tussen de accolades van de functie hebben aangemaakt, heet een lokale variabele (local). Die bestaat enkel binnen de accolades van de functie en is ook enkel daar geldig. Buiten de functie bestaat deze variabele niet meer, alsof die wordt vergeten bij de sluitende accolade van de functie.

Als we echter een variabele nodig hebben die ook buiten de functie moet bestaan, dan hebben we een globale variabele (global) nodig. Deze maken we automatisch als we deze buiten een functie definiëren. Deze globale variabele kan dan ook binnen eender welke functie gebruikt worden.

Samengevat:

  • binnen de functie definiëren --> local
  • buiten de functie definiëren --> global

Nog een voorbeeld:

let getal = 10; // Dit is een globale variabele
function teller() {
	for (let i = 0; i < getal; i++) {
		console.log(i, getal);
	}
}
teller();
console.log(i, getal); // 'i' is duidelijk een locale variabele van
// de functie teller