ProgrammatieFrontend ontwikkelaar

Leg het verschil uit tussen het declareren van variabelen met behulp van let, const en var in TypeScript. Hoe beïnvloedt de keuze van deze methoden de scope, de mogelijkheid voor her-declaratie, de mutabiliteit van de waarde en de bescherming tegen fouten? Geef voorbeelden van typische scenario's voor elk type declaratie.

Slaag voor sollicitatiegesprekken met de Hintsage AI-assistent

Antwoord.

In TypeScript (zoals in modern JavaScript) kunnen variabelen worden gedeclareerd met let, const en var, en er zijn belangrijke verschillen tussen deze drie:

  • let — Blok-scope, de variabele kan opnieuw worden toegewezen (een nieuwe waarde krijgen), maar niet opnieuw worden gedeclareerd in dezelfde scope.
  • const — Ook blok-scope, de waarde moet onmiddellijk worden toegewezen, kan niet worden herschreven (maar de interne eigenschappen van een object dat via const is gedeclareerd, zijn wijzigbaar!).
  • var — Functie-scope, mechanismen van hoisting zijn mogelijk, de variabele kan opnieuw worden gedeclareerd en gewijzigd.

Voorbeeld:

if (true) { let a = 10; const b = 20; var c = 30; } console.log(c); // 30 — zichtbaar buiten de blok! console.log(a); // Error: a is niet gedefinieerd console.log(b); // Error: b is niet gedefinieerd

Typische scenario's:

  • const — voor waarden die niet mogen veranderen (constanten, instellingen, functie verwijzingen).
  • let — voor waarden die tijdens de uitvoering veranderen (tellers, variabelen in een loop).
  • var — wordt niet aanbevolen, alleen voor het ondersteunen van oude code.

Misleidende vraag.

Kan const een object volledig onveranderlijk maken? Leg uit en geef een voorbeeld.

Antwoord: Nee, const voorkomt alleen dat de referentie zelf verandert, maar beschermt niet tegen wijzigingen in de eigenschappen van het object!

const obj = { x: 1 }; obj.x = 2; // Dit is toegestaan! obj = { x: 3 }; // Fout: toewijzing van een nieuwe referentie

Voor volledige immutable gebruiken we Object.freeze:

const frozen = Object.freeze({ x: 1 }); frozen.x = 2; // Fout in strikte modus, maar de compiler waarschuwt niet altijd!

Voorbeelden van echte fouten door onwetendheid over de nuances van het onderwerp.


Verhaal

Tijdens de migratie van een groot frontend-project naar TypeScript hebben ontwikkelaars massaal var vervangen door let, zonder rekening te houden met het feit dat de scope nu blok-scope is. Dit leidde ertoe dat tellers in sommige for-loops niet buiten de loop beschikbaar waren, wat leidde tot onverwachte fouten in de logica: de code stopte met werken bij pogingen om naar de loop teller te verwijzen na het beëindigen van de loop.


Verhaal

Een ontwikkelaar declareerde een constante via const voor het opslaan van een configuratieobject, in de veronderstelling dat de eigenschappen beschermd waren tegen wijzigingen. Later veranderde een andere plaats in de runtime het eigenschap: dit veroorzaakte moeilijk te traceren fouten in het gegevensverwerkingsproces, omdat externe code "onverwacht" de globale instellingen voor alle gebruikers wijzigde.


Verhaal

In het project werden let, const en var tegelijkertijd gebruikt zonder een duidelijke beleid. Eén component herdeclareerde een var-variabele binnen de functie, terwijl een andere plek verwachtte dat de variabele was gedeclareerd met let en daardoor buiten de blok niet zichtbaar zou zijn. Resultaat: variabelen werden overschreven, interne logica faalde en complexe debug problemen met onduidelijke levenscyclus van variabelen.