JavaScript-methoden en meer. Deel 9 JavaScript-cursus van Beginner tot Gevorderd in 10 blogposts

Dit is deel 9 van de JavaScript blogpostserie die je van beginner naar gevorderde zal brengen. Deze keer zullen we de volgende onderwerpen verkennen: JavaScript-methoden, standaardparameterwaarden, het Date-object in JavaScript en de pijlfunctie. Aan het einde van deze serie weet je alle basisprincipes die je nodig hebt om te beginnen met coderen in JavaScript. Als je de vorige blogpost over JavaScript-objecten nog niet hebt gelezen, kun je dat hier doen. Zonder verder oponthoud, laten we beginnen met de negende tutorial.

JavaScript-methoden en meer – inhoudsopgave:

1. Standaardparameterwaarden
2. Het Date-object in JavaScript
3. Map() methode
4. Filter() Methode
5. Pijlfunctie

Tot nu toe hebben we veel concepten en onderwerpen in JavaScript gezien, maar er zijn nog steeds enkele veelgebruikte die we niet hebben ontdekt. In deze tutorial zullen we zien waar ze allemaal over gaan. De eerste is de standaardparameterwaarden in JavaScript.

Standaardparameterwaarden

Functies worden extreem vaak gebruikt in programmeren, en wanneer iets zo vaak wordt gebruikt, zijn er niet alleen frameworks zoals React die gebruik maken van JavaScript-functies, maar zijn er zelfs verdere optimalisaties ontwikkeld om nog meer uit JavaScript-functies te halen. Een van de belangrijkste kenmerken die we in functies hebben, wordt standaardparameterwaarden genoemd. Standaardparameters stellen ons in staat om veiligere codes te schrijven die veilige veronderstellingen over de gebruikersinvoer kunnen maken. Dit komt ook de gebruiker ten goede door hen een standaardinstelling te bieden die het gemakkelijker kan maken om uit hun opties te kiezen. Laten we daar enkele voorbeelden van bekijken.

// neem aan dat je een website voor een koffiehuis ontwikkelt
// en de meeste mensen willen een medium size americano
// wetende dit wil je het gemakkelijker maken voor mensen om
// hun koffie met minder gedoe te bestellen
function orderCoffee(typeOfCoffee="americano", sizeOfCoffee="medium", numberOfCoffee=1){
    return (numberOfCoffee + " " + sizeOfCoffee + " size " + typeOfCoffee + " wordt bereid. ");
}
console.log("Standaard bestelling:");
console.log(orderCoffee());
// op deze manier, wanneer een gemiddelde klant online bestelt, 
// zal het veel gemakkelijker voor hen zijn om hun dagelijkse koffie te bestellen
// zozeer dat ze het met een enkele knop kunnen bestellen
// alternatieven kunnen mensen ook hun koffie aanpassen
// door de invoer te wijzigen
console.log("Aangepaste bestelling:");
console.log(orderCoffee("latte", "large", 2));
console.log("Nog een aangepaste bestelling:");
console.log(orderCoffee("macchiato", "small", 1));
// het is ook mogelijk om slechts een deel van de invoer te wijzigen
// en de standaardparameters te gebruiken 
// voor de rest van de invoervelden
console.log("Deels aangepaste bestelling:");
console.log(orderCoffee("iced coffee"));

Het uitvoeren van de bovenstaande code geeft ons de volgende output:

Het Date-object in JavaScript

Het Date-object in JavaScript wordt vrij vaak gebruikt, vooral in webontwikkeling. We kunnen het Date-object gebruiken om tijdgevoelige functies uit te voeren, zoals het wijzigen van de weergave-instellingen naar donkere modus, lichte modus of een andere modus die de gebruiker misschien verkiest. We kunnen ook de datuminformatie gebruiken zoals nodig binnen het project waaraan we werken. Hier zijn enkele voorbeelden van het Date-object in actie:

// de eerste stap is om een instantie van een date-object te maken
// we kunnen dit doen door het volgende te schrijven en 
// het in te stellen op een variabele of constante naar keuze
let today = new Date();
console.log("We zijn in het jaar: " + today.getFullYear());
console.log("We kunnen ook de maand in nummer krijgen:");
console.log(today.getMonth());
console.log("Ook kunnen we het uur van de dag zo krijgen:");
console.log(today.getHours());
console.log("We kunnen ook de exacte minuten samen met de seconden krijgen");
console.log(today.getMinutes());
console.log(today.getSeconds());
// zodra we deze nummers hebben, kunnen we ze gebruiken zoals we willen
// als we willen, kunnen we ze weergeven of beslissingen op basis daarvan nemen.
// als we de maand met een naam willen weergeven 
// in plaats van een nummer, kunnen we dat ook bereiken
// met het volgende
const months = ["Januari", "Februari", "Maart", "April", "Mei", "Juni", "Juli", "Augustus", "September", "Oktober", "November", "December"];
console.log("We zijn in de maand van " + months[today.getMonth()]);
// wat we net deden was een array maken om maandnamen op te slaan
// en vervolgens de juiste maand kiezen met behulp van een indexwaarde
// die wordt gegeven door de .getMonth() methode.
// als we de donkere modus na 20.00 uur willen inschakelen,
// kunnen we dat doen met de volgende code
// een van de eerste dingen die we moeten onthouden is dat
// uren worden gegeven in het 24-uursformaat
// dat betekent dat 20.00 uur 20 als uren betekent
// we kunnen ook een verkorte manier gebruiken 
// en de creatie van het nieuwe date-object combineren
// met de get hours-methode
let timeOfDay = new Date().getHours();
if (timeOfDay >= 20) {
    console.log("Donkere modus inschakelen...");
} else {
    console.log("Schakel de donkere modus niet in");
}
// aangezien de huidige tijd na 20.00 uur is,
// in dit geval verwachten we dat de donkere modus wordt ingeschakeld.
// wat ook het resultaat is dat we krijgen zoals we kunnen zien van
// de console-output.

Het uitvoeren van de bovenstaande code geeft ons de volgende console logs:

Map() methode

De map-methode is een zeer nuttige methode die je veel regels code kan besparen, en afhankelijk van hoe je het gebruikt, kan het je code veel schoner maken. Het vervangt in wezen het gebruik van een for-lus wanneer je het gebruikt om over een array te itereren. Hier zijn enkele voorbeelden van de map() methode.

// laten we een array maken die we voor mapping zullen gebruiken
let someNumbers = [1, 2, 3, 4, 5];
// laten we ook de functies maken die we 
// aan de map-methode zullen geven
function doubleNums(num1){
    return num1 * 2;
}
function squareNums(num1){
    return num1 * num1;
}
function add100(num1){
    return num1 + 100;
}
console.log("Verdubbelde nummers array:");
console.log(someNumbers.map(doubleNums));
console.log("Geverde nummers array:");
console.log(someNumbers.map(squareNums));
console.log("100 toegevoegd aan elk van de elementen in de nummers array:");
console.log(someNumbers.map(add100));
// de map() methode zal over elk van de
// items in een gegeven array itereren en de 
// opgegeven functie toepassen
// let op dat we geen haakjes opnemen
// na de functienamen, dit zou de functie aanroepen
// in plaats daarvan geven we de functienaam door, 
// en de map() methode roept ze aan wanneer dat nodig is

Het uitvoeren van de bovenstaande code geeft ons de volgende console logs:

Filter() Methode

De filter() methode, samen met de map() methode, zijn beide vrij gebruikelijke JavaScript-methoden. Ze zijn zeer vergelijkbaar met de map() methode die we zojuist hebben gezien. Met de map() methode kunnen we elke functie doorgeven, en die functie wordt toegepast op elk van de elementen in een array. Met de filter() methode zullen we een filtercriteria doorgeven en de filtermethode zal over alle items in een array itereren en het zal een nieuwe array retourneren met alleen de items die aan de criteria voldoen. Laten we daar enkele voorbeelden van bekijken:

// laten we eerst een array maken 
// om de filter() methode toe te passen
let someNumbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21];
function checkEven(num1){
    if (num1 % 2 == 0){
        return num1;
    }
}
function checkOdd(num1){
    if (num1 % 2 == 1){
        return num1;
    }
}
function over13(num1){
    if (num1 > 13){
        return num1;
    }
}
function divisibleByFive(num){
    if (num % 5 == 0){
        return num;
    }
}
console.log("Even nummers uit de lijst:");
console.log(someNumbers.filter(checkEven));
console.log("Oneven nummers uit de lijst:");
console.log(someNumbers.filter(checkOdd));
console.log("Nummers boven 13 uit de array:");
console.log(someNumbers.filter(over13));
console.log("Nummers deelbaar door 5 uit de array:");
console.log(someNumbers.filter(divisibleByFive));

Het uitvoeren van de bovenstaande code geeft ons de volgende console logs:

Pijlfunctie

Vergeet niet dat we zeiden dat functies extreem gebruikelijk zijn in JavaScript en dat er veel optimalisaties zijn gemaakt om ze nog performanter of schoner te maken? Welnu, pijlfuncties zijn daar een van. Pijlfuncties worden soms ook wel de dikke pijl genoemd. Ze bieden in wezen een veel kortere manier om je functies te schrijven. Ze worden ook zeer vaak gebruikt met de JavaScript-methoden die we zojuist hebben gezien. Laten we ze met enkele voorbeelden bekijken:

// JavaScript biedt meerdere niveaus van 
// codeverkorting met pijlfuncties, afhankelijk van je exacte code
// In wezen is de langste manier waarop we een functie kunnen schrijven 
// de manier waarop we ze altijd schrijven zonder de pijlfuncties te gebruiken
// laten we beginnen met een array om de pijlfuncties toe te passen
let someNumbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21];
console.log("Originele Array:");
console.log(someNumbers);
// in de vorige voorbeelden hebben we veel functies toegepast
// nadat we ze als reguliere benoemde functies hebben gemaakt
// In dit voorbeeld zullen we de exacte transformaties toepassen
// zodat je de beide extremen in de code lengte kunt zien
// verdubbel elke nummer in de array:
console.log("Verdubbel elk nummer in de array:")
console.log(someNumbers.map(num => num * 2));
// kwadrateer elk nummer in de array:
console.log("Kwadreer elk nummer in de array:")
console.log(someNumbers.map(num => num * num));
// voeg 100 toe aan elk nummer in de array:
console.log("Voeg 100 toe aan elk nummer in de array:")
console.log(someNumbers.map(num => num + 100));
// Behoud alleen de even nummers in de array:
console.log("Behoud alleen de even nummers in de array:")
console.log(someNumbers.filter(num => num % 2 == 0));
// Behoud alleen de oneven nummers in de array:
console.log("Behoud alleen de oneven nummers in de array:")
console.log(someNumbers.filter(num => num % 2 == 1));
// Behoud alleen de nummers die deelbaar zijn door 5:
console.log("Behoud alleen de nummers die deelbaar zijn door 5:")
console.log(someNumbers.filter(num => num % 5 == 0));
// Behoud alleen de nummers die boven 13 zijn:
console.log("Behoud alleen de nummers die boven 13 zijn:")
console.log(someNumbers.filter(num => num > 13));

Het uitvoeren van de bovenstaande code geeft ons de volgende console logs:

In de volgende tutorial zullen we een overzicht hebben van wat we hebben gezien en kijken wat er daarna komt.