Frontend Academy · Les

Template literals en optional chaining

Voeg expressies in strings in met template literals, benader geneste eigenschappen veilig met ?. en gebruik de nullish coalescing-operator ?? voor kortsluiting.

Les 3 van 413 stappen

Template literals en optional chaining is een gratis Frontend Academy-les op CoddyKit. Dit is les 3 van 4. Je kunt de volledige les hieronder gratis lezen en daarna in de browser praktisch oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Frontend Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Frontend Academy bevat in totaal 4 lessen.

Template-literals: tekenreeksen met backticks

Template-literals (tekenreeksen met backticks) ondersteunen tekenreeksen over meerdere regels en ingesloten expressies. Ze vervangen het samenvoegen van tekenreeksen met + en maken de bedoeling duidelijker.

// String concatenation (old way):
const msg = 'Hello, ' + name + '! You have ' + count + ' messages.';

// Template literal (modern):
const msg2 = `Hello, ${name}! You have ${count} messages.`;

Template-literals over meerdere regels

Template-literals behouden regeleinden en inspringing. Je hebt niet langer \n of het samenvoegen van tekenreeksen over meerdere regels nodig.

const html = `
  <div class="card">
    <h2>${title}</h2>
    <p>${body}</p>
  </div>
`;

const sql = `
  SELECT *
  FROM users
  WHERE age > ${minAge}
  ORDER BY name
`;

Expressies in template-literals

Elke JavaScript-expressie kan binnen ${} staan: ternaire expressies, functieaanroepen, rekenkundige bewerkingen en methodeaanroepen.

const tax = 0.2;
const price = 50;
const receipt = `
  Subtotal: $${price}
  Tax (${tax * 100}%): $${price * tax}
  Total: $${price * (1 + tax)}
  ${isPaid ? 'PAID' : 'UNPAID'}
`;

Getagde template-literals

Een getagde template roept een functie aan met de tekenreeksdelen en geïnterpoleerde waarden als argumenten. Bibliotheken zoals styled-components, GraphQL (gql``) en sql`` gebruiken dit om veilige query's op te bouwen.

function highlight(strings, ...values) {
  return strings.reduce((acc, str, i) =>
    acc + str + (values[i] !== undefined ? `<mark>${values[i]}</mark>` : ''), '');
}
const msg = highlight`Hello ${name}, you have ${count} messages.`;

Optionele chaining: ?.

De operator voor optionele chaining ?. stopt de evaluatie en levert undefined op in plaats van een TypeError als de linkerkant null of undefined is. Zo heb je geen defensieve controles op null meer nodig.

const user = null;

// Without optional chaining (throws TypeError):
// user.profile.avatar

// With optional chaining (returns undefined):
const avatar = user?.profile?.avatar;
console.log(avatar); // undefined — no error

Optionele methodeaanroepen

obj?.method() roept de methode alleen aan als obj niet null of undefined is. Als obj null is, wordt undefined geretourneerd zonder dat er een fout wordt gegenereerd.

const timer = getTimer(); // might return null
timer?.start(); // only calls start() if timer exists

// Also works on array access:
const firstItem = arr?.[0]; // undefined if arr is null

Nullish-coalescing: ??

De nullish-coalescingoperator ?? retourneert de rechterkant alleen als de linkerkant null of undefined is (en niet alleen een onware waarde). In tegenstelling tot || behandelt deze operator 0 of '' niet als nullish.

const port = config.port ?? 3000;  // 3000 only if port is null/undefined
const name = user.name ?? 'Anonymous';

// Compare with ||:
console.log(0 ?? 'default');   // 0 (not nullish)
console.log(0 || 'default');   // 'default' (falsy!)

Nullish-toewijzing: ??=

a ??= b wijst b toe aan a alleen als a null of undefined is. Dit is een korte vorm van a = a ?? b. Handig om objecteigenschappen voorwaardelijk te initialiseren.

let cache = {};
function getUser(id) {
  cache[id] ??= fetchUser(id); // only fetch if not cached
  return cache[id];
}

Logische toewijzingsoperatoren

&&= wijst alleen toe als de linkerkant waarheidsgetrouw is. ||= wijst alleen toe als de linkerkant onwaar is. Samen met ??= maken deze operatoren voorwaardelijke toewijzingen beknopt.

user.name ||= 'Anonymous';  // set if falsy
user.role &&= user.role.toLowerCase(); // transform if exists

?. en ?? combineren

Combineer optionele chaining en nullish-coalescing voor veilige toegang tot eigenschappen met een standaardwaarde.

const city = user?.address?.city ?? 'Unknown';
const total = cart?.items?.length ?? 0;

Tekenreeksmethoden die je moet kennen

Veelgebruikte tekenreeksmethoden: trim(), trimStart(), trimEnd(), padStart(), padEnd(), startsWith(), endsWith(), includes(), replaceAll(), at().

const str = '  Hello World  ';
str.trim();           // 'Hello World'
str.includes('World'); // true
'5'.padStart(3, '0'); // '005'
'abc'.at(-1);         // 'c'
'aabbcc'.replaceAll('b', 'x'); // 'aaxxcc'

Korte controle

Wat retourneert const val = obj?.foo?.bar ?? 'default' als obj null is?

Beantwoord dit in de interactieve les

Samenvatting: template-literals en optionele chaining

Tekenreeksen met backticks ondersteunen expressies en meerdere regels. Getagde templates maken DSL's mogelijk. ?. geeft veilig toegang tot eigenschappen zonder controles op null. ?? levert een standaardwaarde als de waarde null of undefined is (en niet alleen onwaar). Combineer ze voor veilige, leesbare toegang tot gegevens met standaardwaarden.

Gratis beginnen

Leer HTML met een AI-tutor — gratis

Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.

Cursussen: 41
Lessen: 163

Gratis beginnen met leren Bekijk de volledige cursus

Veelgestelde vragen

Is de les “Template literals en optional chaining” gratis?

Ja — de volledige tekst van “Template literals en optional chaining” kun je hier gratis op het web lezen. Als je interactief wilt oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is, en de rest van de cursus Frontend Academy wilt ontgrendelen, kun je upgraden naar CoddyKit PRO. De cursus Frontend Academy bevat in totaal 4 lessen.

Wat leer ik in “Template literals en optional chaining”?

Voeg expressies in strings in met template literals, benader geneste eigenschappen veilig met ?. en gebruik de nullish coalescing-operator ?? voor kortsluiting. Je oefent met Frontend Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.

Heb ik ervaring nodig om met Frontend Academy te beginnen?

Ervaring vooraf is niet nodig. Frontend Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 3 van 4.

Hoe lang duurt de les “Template literals en optional chaining”?

De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.

Kan ik code schrijven en uitvoeren in deze les over Frontend Academy?

Ja. Elke les over Frontend Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.

Alle lessen in deze cursus

← Terug naar Frontend Academy