Variabelen en datatypes in JavaScript. Deel 3 van de JavaScript-cursus van Beginner tot Gevorderd in 10 blogposts

Dit is deel 3 van de blogpostserie over JavaScript die je zal helpen het onderwerp variabelen en datatypes in JavaScript te verkennen. Aan het einde van deze serie weet je alle basisprincipes die je moet kennen om te beginnen met coderen in JavaScript. Zonder verder oponthoud, laten we beginnen met de derde tutorial.

Variabelen en datatypes in JavaScript – inhoudsopgave:

1. Variabelen
2. Basisdatatypes in JavaScript

In deze blogpost gaan we verder waar we zijn gebleven bij de tweede blogpost. Op dit moment zou je je Google Chrome-browser open moeten hebben en meer specifiek je JavaScript-console. Als je ze om de een of andere reden hebt gesloten, is dit een goed moment om ze weer te openen.

Als je een Mac gebruikt, is de sneltoets om de console te openen “Option + Command + J”, nadat je Chrome hebt geopend. Als je een Windows-apparaat gebruikt, kun je de sneltoets “Control + Shift + J” gebruiken om de JavaScript-console te openen, zodra je Chrome opent. Of je kunt ook naar het menu bovenaan gaan en naar Weergave -> Ontwikkelaar -> JavaScript-console gaan.

Variabelen

Variabelen in JavaScript of een andere programmeertaal zijn extreem gebruikelijk. En dat is met een goede reden. Variabelen hebben een zeer kritieke rol in programmeren. In een notendop stellen variabelen je in staat om gegevens op te slaan, de gegevens te verplaatsen, te wijzigen, bij te werken of te verwijderen in je programma. Het is zo’n belangrijk concept dat er 3 manieren zijn om variabelen te creëren. De programmeertaal voor het creëren van variabelen wordt “variabelen declareren” genoemd, wat in feite betekent dat we een variabele in het geheugen van de computer declareren.

Om de variabelen te creëren, zullen we een van de 3 sleutelwoorden gebruiken en dat zijn: “var”, “let” en “const”. Een van de eerste dingen die je moet weten over deze 3 sleutelwoorden is dat tot 2015 alleen het sleutelwoord “var” werd gebruikt en de sleutelwoorden “let” en “const” werden geïntroduceerd met een JavaScript-standaard genaamd ES6 of ES2015.

Als je geen idee hebt wat ES6 of ES2015 is, hier is wat je erover moet weten. Toen JavaScript voor het eerst uitkwam, implementeerden verschillende bedrijven verschillende versies van JavaScript, en er moest een standaard zijn, zodat je code voorspelbaar en betrouwbaar kon draaien in alle grote browsers. Een organisatie genaamd ECMA (European Computer Manufacturing Association) kwam met een set JavaScript-standaarden die browsers moesten implementeren. Zodat zolang je die standaarden volgt bij het schrijven van JavaScript, je code voorspelbaar zou draaien volgens die standaarden. Deze standaard wordt EcmaScript genoemd en ze hebben sinds 1997 de bijgewerkte standaarden vrijgegeven. En sinds 2015 brengen ze deze standaarden jaarlijks uit, en daarom wordt de laatst vrijgegeven standaard ES2021 genoemd op het moment van het schrijven van deze blogpost.

Maar niet alle releases zijn hetzelfde, sommige versieverschillen zijn niet zo groot, terwijl sommige behoorlijk grote veranderingen in de taal introduceren. De laatste grote veranderingen vonden plaats met ES2015, ook wel ES6 genoemd, omdat het de release was van versie zes van de ECMAScript-standaardisatie. Een van de significante veranderingen kwam bij de variabele declaraties.

Voor ES6 werd alleen het sleutelwoord “var” gebruikt en dat was de enige manier om variabelen te declareren, vandaar de naam “var”. Het var-sleutelwoord kwam met flexibiliteit die ongewenste problemen kon veroorzaken. Omdat het aanzienlijk flexibel in gebruik was, was het gemakkelijker om fouten te maken met variabelen als je minder voorzichtig was dan je zou moeten zijn. Bijvoorbeeld, als je een variabele genaamd “user1” declareerde, kun je een variabele genaamd user1 niet opnieuw declareren met de nieuwe “let” en “const” sleutelwoorden, maar je kon dat wel doen met het “var” sleutelwoord. En als je vergeet dat je al een user1 in je programma hebt, de tweede keer dat je de user1 declareert met de informatie van een andere gebruiker, zou je de informatie van de eerste gebruiker overschrijven, wat effectief de informatie van de eerste gebruiker zou verwijderen.

// dit kan verwarring veroorzaken
var user1 = "John";
var user1 = "Jack";
// als je hetzelfde probeert te doen 
// met let of const krijg je een fout
let user1 = "John";
let user1 = "Jack";
// evenzo krijg je ook een fout
// als je hetzelfde probeert te doen met het const-sleutelwoord
const user1 = "John";
const user1 = "Jack";

Maar het is niet zo dat je het “var” sleutelwoord nergens zult zien, je zult het zeker zien, vooral in enkele beginner JavaScript-cursussen. Vooral als ze een paar jaar oud zijn, zijn er veel tutorials die je nog steeds de oude manier van schrijven in JavaScript laten zien. Maar de realiteit is dat het gewoon niet de beste praktijk is om dat nog te gebruiken. In plaats daarvan is de beste praktijk om “let” of “const” sleutelwoorden te gebruiken bij het declareren van variabelen, afhankelijk van je behoeften. Maar over welke behoeften hebben we het? In een notendop, als je van plan bent om de waarde binnen een variabele te wijzigen, wil je het “let” sleutelwoord gebruiken, als je weet dat je de waarde in een variabele niet zult wijzigen, wil je in plaats daarvan “const” gebruiken. Laten we enkele voorbeelden bekijken van variabele declaraties met zowel let als const.

// we kunnen "let" gebruiken wanneer we het spelniveau van de gebruiker willen bijhouden
// omdat we weten dat het zal veranderen
let gameLevel = 1;
gameLevel = 2;
gameLevel = 3;
// we kunnen het "const" sleutelwoord gebruiken bij het declareren van de gebruikers-ID
// omdat we weten dat we het niet zullen veranderen
const userId = 1010101999;

Als je ook opmerkte uit de bovenstaande code, met de nieuwste beste praktijken, schrijven we de declarerende sleutelwoorden maar één keer, en dat doen we wanneer we de variabele voor het eerst declareren. Wanneer we later de waarde binnen de variabele willen wijzigen, gebruiken we geen enkel sleutelwoord voor de variabelenaam.

Wanneer we de gegevens willen benaderen die deze variabelen of constanten bevatten, kunnen we eenvoudig hun naam gebruiken. Bijvoorbeeld, als we de gebruiker hun spelniveau en hun gebruikers-ID willen tonen, doen we dat met de volgende code:

// we kunnen de userID aan het einde van de zin toevoegen met een plusteken
// we zullen dit later in de tutorial uitleggen
alert("Je gebruikers-ID is: " + userId);
// we kunnen de gebruiker ook hun spelniveau tonen zoals volgt
alert("Je huidige spelniveau is: " + gameLevel);
// als alternatief kunnen we direct de 
// inhoud van de variabelen weergeven door ze in een alert te tonen
alert(userId);
alert(gameLevel);

Het uitvoeren van de laatste twee codeblokken zou de volgende uitvoer opleveren:

Hoe je variabelen te benoemen?

Bij het benoemen van je variabelen zijn er bepaalde regels en conventies waar je rekening mee moet houden. De eerste overweging is welke tekens je kunt gebruiken om je variabelen te benoemen? Kunnen ze beginnen of eindigen met een nummer? Is er een algemene ongeschreven waarheid over het benoemen van je variabelen? Laten we dat allemaal en meer beantwoorden.

Verschillende programmeertalen hebben verschillende conventies voor het benoemen van variabelen. In JavaScript is de conventie om ze te benoemen met wat “camel casing” wordt genoemd, en gaat als volgt. Als de variabelenaam slechts één woord heeft, schrijf je dat woord in kleine letters. Als er meerdere woorden in de variabelenaam staan, schrijf je het eerste woord in kleine letters en kapitaliseer je alle volgende woorden en schrijf je ze zonder spaties of andere tekens. Bijvoorbeeld, als we een spel maken, kunnen we de variabelen als volgt benoemen:

// een enkel woord variabele
let strength = 50;
// een beschrijvende naam die meerdere woorden bevat
let numberOfArrowsLeft = 145;

Bovenop het gebruik van alfabetische tekens, kunnen we ook cijfers, het dollarteken en het underscore-teken in de variabelen gebruiken. Het is belangrijk op te merken dat je de variabelenaam niet met een nummer kunt laten beginnen, maar je kunt deze wel met een nummer laten eindigen.

let some$$ = 100;
let another_$ = 20;
let car1 = "Tesla";

Let op dat, alleen omdat het mogelijk is, we onze variabelen niet met onduidelijke namen of met symbolen willen benoemen. En dat is een ander onderwerp op zich. Bij het benoemen van variabelen is de conventie om duidelijke en beschrijvende namen te hebben. Bijvoorbeeld, als we een variabele willen benoemen om aan te geven hoeveel pijlen er nog in de tas van een boogschutter zitten, moeten we een beschrijvende naam gebruiken zoals de naam die we in het bovenstaande voorbeeld hebben gebruikt. Als we gewoon zouden gebruiken:

let x = 145;

Deze naam zou ons niets vertellen over welke waarde het bevat. En zelfs een paar dagen na het schrijven van deze code zouden we de omliggende code moeten lezen om te begrijpen wat die variabele zou kunnen betekenen. Daarom is het, zowel voor je eigen duidelijkheid bij het schrijven van de code, als voor je toekomstige zelf die de code misschien herzien, echt belangrijk dat je gewend raakt om je variabelen op een duidelijke en beschrijvende manier te benoemen. Dit zal ook nog belangrijker worden wanneer je begint samen te werken met andere mensen en hen je code laat zien.

Op dit punt denk je misschien: Het is geweldig dat we de gegevens kunnen verplaatsen en zelfs kunnen wijzigen met behulp van variabelen. Maar over welke gegevens hebben we het hier? Waarom hebben we sommige delen tussen aanhalingstekens gezet en sommige delen niet? Om dat allemaal en meer te beantwoorden, laten we de basisdatatypes in JavaScript bekijken.

Basisdatatypes in JavaScript

Verschillende datatypes zijn goed in het uitvoeren van verschillende taken. In deze tutorial over basisdatatypes in JavaScript zullen we de meest basale 3 datatypes bekijken die vaak in JavaScript worden gebruikt. Later in de serie leren we over andere datatypes in JavaScript. Zodra je deze eerste 3 basisdatatypes leert, zal het veel gemakkelijker zijn om de andere datatypes te leren. De 3 datatypes die we in deze tutorial zullen zien zijn: Strings, Numbers en Booleans. Zonder verder oponthoud, laten we beginnen met de eerste.

Strings

Als je de tutorial vanaf het begin hebt gevolgd, heb je al met het string datatype gewerkt! Toen we een alert schreven die zei “Hallo, Wereld!” gebruikten we het string datatype om de tekst die we schreven op te slaan. In JavaScript zijn er 3 manieren om strings weer te geven. De eerste is om je tekst met dubbele aanhalingstekens te omringen. De tweede is om je tekst met enkele aanhalingstekens te omringen. En de derde is om je tekst met backticks te omringen. Alle drie zien er als volgt uit:

const string1 = "Wat tekst hier.";
const string2 = 'Wat tekst hier.';
const string3 = `Wat tekst hier.`;

Zoals je kunt zien, lijkt de versie met de “backticks” behoorlijk op de enkele aanhalingstekens, maar het is iets informeler. Het gebruik van backticks om strings te maken is een functie die is geïntroduceerd met ES6, om het gemakkelijker te maken om met tekstuele gegevens te werken. Het biedt meerdere voordelen ten opzichte van de andere twee. Volgens de conventie zie je misschien dat ofwel de dubbele aanhalingstekens of de backticks vaker worden gebruikt. Je kunt de backticks vinden op de linkertoets van nummer 1 op je toetsenbord.

Het gebruik van dubbele aanhalingstekens lijkt bekender en is gemakkelijker te begrijpen bij de eerste blik, maar backticks bieden over het algemeen meer voordelen. In dit voorbeeld functioneren alle 3 op dezelfde manier, aangezien het een eenvoudig voorbeeld is. Om alle drie tegelijkertijd weer te geven, of zelfs op dezelfde regel, kunnen we hun namen schrijven en het plusteken ertussen gebruiken, op een manier dat we de strings aan elkaar toevoegen.

alert(string1 + string2 + string3);[/code>

<img src="https://firmbee.com/wp-content/uploads/f-1-800x419.png" alt="variables_and_data_types_in_javascript" width="800" height="419" class="alignnone size-medium wp-image-18937 img-fluid" /><p>Zoals je kunt zien, worden alle 3 direct na elkaar weergegeven. Dit komt omdat we de interpreter gewoon hebben verteld om de strings aan elkaar toe te voegen. Als we spaties tussen hen willen toevoegen, kunnen we die ruimte altijd toevoegen met een andere string.<p>
[code lang="js"]alert(string1 + &quot; &quot; + string2 + &quot; &quot; + string3);

We kunnen ook het datatype van een variabele controleren door “typeof” ervoor te schrijven. Bijvoorbeeld:

alert(typeof string1);

Nummers

Wanneer we met nummers in JavaScript werken, gebruiken we over het algemeen het “Number” datatype. Het is de eenvoudigste om mee te beginnen en heeft bijna geen leercurve.

Wanneer we een nummer typen, wordt het weergegeven in het nummer type. En als we dat nummer aan een variabele of constante toewijzen, hebben ze ook het datatype nummer.

let someNumber = 5;
const score = 90;
alert(typeof someNumber);
alert(typeof score);

Bovenop reguliere nummers hebben we, biedt JavaScript ook andere functies die ons kunnen helpen om veiliger en voorspelbaarder code te schrijven. Bijvoorbeeld, in JavaScript kunnen we iets hebben dat “Infinity” wordt genoemd, en het is precies wat het klinkt. Bovendien kan het positieve oneindigheid en negatieve oneindigheid zijn. Laten we zien hoe dat eruit ziet met een voorbeeld.

// we kunnen door nul delen en dat geeft geen fout
// in plaats daarvan retourneert het Inifinity
alert(13 / 0);

// evenzo kunnen we ook negatieve oneindigheid krijgen
alert(-25 / 0);

Zoals je al met een paar voorbeelden hebt gezien, kunnen we ook rekenkundige bewerkingen met nummers uitvoeren. Van de basisoptelling, aftrekking, vermenigvuldiging, deling tot zelfs meer programmeerspecifieke rekenkundige bewerkingen. We zullen er meer over leren in de volgende tutorial.

Booleans

Booleans zijn extreem gebruikelijk in programmeren. De meeste tijd zullen we hun namen niet expliciet gebruiken, maar we zullen hun eenvoudige eigenschap onder de motorkap gebruiken. Een boolean kan twee waarden hebben: “waar” en “onwaar” en ze zijn precies wat ze klinken. Vaak zul je jezelf code zien schrijven om een vergelijking te maken en een conclusie te trekken op basis van het resultaat van die vergelijking.

Vaak zijn deze vergelijkingen geworteld in scenario’s uit het echte leven, en ze volgen een eenvoudige logica. Is het licht aan of uit? Is er regen buiten? Heb je honger? Is dit nummer groter dan het andere nummer? Is deze alinea langer dan de volgende? Is de gebruiker op een groot scherm?

Er zijn veel momenten waarop je niet alleen een numerieke waarde of stringwaarde wilt voor dingen, maar je daadwerkelijk een ja of nee antwoord wilt. In een notendop, op die momenten zullen we het boolean datatype gebruiken.

// is het eerste nummer groter dan het tweede
alert(13 > 12);

// controleer het variabele type
let isRainyOutside = true;
alert(typeof isRainyOutside);

Het uitvoeren van deze code zou ons de volgende uitvoer geven:

Nu weet je over variabelen en datatypes in JavaScript. In de volgende blogpost zullen we deze datatypes gebruiken om beslissingen in onze code te nemen en nog veel meer!

Als je onze inhoud leuk vindt, vergeet dan niet om lid te worden van de Facebook-gemeenschap!