Primitives

String

String

const artist1 = "Charlotte De Witte"; 
const artist2 = 'Amelie Lens';
const message = `Vanavond stampen in \n Kompass Klub!`;
  • Tekstuele gegevens
  • Tussen enkele quotes ' ', dubbele quotes " "
  • Kan spaties en andere speciale tekens bevatten zoals:
    • \n (nieuwe regel)
    • \t (tab)
  • ​Kan ook met template literals, ofwel backticks ``.

String concatenatie

const name1 = "Charlotte";
const name2 = "Amelie";
let greeting = "Hey, ";

greeting += name1;

const newGreeting = greeting + " & " + name2;

const message = `${newGreeting}! Feestje bouwen!`

console.log(message); // Hey, Charlotte & Amelie! Feestje bouwen!
  • = Strings en andere variabelen samenvoegen
  • Meerdere manieren
    • + of += operator
    • Template literals ``
      • Variabelen eenvoudig invoegen met ${}.
      • Ondersteunt multiline strings zonder \n

Number

Number

  • Gehele getallen
  • Kommagetallen, gebruik een punt . 
  • Je kan hiermee berekeningen doen
  • Speciale waarden:
    • Infinity & -Infinity
    • NaN: Not a Number
const teeth = 32;  						// Number
const pi = 3.14;						// Number
const sum = teeth + pi;					// Number: 35.14
const tandenBovenaan = teeth / "twee"; 	// NaN

Boolean

Boolean

  • Heeft slechts twee waarden: true of false.
  • Gebruikt in logische expressies en voorwaarden
let isLoggedIn = true;  
let hasAccess = false;
  • Vaak gebruikt in if-statements:
if (isLoggedIn) {
  console.log("Welkom!");
}

Undefined & null

Undefined

  • Een variabele zonder waarde 
  • Ook functies zonder return 
let waarIsDaFeestje;  
console.log(waarIsDaFeestje); // undefined


function letsGetThisPartyStarted() {
  // Geen return-statement
}
console.log(letsGetThisPartyStarted()); // undefined

Null

  • Betekent dat een variabele bewust leeg is gemaakt
  • Wordt handmatig toegekend
let user = null; 	// Expliciet aangeven dat er geen waarde is
console.log(user); 	// null

🧐 JavaScript bug: typeof

console.log(typeof undefined); // "undefined"
console.log(typeof null);      // "object" (historische bug in JS!)

Wanneer gebruik je wat?

  • Gebruik undefined niet bewust! Dit betekent meestal dat iets ontbreekt of een fout heeft.
  • Gebruik null om bewust leeg te maken, bijvoorbeeld als een variabele later een waarde krijgt.

Meerdere waarden opslaan

Arrays

  • = soort complex object waarin je meerdere primitives (strings, numbers, booleans) kan opslaan
  • géén primitive data type maar een reference type
  • Bestaat uit vierkante haken [] met verschillende elementen, gescheiden door een komma , 
const veggies = ["tomato", "eggplant", "zucchini"];

Arrays

  • Gebruik array.length om het aantal items weer te geven
  • Je kan over een array loopen en met elke element afzonderlijk iets doen, dankzij de .forEach() functie
const veggies = ["tomato", "eggplant", "zucchini"];

console.log(veggies.length);	// 3

veggies.forEach(veggie => console.log(veggie)); 
// tomato
// eggplant
// zucchini

Arrays

  • Neem een specifiek element in een array vast via vierkante haken [] en de index (=positie in de lijst)
  • ⚠️ Index begint vanaf 0 
const veggies = ["tomato", "eggplant", "zucchini"];

console.log(veggies[0]); // tomato

NodeList vs. HTML (Collection)

Afhankelijk van de soort selector, krijg je iets anders terug:

  • Element: één specifiek HTML element
  • NodeList: Een lijst van nodes.
    • ​Een Node kan in principe vanalles zijn: tekst, comments, attributes,...
  • HTMLCollection: Een lijst van HTML-elementen
    • Een HTML-element is een specifiek type node, namelijk: een HTML tag zoals <p> of <div>. 
const eersteKnop = document.querySelector("button"); 		// één element
const alleKnoppen = document.querySelectorAll("button");	// NodeList

💡 Hier gaan we later dieper op in

#Throwback

Nu

NodeList gedraagt zich als een array

  • Over een NodeList kan je loopen met de forEach() method
  • HTMLCollections zal je eerst moeten omzetten naar een array
// Array
const kleurtjes = ["rood", "groen", "blauw"];
kleurtjes.forEach(kleurtje => console.log(kleurtje));

// NodeList
const buttons = document.querySelectorAll("button");
buttons.forEach(btn => btn.log(button.textContent));

Let's finish 🏁