Articles
Introductie tot JavaScript
JavaScript Basis

JavaScript Basis

Dit artikel legt de basisprincipes van JavaScript uit.

YouTube Video

Het uitvoeren van Hello World!

Overzicht van JavaScript

JavaScript is een van de meest gebruikte programmeertalen in webontwikkeling. Het wordt voornamelijk gebruikt om dynamische elementen aan webpagina's toe te voegen, waarmee gebruikersinterfaces kunnen worden gemanipuleerd, gegevensoverdracht mogelijk is, en animaties kunnen worden gemaakt. Het kan werken aan de client-side (in een browser) en aan de server-side met behulp van technologieën zoals Node.js. Vanwege zijn eenvoud en flexibiliteit is het gemakkelijk te leren voor beginners en wordt het veel gebruikt door professionele ontwikkelaars.

Variabelen in JavaScript

Variabelen in JavaScript zijn als containers die worden gebruikt om gegevens op te slaan en opnieuw te gebruiken. Door variabelen te gebruiken, kun je waarden in je programma behouden en manipuleren.

Declaratie van Variabelen

In JavaScript zijn er drie trefwoorden om variabelen te declareren.

  • var: Een oude methode om variabelen te declareren, maar het handlen van de scope is complex en vereist voorzichtigheid. Het is gebaseerd op functiescope.
1var x = 10;
  • let: Geïntroduceerd in ES6, is het een manier om variabelen met blokscope te declareren. Het kan worden hergebruikt maar kan niet opnieuw worden gedeclareerd binnen dezelfde scope.
1let y = 20;
  • const: Gebruikt om variabelen te declareren die onveranderlijk zijn (constanten). Het heeft een blokscope en kan niet opnieuw toegewezen of hergedefinieerd worden na declaratie.
1const z = 30;

Scope

Variabelen hebben het concept van scope.

Globale Scope 

1var globalVar = 'This is global'; // Global scope
2
3function accessGlobal() {
4    console.log(globalVar); // Able to access global variable
5}
6
7accessGlobal(); // Outputs "This is global"
  • Globale scope-variabelen zijn overal toegankelijk. Variabelen gedeclareerd met var hebben een globale of functionele scope, maar let en const hebben een blokscope.

Blokscope 

1if (true) {
2    let localVar = "This is a block-scoped variable";
3
4    // Accessible inside the brackets
5    console.log(localVar);
6}
7
8// Error: localVar cannot be used outside of this scope
9console.log(localVar);

  • Blokscope: Variabelen gedeclareerd met let of const zijn alleen geldig binnen {} (accolades).

  • Er treedt een fout op bij toegang van buiten {} (accolades).

Functiescope 

 1function myFunction() {
 2    var functionScoped = 'This is function scope';
 3    // Accessible inside the function
 4    console.log(functionScoped);
 5
 6    if (true) {
 7        var functionVar = 'This is also function scope';
 8    }
 9    // functionVar can be used inside of the fucntion
10    console.log(functionVar);
11}
12
13myFunction(); // Outputs "This is function scope"
14
15// Error: functionScoped is not defined
16console.log(functionScoped);

  • Functiescope: Variabelen en functies die binnen een functie zijn gedefinieerd, kunnen niet van buiten de functie worden benaderd. Variabelen die binnen een functie met var worden gedeclareerd, behoren tot deze scope.

  • In dit voorbeeld kan de variabele functionVar van buiten de {} (accolades) worden benaderd, zolang deze zich binnen de functiescope bevindt. Aan de andere kant resulteert het benaderen van de variabele functionScoped van buiten de functiescope in een fout.

Dus variabelen gedeclareerd met var hebben alleen een functiescope en geen blokscope, wat het risico met zich meebrengt dat ze in onverwachte bereiken worden gebruikt. Het verdient de voorkeur om const te gebruiken voor variabelen die niet veranderen en meestal let te gebruiken, en het gebruik van var zoveel mogelijk te vermijden.

Gegevenstypen

JavaScript-variabelen kunnen waarden van verschillende gegevenstypen opslaan. Er zijn string voor het verwerken van tekst en number voor het verwerken van numerieke waarden.

De belangrijkste gegevenstypen zijn als volgt:.

 1// Number: Numeric type (integer and floating point number)
 2let integerNumber = 42;
 3let floatNumber = 3.14;
 4console.log("Number (Integer):", integerNumber);
 5console.log("Number (Float):", floatNumber);
 6
 7// String: String type
 8let text = "Hello, JavaScript!";
 9console.log("String:", text);
10
11// Boolean: Boolean type (true or false)
12let isJavaScriptFun = true;
13let isError = false;
14console.log("Boolean (true):", isJavaScriptFun);
15console.log("Boolean (false):", isError);
16
17// Null: Explicitly represents "nothing"
18let emptyValue = null;
19console.log("Null:", emptyValue);
20
21// Undefined: The default value assigned to an uninitialized variable
22let notDefined;
23console.log("Undefined:", notDefined);
24
25// Symbol: A data type for creating unique values
26let uniqueKey = Symbol("id");
27console.log("Symbol:", uniqueKey);
  • Primitieve Typen:
    • number: Verwerkt numerieke waarden (hele getallen en drijvende-kommagetallen).
    • string: Verwerkt reeksen van tekens.
    • boolean: Behandelt booleaanse waarden true of false.
    • null: Stelt expliciet een waarde van 'niets' voor.
    • undefined: Een waarde die automatisch wordt toegekend aan variabelen die niet zijn geïnitialiseerd.
    • Symbol: Een gegevenstype dat wordt gebruikt om unieke waarden te creëren.
 1// Object: A data structure that holds multiple properties
 2let person = {
 3    name: "Alice",
 4    age: 25,
 5    isStudent: false
 6};
 7console.log("Object:", person);
 8console.log("Object Property (name):", person.name);
 9console.log("Object Property (age):", person.age);
10
11// Array: A list that holds multiple values
12let numbers = [10, 20, 30, 40];
13console.log("Array:", numbers);
14console.log("Array Element (index 0):", numbers[0]);
15
16// Function: A function object
17function greet(name) {
18  return "Hello, " + name + "!";
19}
20console.log("Function Output:", greet("Bob"));
21
22// Another way to define a function using arrow syntax
23let add = (a, b) => a + b;
24console.log("Arrow Function Output (3 + 5):", add(3, 5));
  • Objecttypen:
    • Object: Een datastructuur met meerdere eigenschappen.
    • Array: Een lijst die meerdere waarden bevat.
    • Function: Een functie-object.

Toekennen en hernoemen van variabelen

Variabelen gedeclareerd met let of var kunnen opnieuw toegewezen worden, maar const kan niet opnieuw toegewezen worden zodra het is gedeclareerd.

1let score = 100;
2score = 150; // Correct
3
4const pi = 3.14;
5pi = 3.14159; // Error

Variabele Hoisting

In JavaScript is er een fenomeen waarbij variabelen naar de bovenkant van hun scope worden 'gehoisted'. Variabelen gedeclareerd met var worden gehoisted, maar het gebruik van let of const vóór declaratie veroorzaakt een fout.

1console.log(a); // undefined
2var a = 10;
3console.log(a); // 10
  • In dit geval worden variabelen gedeclareerd met var gehoist en worden hun waarden weergegeven.
1console.log(b); // ReferenceError
2let b = 20;
  • Variabelen gedeclareerd met let worden niet gehoist, wat resulteert in een fout.

Correct gebruik van variabelen

Houd rekening met de volgende punten voor het correct gebruik van variabelen.

  • Geef de voorkeur aan het gebruik van const en vermijd het gebruik van var.
  • Volg conventies voor het benoemen van variabelen.
    • Gebruik camelCase, zoals userName of totalPrice.
    • Vermijd dubbelzinnige namen zoals data of value, en gebruik betekenisvolle namen om de leesbaarheid te verbeteren.
    • Een variabele naam mag niet beginnen met een nummer, dus namen zoals 1variable zijn niet toegestaan.
  • Overmatig gebruik van globale variabelen kan scope-ambiguïteit veroorzaken en tot bugs leiden, dus vermijd het gebruik ervan waar mogelijk.

Samenvatting

  • var: Een oude methode voor het declareren van variabelen met een functiescope.
  • let: Een block-gebaseerde variabele die opnieuw toegewezen kan worden.
  • const: Een block-gebaseerde variabele die niet opnieuw toegewezen kan worden (constant).
  • Het is belangrijk om variabelen te gebruiken volgens hun datatypes en rekening te houden met hun scope.

Wat zijn escape-tekens in JavaScript?

Escape-tekens zijn een methode om tekens met speciale betekenis weer te geven binnen gewone string-literals. In JavaScript worden escape-tekens geïntroduceerd met een backslash \ om speciale effecten toe te voegen aan een string of om controlekarakters op te nemen. Escape-tekens zijn handig voor het opnemen van elementen zoals nieuwe regels, tabs of aanhalingstekens in een string.

Voorbeelden van het gebruik van escape-tekens

Hieronder staan enkele voorbeeldcodes waarin escape-tekens worden gebruikt.

Dubbele en enkele aanhalingstekens escapen

Gebruik escape-tekens om dubbele of enkele aanhalingstekens in een string weer te geven.

1const singleQuote = 'It\'s a beautiful day!';
2console.log(singleQuote); // Output: It's a beautiful day!
3
4const doubleQuote = "He said, \"Hello there!\"";
5console.log(doubleQuote); // Output: He said, "Hello there!"

Backslashes escapen

Om een backslash zelf in een string op te nemen, escape deze met \.

1const path = "C:\\Program Files\\MyApp";
2console.log(path); // Output: C:\Program Files\MyApp

Nieuwe regels en tabs escapen

Je kunt nieuwe regels en tabs invoegen om lange strings leesbaarder te maken.

1const multiline = "First line\nSecond line\nThird line";
2console.log(multiline);
3// Output:
4// First line
5// Second line
6// Third line
7
8const tabbed = "Column1\tColumn2\tColumn3";
9console.log(tabbed); // Output: Column1  Column2  Column3

Unicode-tekens escapen

Met Unicode-escape-volgordes kun je specifieke tekens weergeven met hexadecimale codes.

1const smiley = "\u263A";  // Copyright Mark
2console.log(smiley);

Notities

Overmatig gebruik van escapes kan de leesbaarheid schaden

Overmatig gebruik van escape-tekens kan de leesbaarheid van je code verminderen. Het is vooral belangrijk om escape-tekens verstandig te gebruiken in lange strings.

Overweeg het gebruik van template-literals

In JavaScript kun je met template-literals met backticks nieuwe regels of ingesloten expressies opnemen zonder escape-tekens.

1const message = `This is a message
2that spans multiple lines`;
3console.log(message);
4// Output:
5// This is a message
6// that spans multiple lines

Samenvatting

Escape-tekens zijn essentieel om speciale of controlekarakters binnen strings weer te geven. Door enkele of dubbele aanhalingstekens te escapen en nieuwe regels of tabs toe te voegen, kun je flexibelere strings maken. Overmatig gebruik van escape-tekens kan de code echter moeilijker leesbaar maken, dus overweeg het gebruik van template-literals waar nodig.

JavaScript-versies

JavaScript heeft een standaardspecificatie genaamd ECMAScript (ES). JavaScript heeft zich ontwikkeld op basis van deze standaard. Hieronder volgt een korte beschrijving van de belangrijkste versies.

  • ES3 (1999)

    De eerste wijdverbreid geaccepteerde versie. Basis-syntaxis en functies werden vastgesteld.

  • ES5 (2009)

    Introductie van strict mode, en nieuwe functies zoals Array.prototype.forEach, Object.keys, enz. werden toegevoegd.

  • ES6 / ES2015 (2015)

    Er is een grote update aan JavaScript doorgevoerd. Veel functies die de basis vormen voor modern JavaScript, zoals let, const, pijlfuncties, klassen, promises, modules, enz., werden geïntroduceerd.

  • ES7 / ES2016 (2016)

    Array.prototype.includes en de Exponentiation Operator (**) werden toegevoegd.

  • ES8 / ES2017 (2017)

    async/await werd geïntroduceerd, waardoor het eenvoudiger werd om asynchrone processen te schrijven.

  • ES9 / ES2018 (2018)

    Asynchrone iterators en Rest/Spreidingseigenschappen werden toegevoegd.

  • ES10 / ES2019 (2019)

    flatMap en Object.fromEntries werden toegevoegd.

  • ES11 / ES2020 (2020)

    Optional Chaining (?.) en de Nullish Coalescing Operator (??) werden toegevoegd, waardoor code eenvoudiger en veiliger geschreven kan worden.

  • ES12 / ES2021 (2021)

    String.prototype.replaceAll en Promise.any, onder andere, zijn toegevoegd.

  • ES13 / ES2022 (2022)

    Array.prototype.at en klasse private velden (#field), onder andere, zijn toegevoegd.

  • ES14 / ES2023 (2023)

    Array.prototype.toSorted en Symbol.prototype.description, onder andere, zijn toegevoegd.

  • ES15 / ES2024 (2024)

    Promise.withResolvers voor eenvoudigere Promise-beheer en aanpasbare ArrayBuffer, onder andere, zijn toegevoegd.

Huidig JavaScript wordt elk jaar bijgewerkt en nieuwe functies worden zelfs in de nieuwste versie toegevoegd.

Je kunt het bovenstaande artikel volgen met Visual Studio Code op ons YouTube-kanaal. Bekijk ook het YouTube-kanaal.

YouTube Video

Gegevenstypen in JavaScript