JavaScript-objecten. Deel 8 JavaScript-cursus van Beginner tot Gevorderd in 10 blogposts

Dit is deel 8 van de JavaScript blogpostserie die je van beginner naar gevorderd zal brengen. Als je de vorige blogpost over JavaScript-functies nog niet hebt gelezen, kun je het hier bekijken. 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 achtste tutorial.

JavaScript-objecten – inhoudsopgave:

1. JavaScript-objecten
2. Objectconstructorfuncties

JavaScript-objecten

JavaScript-objecten spelen een belangrijke rol. Hoewel het relatief een groot onderwerp is, kan het ook relatief eenvoudig zijn om een begrip ervan te ontwikkelen. Een van de meest voorkomende manieren om objecten te begrijpen, is door te denken dat je een auto in code opnieuw aan het maken bent. We zullen twee hoofdconcepten hebben wanneer we met objecten werken. Ze zullen eigenschappen en methoden hebben. Eigenschappen zijn de dingen die JavaScript-objecten hebben en de methoden zijn de dingen die objecten kunnen uitvoeren. Laten we dat met enkele voorbeelden bekijken.

// laten we meerdere objecten definiëren om een beter begrip te krijgen
const plane = {
    numberOfWings: 2, 
    canFly: true, 
    takeOff: function(){return "Vliegtuig begint op te stijgen..."},
    land: function(){return "Vliegtuig begint te landen..."} 
    }
const car = {
    brand: "Tesla",
    isElectric: true,
    numberOfDoors: 4,
    moveForward: function(){return "De auto beweegt vooruit..."},
    smartSummon: function(){return "De auto begint zichzelf naar jou toe te rijden..."}
}

// we kunnen de eigenschappen die ze hebben benaderen en in de console loggen:
console.log("De eigenschappen van het vliegtuig:");
console.log("Kan vliegen: " + plane.canFly);
console.log("Totaal aantal vleugels: " + plane.numberOfWings);
// we kunnen ook het vliegtuig acties laten uitvoeren
console.log(plane.takeOff());
console.log(plane.land());
// als je beter kijkt, zie je dat 
// we de acties niet direct in de console loggen binnen de methoden
// in plaats daarvan retourneren we ze vanuit de functies
// en in dit geval loggen we ze in de console
// op deze manier kunnen we de gebruiker ook een waarschuwing geven
// dat het vliegtuig opsteigt
alert(plane.takeOff());
// we kunnen ook leren over de eigenschappen die de auto heeft 
// en ze ook in de console loggen voor extra oefening
console.log("Is het een elektrische auto? " + car.isElectric);
console.log("Wat is het merk van de auto: " + car.brand);
console.log("Hoeveel deuren heeft het? " + car.numberOfDoors);
console.log(car.smartSummon());
console.log(car.moveForward());

Wanneer we de bovenstaande code uitvoeren, zouden we de volgende uitvoer moeten krijgen:

We hebben zojuist twee hoofdvoorbeelden van JavaScript-objecten gezien: een met een vliegtuig en een met een auto. Net zoals vliegtuigen en auto’s verschillende eigenschappen en verschillende dingen hebben die ze kunnen doen, kunnen verschillende objecten die we creëren verschillende dingen doen en hebben ze verschillende eigenschappen. Als je beter kijkt, kun je een patroon beginnen te zien in de manier waarop we objecten, eigenschappen en methoden definiëren.

We beginnen met het definiëren van objecten zoals we variabelen of constanten definiëren; in dit geval is het meestal voldoende om constanten te gebruiken bij het definiëren van JavaScript-objecten. Maar in plaats van die constante eenvoudig aan een waarde toe te wijzen, zoals we deden met reguliere constanten, openen en sluiten we nu een set accolades en geven we in wezen de gegevens in sleutel-waardeparen op. Merk op dat het definiëren van eigenschappen en methoden vrij vergelijkbaar is. Het belangrijkste verschil is dat we bij het definiëren van eigenschappen de namen aan een waarde toewijzen die we later zullen ophalen. Wanneer we echter een methode definiëren, moeten we een functie opgeven die we later zullen uitvoeren. Dit verschil komt ook tot uiting in hoe we ze later aanroepen. Bijvoorbeeld:

// wanneer we een eigenschap ophalen, gebruiken we geen haakjes aan het einde
console.log("Kan vliegen: " + plane.canFly);
// wanneer we methoden ophalen, 
// voeren we ze ook uit door haakjes erachter toe te voegen
// methoden hier zijn in wezen functies die 
// tot een specifiek object behoren
console.log(plane.takeOff());

Het is belangrijk dat we de haakjes na de methoden toevoegen, net zoals we deden met reguliere functies. Anders krijgen we alleen de functie zelf in plaats van de functie uit te voeren.

// om de objectmethode uit te voeren, moeten we
// de haakjes direct na de methodenaam toevoegen
// anders krijgen we de methode-definitie 
// zoals in dit voorbeeld
alert(plane.takeOff);

Het weergegeven resultaat is precies wat we hebben gedefinieerd bij het maken van de methode. Je kunt ook zien dat we een functie on-the-go definiëren. In dit geval definiëren we de functie zonder naam, wat mogelijk is in JavaScript. Dit is niet altijd wenselijk, aangezien het geven van een naam aan de functie het duidelijker maakt wanneer we het zien worden weergegeven. In dit geval gebruiken we de functie echter nergens anders buiten de objectdefinitie, dus hoeven we de functie niet direct een naam te geven. In plaats daarvan kunnen we naar de functie verwijzen vanuit het object met de methodenaam die we eraan toekennen.

Een ander ding dat je moet weten over het ophalen van eigenschappen of methoden van een object, is dat er meer dan één manier is om dat te bereiken. We hebben een van de meest voorkomende praktijken gebruikt in de bovenstaande voorbeelden, namelijk het gebruik van puntnotatie. Maar er is ook een andere veelgebruikte manier om hetzelfde resultaat te bereiken die je moet kennen. Deze tweede notatie gebruikt vierkante haken en aanhalingstekens.

// beide zijn even geldig en 
// geven ons dezelfde resultaten
console.log(plane.numberOfWings);
console.log(plane["numberOfWings"]);
// kijk in de JavaScript-console voor de resultaten

Het is geweldig dat we veel gedetailleerde eigenschappen en acties kunnen opslaan die we kunnen uitvoeren met behulp van objecten, maar wat als we objecten moesten gebruiken, niet alleen voor 1 auto, maar laten we zeggen voor 20 auto’s, 100 auto’s of zelfs 1.000.000 auto’s, elk met een unieke ID en variërende eigenschapswaarden. Moeten we die hele code vanaf nul voor elke auto typen? Het antwoord is nee. In plaats daarvan kunnen we gebruikmaken van iets dat de objectconstructorfunctie wordt genoemd.

Objectconstructorfuncties

Objectconstructors kunnen je coderingsproces enorm versnellen en je code aanzienlijk DRY maken. Met objectconstructorfuncties definiëren we in wezen een blauwdruk voor het object. Zodra we een blauwdruk voor het object hebben, kunnen we zoveel van die objectinstantie creëren op een veel duidelijkere manier, met veel minder herhaling. Laten we dat met enkele voorbeelden bekijken.

// dit is hoe we een blauwdruk voor de objecten definiëren
function Car(id, color, isElectric, numberOfDoors){
    this.id = id;
    this.color = color;
    this.isElectric = isElectric;
    this.numberOfDoors = numberOfDoors;
}
// dit is hoe we de 
// JavaScript-objecten kunnen instantiëren die we willen creëren vanuit 
// de blauwdruk die we hierboven hebben gedefinieerd
// in dit geval creëren we 3 auto-objecten 
// met verschillende waarden voor de eigenschappen
const car1 = new Car(1, "wit", true, 4);
const car2 = new Car(2, "zwart", true, 2);
const car3 = new Car(3, "rood", false, 4);
// we kunnen objecteigenschappen benaderen zoals we eerder deden
console.log("Kleur van de eerste auto is: " + car1.color);
console.log("Kleur van de tweede auto is: " + car2.color);
console.log("Kleur van de derde auto is: " + car3.color);

Het uitvoeren van de bovenstaande code zou ons de volgende code-uitvoer geven:

Zoals je kunt zien uit de bovenstaande code, kunnen we, zodra we een blauwdruk hebben, eenvoudig verschillende waarden doorgeven om verschillende JavaScript-objecten te creëren vanuit de initiële blauwdruk. Een ding dat je waarschijnlijk opmerkte, is dat de naamgevingsconventie voor objectconstructors is dat de eerste letter hoofdletter is. In dit geval, in plaats van het als “car” te definiëren, hebben we het “Car” genoemd. Als we een vliegtuigklasse zouden maken, zouden we het “Plane” noemen.

Wanneer we objecten willen creëren vanuit onze gedefinieerde blauwdruk, gebruiken we het sleutelwoord “new” en schrijven we vervolgens de naam van de objectconstructorfunctie die we willen gebruiken. Na de naam openen en sluiten we een set haakjes en geven we de argumenten door waarmee we ons object willen creëren. Merk op dat we de parameter namen niet herhalen; we geven gewoon de waarden in dezelfde volgorde door als de parameters. Je hebt misschien ook opgemerkt dat we bij het creëren van de blauwdruk een sleutelwoord gebruiken dat “this” wordt genoemd. Voor nu moet je weten dat het sleutelwoord “this” verwijst naar het object zelf, en het is een onderdeel van de boilerplate-code die we moeten schrijven wanneer we de blauwdruk voor het object creëren.

Wanneer je leert coderen, hoor je misschien de term “boilerplate-code”; dit is eigenlijk vrij gebruikelijk, vooral in webontwikkeling. Het betekent in wezen dat er delen van code zijn die we schrijven om bepaalde instellingen in te stellen. Hoewel er geen unieke oplossing is die we met code bieden, moeten we die delen uitschrijven om functionele code te hebben. Afhankelijk van de boilerplate-code bieden sommige IDE’s zelfs snelkoppelingen voor het bieden van die boilerplate-codes.

De JavaScript-objecten die we zojuist hebben geleerd, zijn een groot onderwerp en hebben veel details naarmate we dieper ingaan. Maar op fundamenteel niveau moet je weten dat we echte objecten met code kunnen nabootsen met behulp van objecten. Die JavaScript-objecten kunnen verschillende eigenschappen en methoden hebben die we kunnen benaderen en uitvoeren.

In de volgende tutorial zullen we meer onderwerpen en concepten ontdekken die vrij belangrijk en veelgebruikt zijn in JavaScript.