23/05

• "The best way to learn JS is to start writing JS." (Hoofdstuk 2)

Vandaag was de eerste club meeting! We gingen met een klein groepje het boek bespreken. In het boek informeert auteur Kyle Simpson de lezer over wat Javascript nou precies is en worden de basics uitgelegd. We gingen gezamenlijk door de hoofdstukken lezen en hebben hier veel van opgestoken.

Waarom heet het Javascript?

De naam Javascript is eigenlijk gewoon een marketing truc! Toen de bedenker Brendan Eich de taal bedacht had het project de code-naam Mocha. Maar toen de tijd kwam om een echte naam te kiezen werd er gekozen voor Javascript, waarom is dat? De initiële doelgroep was eigenlijk grotendeels Java programmeurs en het woord script was in die tijd een populair woord om te verwijzen naar light weight programma's.

"Quotation marks vs `back-ticks

Het gebruik van dubbele of enkelvoudige quotation marks maakt geen verschil voor de werking van je code. Wel is er een verschil in wat back-ticks doen. Hieronder heb ik een voorbeeld uit het boek gehaald. In onderstaand voorbeeld is te zien dat bij het gebruik van zowel dubbele als enkelvoudige quotation marks de string letterlijk overgenomen wordt. Bij het gebruik van back-ticks word de firstName variabel wel de value Kyle gegeven. (Dit heeft interpolation)

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.

Het verschil tussen var, let en const

Hieronder heb ik een voorbeeld uit het boek gehaald over het verschil tussen var en let. De name is hier een var en de age is hier een let. Zoals je kunt zien is alleen de name op te halen in de console.log en krijg je een error als je de age wilt weergeven. Waarom is dit? Een let is meer limited dan een var, dit heet block scoping. De let was geblock-scoped in de if statement terwijl de var dat niet is. Hierdoor kun je de var wel console.loggen buiten de if statement maar de let niet.

Dit klinkt als een nadeel maar dit kan ook erg handig zijn als je bijvoorbeeld meerdere variabelen hebt met dezelfde naamgeving. Je kunt deze dan block-scopen, zodat je ze niet door elkaar haalt.

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!

We kunnen const natuurlijk niet vergeten! Een const is net als een let maar dan met nog een extra limitatie; je moet een const op declaratie een waarde geven en deze waarde kan je niet re-assignen.

Hieronder is een voorbeeld uit het boek te zien. Je kunt hier zien dat de const myBirthday een waarde krijgt van true bij declaratie. Er wordt geprobeerd de waarde van deze boolean hierna te re-assignen en dit kan niet met een const. Hier komt dus een error uit.

const myBirthday = true;

if (myBirthday) {
    myBirthday = false; // Error!
}

Een interessant kenmerk van const is dat je de waarde wel kunt veranderen, je kunt het alleen niet re-assignen. Wat betekent dit? Hieronder is een voorbeeld uit het boek te vinden. In onderstaand voorbeeld worden twee dingen geprobeerd.

Allereerst wordt actor[2] toegevoegd aan de array. Dit is een verandering aan de const die er niet voor zorgt dat een bestaande waarde in deze const ge re-assigned wordt aangezien er alleen een actor[0] en een actor[1] in de array zitten op declaratie. Dit kan!

In de tweede wijziging wordt er geprobeerd de data in de array te veranderen naar [] (niks dus, het wordt een lege array). Dit zou de waarden van actor[0] en actor[1] wijzigen en dus re-assignen. Dit kan niet!

const actors = [
    "Morgan Freeman", "Jennifer Aniston"
];

actors[2] = "Tom Cruise"; // OK :(
actors = []; // Error!

30/05

Vandaag was de tweede Javascript clubmeeting. We zijn verder gegaan waar we de vorige week gestopt zijn. Deze keer was het technischer en moeilijker te begrijpen, maar door elkaar te helpen, hebben we het kunnen volgen.

Hoisting part 2

Tijdens het lezen ontdekten we dat hoisting niet werkt met let en const. Hoewel ze naar de top van de scope worden verplaatst, zijn ze niet toegankelijk voordat ze daadwerkelijk zijn gedeclareerd. Dit heet de "temporal dead zone". Hoisting werkt dus alleen voor var en functie-declaraties, maar op verschillende manieren.

Function hoisting vs Variable hoisting

Hier is een voorbeeld van hoe hoisting werkt met functies:

testFunctie(); // text

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

Hier wordt de functie-declaratie naar de top van de scope verplaatst, zodat de functie kan worden aangeroepen voordat deze in de code verschijnt.

Maar bij variabelen gebeurt alleen de declaratie hoisting, niet de initialisatie:

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

Hier wordt alleen var x; naar de top verplaatst, waardoor de waarde undefined is voordat x wordt geïnitialiseerd met 1.

Andere vormen van declaratie

Naast var, let, en const, zijn er ook andere manieren om variabelen te declareren, zoals in functies en catch-blokken.

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

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

In het catch-blok hieronder is de variabele err alleen beschikbaar binnen dat blok.

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

Identifiers vs Variables

Een identifier is gewoon de naam van een variabele, net zoals een naam een persoon identificeert. Het verschil tussen identifiers en variabelen is subtiel en vaak niet zo belangrijk, maar het helpt te weten dat een identifier een naam is voor een variabele.

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

Functions

We kennen al functie-declaraties, maar er zijn ook functie-expressies. Deze worden niet gehoist en zijn handig voor eenmalig gebruik.

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

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

Een voorbeeld van een functie-expressie in een setTimeout:

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

Comparisons

Enkelvoudige = wordt gebruikt voor toewijzing, dubbele == voor losse gelijkheid en driedubbele === voor strikte gelijkheid. Object.is() biedt de strengste vergelijking.

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

For loops

For loops zijn handig voor herhalingen 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
}

Relational comparison

Relationale vergelijkingen zoals < en > werken meestal zoals verwacht, maar kunnen verrassingen opleveren bij stringvergelijkingen. In dit 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!