Javascript boekenclub - Trisjan/Freago GitHub Wiki

Ik heb me aangemeld voor de JavaScript boekenclub omdat ik merk dat ik nog vaak worstel met JavaScript. Ik ervaar dat ik bepaalde concepten nog niet volledig begrijp en dat mijn vaardigheden in dit gebied nog niet op het gewenste niveau zijn. Daarom wil ik graag meer leren en mijn kennis verbeteren door deel te nemen aan deze boekenclub.

Ik volg zelf ook al een Javascript course van Codecademy, hier heb ik al wat geleerd en misschien kan ik dus ook helpen met het uitleggen van bepaalde concepten tijden de boekenclub naar leden.

David heeft een bericht gestuurd in de FDND Agency teams chat dat hij een Javascript boekenclub wil beginnen. Hij wil het boek "You Don't Know JS Yet: Get Started" van Kyle Simpson gaan lezen en bespreken. Ik ben zelf nog niet goed genoeg in Javascript en denk eraan om lid te worden van de club. Deze kennis kan ik goed gebruiken en als David me hiermee kan helpen door het samen te leren, is dat een mooie bonus.

Joost gaf vandaag een presentatie over het progressief verbeteren van formulieren. Hier kwam ook Javascript bij kijken en ik realiseerde me hoeveel ik nog moet leren. Hij had het over termen zoals hoisting en scopes, waar ik nog nooit van gehoord had.

Ik heb vandaag David benaderd om deel te worden van de boekenclub. Blijkbaar ben ik de eerste die zich heeft aangesloten. We hebben afgesproken om elke week een meeting te houden waarin we samen door het boek gaan en bespreken wat we de week ervoor hebben geleerd.

Ik was er zelf niet bij omdat ik niet ziek was maar heb aantekeningen van marco gekregen. Ik heb deze bestudeerd en heb er het volgende van begrepen.

Vandaag was de eerste clubmeeting! Samen met David en nieuwe leden Badr, Rayan en Danique bespraken we het boek. Kyle Simpson legt in de eerste hoofdstukken uit wat Javascript precies is en behandelt de basis. We lazen gezamenlijk de hoofdstukken door en leerden veel.

De naam Javascript is eigenlijk een marketingtruc! De bedenker, Brendan Eich, gaf het project oorspronkelijk de codenaam Mocha. Maar toen een echte naam gekozen moest worden, werd het Javascript, omdat de doelgroep vooral Java-programmeurs waren en 'script' een populair woord was voor lichte programma's.

Het gebruik van dubbele of enkele quotation marks maakt geen verschil voor de werking van je code, maar back-ticks doen dat wel. In het voorbeeld uit het boek is te zien dat bij dubbele en enkele quotation marks de string letterlijk wordt overgenomen, terwijl back-ticks variabelen interpoleren.

console.log("My name is ${ firstName }."); // My name is ${ firstName }.
console.log('My name is ${ firstName }.'); // My name is ${ firstName }.
console.log(`My name is ${ firstName }.`); // My name is Kyle.

In het boek wordt duidelijk uitgelegd dat var, let en const verschillende beperkingen hebben. Var is function-scoped, terwijl let block-scoped is, waardoor het buiten het blok niet beschikbaar is. Const is vergelijkbaar met let, maar de waarde kan niet opnieuw worden toegewezen.

var adult = true;

if (adult) {
    var name = "Kyle";
    let age = 39;
    console.log("Shhh, this is a secret!");
}

console.log(name); // Kyle
console.log(age); // Error!

Hoisting is een Javascript-mechanisme waarbij variabelen en functie-declaraties naar de top van de scope worden verplaatst voordat de code wordt uitgevoerd. Dit betekent dat je een functie kunt aanroepen voordat deze is gedeclareerd.

testFunctie(); // text

function testFunctie() {
    console.log("text");
}

Vandaag was de tweede Javascript clubmeeting. De nieuwe leden Ivar, Trisjan en Duneya deden ook mee. We vervolgden waar we vorige week gebleven waren. Deze week was technischer en moeilijker te begrijpen, maar dankzij de constante hulp en uitleg van elkaar, kwamen we erdoorheen.

Tijdens het schrijven van de week 2-notities ontdekte ik dat hoisting niet werkt met let en const. Ze worden wel naar de top van de scope verplaatst maar komen in een "temporal dead zone". Hoisting werkt dus alleen voor var en functie-declaraties, maar de twee soorten hoisting werken net iets anders.

In onderstaande code is te zien dat functie-hoisting werkt zoals bekend. De functie-declaratie wordt naar de top van de scope verplaatst, zodat deze kan worden aangeroepen.

testFunctie(); // text

function testFunctie() {
    console.log("text");
}

Bij variabele-hoisting wordt alleen de declaratie gehoist, niet de initialisatie. Dit betekent dat de waarde pas beschikbaar is na de initiatie.

console.log(x); // undefined
var x = 1;

In het bovenstaande voorbeeld is alleen de declaratie 'var x;' naar de top verplaatst, niet de initialisatie 'x = 1;'. Daarom is de waarde van x undefined bij het aanroepen van console.log.

Naast var, let en const zijn er ook andere manieren om variabelen te declareren, zoals function en catch. Functies declareren identifiers die alleen binnen de functie bestaan, terwijl catch block-scoped variabelen declareert.

function hello(name) {
    console.log(`Hello, ${ name }.`);
}

hello("Kyle"); // Hello, Kyle.

In het volgende voorbeeld declareert catch de variabele 'err', die alleen binnen de catch block bestaat.

try {
    someError();
} catch (err) {
    console.log(err);
}

Een identifier is de naam van een variabele, net zoals een naam een persoon identificeert. Het boek legt dit niet uitgebreid uit, maar ik heb zelf wat onderzoek gedaan. Het verschil tussen identifiers en variabelen is vaag en niet heel belangrijk, maar als je nieuwsgierig bent, kun je het vergelijken met het verschil tussen namen en mensen. Een naam is een identifier voor een persoon.

let x = 5;
let y = 10;
let totaal = x + y;

We zijn al bekend met function declarations, maar er zijn ook function expressions. Deze worden niet gehoist en kunnen handig zijn voor eenmalig gebruik.

const add = function(a, b) {
    return a + b;
};

console.log(add(2, 3)); // Outputs: 5

Een function expression kan bijvoorbeeld handig zijn voor een setTimeout.

setTimeout(function() {
    console.log("Dit bericht verschijnt na 2 seconden");
}, 2000);

Enkele- en dubbele-equals worden gebruikt voor toewijzing en losse gelijkheid, terwijl driedubbele-equals voor strikte gelijkheid zijn. Object.is() biedt de strengste vergelijking.

console.log(Object.is(NaN, NaN)); // true
console.log(Object.is(-0, 0)); // false

For loops zijn handig voor iteraties op basis van condities. Hieronder een voorbeeld uit het boek:

var arr = [ "1", "10", "100", "1000" ];

for (let i = 0; i < arr.length && arr[i] < 500; i++) {
    // will run 3 times
}

Relationale vergelijkingen zoals < en > werken zoals verwacht, maar kunnen verrassingen opleveren bij stringvergelijkingen. In onderstaand voorbeeld lijkt '9' groter dan '10' door de Unicode-waarde van het eerste karakter.

var x = "10";
var y = "9";

x < y; // true, watch out!