Live Coding

Hoe controleer ik of een JavaScript-object leeg is?

Uitleg: Een object is leeg als het geen eigen opsombare eigenschappen heeft. We kunnen Object.keys(obj) gebruiken, wat een array retourneert van de eigen opsombare eigenschapsnamen van een opgegeven object. Als de lengte van deze array 0 is, is het object leeg.

function isEmpty(obj) {
  return Object.keys(obj).length === 0;
}

console.log(isEmpty({})); // true
console.log(isEmpty({ a: 1 })); // false

Schrijf een functie om een gegeven string om te keren.

Uitleg: De eenvoudigste manier is om de string om te zetten in een array van karakters, de ingebouwde reverse()-methode voor arrays te gebruiken en vervolgens de karakters weer samen te voegen tot een string.

function reverseString(str) {
  return str.split('').reverse().join('');
}

console.log(reverseString('hello')); // 'olleh'

Schrijf een functie die controleert of een gegeven string een palindroom is.

Uitleg: Een palindroom is een woord of zin die zowel vooruit als achteruit hetzelfde leest. We kunnen dit controleren door de string om te keren (gevoeligheid voor hoofdletters en niet-alfanumerieke karakters negeren voor een robuustere controle, maar hier doen we een eenvoudige controle) en deze te vergelijken met het origineel.

function isPalindrome(str) {
  const reversed = str.split('').reverse().join('');
  return str === reversed;
}

console.log(isPalindrome('racecar')); // true
console.log(isPalindrome('hello')); // false

Schrijf een functie om het grootste getal in een array van getallen te vinden.

Uitleg: Je kunt door de array itereren en het tot nu toe gevonden grootste getal bijhouden. Als alternatief kun je de Math.max()-functie gebruiken samen met de spread-syntax (...) om array-elementen als argumenten door te geven.

function findMaxNumber(arr) {
  if (arr.length === 0) return undefined; // Of gooi een fout
  return Math.max(...arr);
}

console.log(findMaxNumber([1, 5, 2, 9, 3])); // 9

Schrijf een programma dat getallen van 1 tot n afdrukt. Maar voor veelvouden van drie, print 'Fizz' in plaats van het getal en voor veelvouden van vijf, print 'Buzz'. Voor getallen die veelvouden zijn van zowel drie als vijf, print 'FizzBuzz'.

Uitleg: Dit klassieke probleem test basislus- en conditionele logica. Je moet van 1 tot n itereren en de modulo-operator (%) gebruiken om te controleren op deelbaarheid door 3 en 5.

function fizzBuzz(n) {
  for (let i = 1; i <= n; i++) {
    if (i % 3 === 0 && i % 5 === 0) {
      console.log('FizzBuzz');
    } else if (i % 3 === 0) {
      console.log('Fizz');
    } else if (i % 5 === 0) {
      console.log('Buzz');
    } else {
      console.log(i);
    }
  }
}

fizzBuzz(15);

Schrijf een functie die dubbele elementen uit een array verwijdert.

Uitleg: Een moderne en beknopte manier om dit te bereiken is door een Set te gebruiken. Sets slaan alleen unieke waarden op. Je kunt de array converteren naar een Set en vervolgens weer terug naar een array.

function removeDuplicates(arr) {
  return [...new Set(arr)];
}

console.log(removeDuplicates([1, 2, 2, 3, 4, 4, 5])); // [1, 2, 3, 4, 5]

Schrijf een functie om te controleren of twee strings anagrammen van elkaar zijn.

Uitleg: Anagrammen zijn woorden die zijn gevormd door de letters van een ander woord te herschikken. Om te controleren, kunnen we de strings opschonen, sorteren en vergelijken. Opschonen omvat het verwijderen van niet-alfanumerieke karakters en het converteren naar een consistente hoofdletter.

function isAnagram(str1, str2) {
  const clean = (str) => str.replace(/[^a-z0-9]/gi, '').toLowerCase();
  const sorted = (str) => clean(str).split('').sort().join('');
  
  return sorted(str1) === sorted(str2);
}

console.log(isAnagram('listen', 'silent')); // true
console.log(isAnagram('hello', 'world')); // false

Schrijf een functie om de faculteit van een niet-negatief geheel getal te berekenen.

Uitleg: De faculteit (n!) van een getal is het product van alle positieve gehele getallen kleiner dan of gelijk aan n. We kunnen dit iteratief berekenen door getallen van 1 tot n te vermenigvuldigen.

function factorial(n) {
  if (n < 0) return undefined; // Faculteit is niet gedefinieerd voor negatieve getallen
  if (n === 0) return 1;
  let result = 1;
  for (let i = 1; i <= n; i++) {
    result *= i;
  }
  return result;
}

console.log(factorial(5)); // 120

Schrijf een functie die de som van alle getallen in een array retourneert.

Uitleg: Je kunt de reduce-methode gebruiken, die ideaal is voor het accumuleren van een enkele waarde uit een array. Het neemt een callback-functie en een initiële waarde (0 voor optelling).

function sumArray(arr) {
  return arr.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
}

console.log(sumArray([1, 2, 3, 4])); // 10

Schrijf een functie om een geneste array plat te maken. Ga voor de eenvoud uit van slechts één niveau van nesting.

Uitleg: Voor één niveau van nesting kun je Array.prototype.concat() gebruiken met de spread-operator of de flat()-methode (ES2019).

function flattenArray(arr) {
  // flat() gebruiken (eenvoudiger als ES2019+ oké is)
  // return arr.flat();

  // reduce en concat gebruiken
  return arr.reduce((acc, val) => acc.concat(val), []);
}

console.log(flattenArray([1, [2, 3], 4, [5]])); // [1, 2, 3, 4, 5]

Schrijf een functie die het aantal klinkers (a, e, i, o, u) in een gegeven string telt.

Uitleg: Itereren door de string (ongevoelig voor hoofdletters) en controleren of elk karakter een klinker is. Houd een teller bij.

function countVowels(str) {
  const vowels = 'aeiou';
  let count = 0;
  for (let char of str.toLowerCase()) {
    if (vowels.includes(char)) {
      count++;
    }
  }
  return count;
}

console.log(countVowels('Hello World')); // 3

Schrijf een functie die een zin omzet in titelletters (de eerste letter van elk woord met een hoofdletter).

Uitleg: Splits de zin in woorden, itereer vervolgens door elk woord, waarbij de eerste letter een hoofdletter krijgt en de rest kleine letters. Voeg tot slot de woorden weer samen.

function titleCase(str) {
  return str.toLowerCase().split(' ').map(word => {
    return word.charAt(0).toUpperCase() + word.slice(1);
  }).join(' ');
}

console.log(titleCase('i am a little tea pot')); // 'I Am A Little Tea Pot'

Gegeven een array van gehele getallen nums en een geheel getal target, retourneer de indices van de twee getallen zodat ze samen target zijn.

Uitleg: Een veelgebruikte aanpak is het gebruik van een hash map (of een JavaScript-object) om getallen en hun indices op te slaan terwijl je itereert. Voor elk getal controleer je of target - current_number bestaat in de map.

function twoSum(nums, target) {
  const map = {};
  for (let i = 0; i < nums.length; i++) {
    const complement = target - nums[i];
    if (map[complement] !== undefined) {
      return [map[complement], i];
    }
    map[nums[i]] = i;
  }
  return []; // Of null, of gooi een fout als er geen oplossing is
}

console.log(twoSum([2, 7, 11, 15], 9)); // [0, 1]

Maak een functie die een tellingsfunctie retourneert. Elke keer dat de geretourneerde functie wordt aangeroepen, moet deze een telling verhogen en retourneren.

Uitleg: Dit demonstreert closures. De innerlijke functie heeft toegang tot de count-variabele van het bereik van de buitenste functie, zelfs nadat de buitenste functie is voltooid.

function createCounter() {
  let count = 0;
  return function() {
    count++;
    return count;
  };
}

const counter1 = createCounter();
console.log(counter1()); // 1
console.log(counter1()); // 2
const counter2 = createCounter();
console.log(counter2()); // 1

Schrijf een functie die het eerste niet-herhalende karakter in een string vindt.

Uitleg: Je kunt een hash map gebruiken om karakterfrequenties te tellen. Itereer eerst door de string om de frequentiemap op te bouwen. Itereer vervolgens opnieuw door de string en retourneer het eerste karakter met een telling van 1.

function firstNonRepeatingChar(str) {
  const charCount = {};
  for (const char of str) {
    charCount[char] = (charCount[char] || 0) + 1;
  }
  for (const char of str) {
    if (charCount[char] === 1) {
      return char;
    }
  }
  return null; // Of een indicator als alles herhaalt
}

console.log(firstNonRepeatingChar('aabbcdeeff')); // 'c'
console.log(firstNonRepeatingChar('swiss')); // 'w'

Schrijf een functie die een array in groepen van een opgegeven grootte splitst.

Uitleg: Itereren door de array, slices van de opgegeven grootte nemen en deze in een nieuwe array pushen. Behandel het geval waarin het laatste chunk kleiner kan zijn.

function chunkArray(arr, size) {
  const chunked = [];
  let index = 0;
  while (index < arr.length) {
    chunked.push(arr.slice(index, index + size));
    index += size;
  }
  return chunked;
}

console.log(chunkArray([1, 2, 3, 4, 5, 6, 7], 3)); // [[1, 2, 3], [4, 5, 6], [7]]

Schrijf een functie om te bepalen of een gegeven getal een priemgetal is.

Uitleg: Een priemgetal is een natuurlijk getal groter dan 1 dat geen andere positieve delers heeft dan 1 en zichzelf. Itereren van 2 tot de vierkantswortel van het getal, controleren op deelbaarheid. Behandel randgevallen zoals 1 en 2.

function isPrime(num) {
  if (num <= 1) return false;
  if (num <= 3) return true;

  if (num % 2 === 0 || num % 3 === 0) return false;

  for (let i = 5; i * i <= num; i = i + 6) {
    if (num % i === 0 || num % (i + 2) === 0) return false;
  }

  return true;
}

console.log(isPrime(7)); // true
console.log(isPrime(10)); // false

Schrijf een functie die het langste woord in een zin vindt.

Uitleg: Splits de string in een array van woorden. Itereren vervolgens door de array en houd het langste woord bij dat tot nu toe is gevonden (of de lengte ervan).

function findLongestWord(str) {
  const words = str.split(' ');
  let longestWord = '';
  for (const word of words) {
    // Woorden opschonen indien nodig (bijv. leestekens verwijderen)
    if (word.length > longestWord.length) {
      longestWord = word;
    }
  }
  return longestWord;
}

console.log(findLongestWord('The quick brown fox jumped over the lazy dog')); // 'jumped'

Implementeer je eigen versie van de Array.prototype.map-functie.

Uitleg: De map-functie neemt een callback en creëert een nieuwe array door de callback toe te passen op elk element van de originele array. Je functie moet door de array itereren en de nieuwe array opbouwen.

function myMap(arr, callback) {
  const mappedArray = [];
  for (let i = 0; i < arr.length; i++) {
    mappedArray.push(callback(arr[i], i, arr));
  }
  return mappedArray;
}

const numbers = [1, 4, 9];
const roots = myMap(numbers, Math.sqrt);
console.log(roots); // [1, 2, 3]

Implementeer je eigen versie van de Array.prototype.filter-functie.

Uitleg: De filter-functie neemt een callback en creëert een nieuwe array met alle elementen die de test doorstaan die is geïmplementeerd door de meegeleverde callback-functie.

function myFilter(arr, callback) {
  const filteredArray = [];
  for (let i = 0; i < arr.length; i++) {
    if (callback(arr[i], i, arr)) {
        filteredArray.push(arr[i]);
    }
  }
  return filteredArray;
}

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
const result = myFilter(words, word => word.length > 6);
console.log(result); // ['exuberant', 'destruction', 'present']

Implementeer je eigen versie van de Array.prototype.reduce-functie.

Uitleg: De reduce-functie voert een door de gebruiker geleverde 'reducer'-callback-functie uit op elk element van de array, waarbij de retourwaarde van de berekening op het voorafgaande element wordt doorgegeven. Het eindresultaat van het uitvoeren van de reducer over alle elementen van de array is een enkele waarde. Behandel het initiële waarde-argument.

function myReduce(arr, callback, initialValue) {
  let accumulator = initialValue;
  let startIndex = 0;

  if (initialValue === undefined) {
      if (arr.length === 0) throw new TypeError('Reduce of empty array with no initial value');
      accumulator = arr[0];
      startIndex = 1;
  }

  for (let i = startIndex; i < arr.length; i++) {
    accumulator = callback(accumulator, arr[i], i, arr);
  }
  return accumulator;
}

const array1 = [1, 2, 3, 4];
const sum = myReduce(array1, (acc, curr) => acc + curr, 0);
console.log(sum); // 10

Implementeer een Fibonacci-functie met behulp van memoization om de prestaties te optimaliseren.

Uitleg: De Fibonacci-reeks omvat herhaalde berekeningen. Memoization slaat de resultaten van dure functieaanroepen op en retourneert het gecachete resultaat wanneer dezelfde invoer opnieuw optreedt.

function memoizedFib() {
  const cache = {};

  function fib(n) {
    if (n in cache) {
      return cache[n];
    }
    if (n <= 1) {
      return n;
    }
    const result = fib(n - 1) + fib(n - 2);
    cache[n] = result;
    return result;
  }
  return fib;
}

const fibonacci = memoizedFib();
console.log(fibonacci(10)); // 55
console.log(fibonacci(40)); // 102334155 (veel sneller dan niet-gemoizeerde)

Schrijf een functie om te controleren of een string die haken {}[]() bevat gebalanceerd is.

Uitleg: Gebruik een stapel. Wanneer je een openingshaak tegenkomt, push je deze op de stapel. Wanneer je een sluitingshaak tegenkomt, controleer je of de stapel leeg is of dat het bovenste element de overeenkomende openingshaak is. Als het overeenkomt, pop je de stapel. Zo niet, of als de stapel leeg is, is het ongebalanceerd. Aan het einde betekent een lege stapel gebalanceerd.

function isBalanced(str) {
  const stack = [];
  const map = { '(': ')', '{': '}', '[': ']' };

  for (let char of str) {
    if (map[char]) {
      stack.push(char);
    } else if (Object.values(map).includes(char)) {
      if (stack.length === 0) return false;
      const lastOpen = stack.pop();
      if (map[lastOpen] !== char) return false;
    }
  }
  return stack.length === 0;
}

console.log(isBalanced('({[]})')); // true
console.log(isBalanced('([)]')); // false

Implementeer een wachtrijgegevensstructuur met enqueue- (toevoegen aan achterkant) en dequeue- (verwijderen van voorkant) methoden.

Uitleg: Een wachtrij volgt het First-In, First-Out (FIFO) principe. Een array kan worden gebruikt, met push voor enqueue en shift voor dequeue.

class Queue {
  constructor() {
    this.items = [];
  }

  enqueue(element) {
    this.items.push(element);
  }

  dequeue() {
    if (this.isEmpty()) return 'Underflow';
    return this.items.shift();
  }

  front() {
    if (this.isEmpty()) return 'No elements in Queue';
    return this.items[0];
  }

  isEmpty() {
    return this.items.length === 0;
  }
}

const q = new Queue();
q.enqueue(10);
q.enqueue(20);
console.log(q.dequeue()); // 10
console.log(q.front()); // 20

Implementeer een stapelgegevensstructuur met push- (toevoegen aan bovenkant) en pop- (verwijderen van bovenkant) methoden.

Uitleg: Een stapel volgt het Last-In, First-Out (LIFO) principe. Een array kan worden gebruikt, met push en pop methoden.

class Stack {
  constructor() {
    this.items = [];
  }

  push(element) {
    this.items.push(element);
  }

  pop() {
    if (this.isEmpty()) return 'Underflow';
    return this.items.pop();
  }

  peek() {
    return this.items[this.items.length - 1];
  }

  isEmpty() {
    return this.items.length === 0;
  }
}

const s = new Stack();
s.push(10);
s.push(20);
console.log(s.pop()); // 20
console.log(s.peek()); // 10

Gegeven een array met n verschillende getallen genomen uit 0, 1, 2, ..., n, vind het getal dat ontbreekt in de array.

Uitleg: De som van getallen van 0 tot n kan worden berekend met behulp van de formule n*(n+1)/2. De werkelijke som van de array-elementen kan worden berekend. Het verschil tussen deze twee sommen is het ontbrekende getal.

function findMissingNumber(nums) {
  const n = nums.length;
  const expectedSum = n * (n + 1) / 2;
  const actualSum = nums.reduce((sum, num) => sum + num, 0);
  return expectedSum - actualSum;
}

console.log(findMissingNumber([3, 0, 1])); // 2
console.log(findMissingNumber([9, 6, 4, 2, 3, 5, 7, 0, 1])); // 8

Implementeer een debounce-functie. Debouncing zorgt ervoor dat een functie pas opnieuw wordt aangeroepen nadat een bepaalde hoeveelheid tijd is verstreken zonder dat deze is aangeroepen.

Uitleg: Gebruik setTimeout en clearTimeout. Elke keer dat de gedebounceerde functie wordt aangeroepen, wis je de vorige timeout en stel je een nieuwe in. De feitelijke functieaanroep vindt alleen plaats wanneer de timeout is voltooid.

function debounce(func, delay) {
  let timeoutId;
  return function(...args) {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => {
      func.apply(this, args);
    }, delay);
  };
}

// Voorbeeldgebruik:
const sayHello = () => console.log('Hello!');
const debouncedHello = debounce(sayHello, 1000);
debouncedHello(); // Aangeroepen na 1 sec (als niet opnieuw aangeroepen)
debouncedHello(); // Reset timer
debouncedHello(); // Reset timer, zal daadwerkelijk 1 sec na deze oproep worden uitgevoerd.

Implementeer een throttle-functie. Throttling zorgt ervoor dat een functie maximaal één keer binnen een opgegeven tijdsinterval wordt aangeroepen.

Uitleg: Gebruik een vlag om aan te geven of een oproep is toegestaan. Indien toegestaan, voer de functie uit, zet de vlag op false en gebruik setTimeout om de vlag na het interval te resetten.

function throttle(func, limit) {
  let inThrottle = false;
  return function(...args) {
    if (!inThrottle) {
      func.apply(this, args);
      inThrottle = true;
      setTimeout(() => inThrottle = false, limit);
    }
  };
}

// Voorbeeldgebruik:
const logScroll = () => console.log('Scrolling...');
const throttledScroll = throttle(logScroll, 1000);
// window.addEventListener('scroll', throttledScroll); // Zal maximaal één keer per seconde loggen.

Schrijf een functie die een functie met twee argumenten neemt en een gecurriede versie ervan retourneert.

Uitleg: Currying transformeert een functie met meerdere argumenten in een reeks functies, elk met een enkel argument. f(a, b) wordt f(a)(b).

function curry(fn) {
  return function(a) {
    return function(b) {
      return fn(a, b);
    };
  };
}

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

const curriedAdd = curry(add);
const add5 = curriedAdd(5);
console.log(add5(3)); // 8
console.log(curriedAdd(10)(20)); // 30

Schrijf een functie om een diepe kloon van een JavaScript-object uit te voeren.

Uitleg: Een ondiepe kloon kopieert alleen de eigenschappen op het hoogste niveau. Een diepe kloon kopieert recursief alle eigenschappen, inclusief geneste objecten en arrays. Een eenvoudige manier (met beperkingen, bijv. verwerkt functies, datums, regex niet goed) is het gebruik van JSON.parse(JSON.stringify(obj)). Een recursieve benadering is robuuster.

function deepClone(obj) {
  // Eenvoudige versie (met beperkingen)
  try {
      return JSON.parse(JSON.stringify(obj));
  } catch (e) {
      console.error("Cloning failed:", e);
      return null;
  }
  
  // Robustere recursieve (basisvoorbeeld):
  /*
  if (obj === null || typeof obj !== 'object') {
      return obj;
  }
  let clone = Array.isArray(obj) ? [] : {};
  for (let key in obj) {
      if (Object.prototype.hasOwnProperty.call(obj, key)) {
          clone[key] = deepClone(obj[key]);
      }
  }
  return clone;
  */
}

const original = { a: 1, b: { c: 2 } };
const cloned = deepClone(original);
cloned.b.c = 3;
console.log(original.b.c); // 2 (bewijst dat het een diepe kloon is)
console.log(cloned.b.c); // 3

Hoe krijg ik een array van sleutels uit een object?

Uitleg: Gebruik Object.keys(obj).

function getKeys(obj) {
  return Object.keys(obj);
}
console.log(getKeys({a: 1, b: 2})); // ['a', 'b']

Hoe krijg ik een array van waarden uit een object?

Uitleg: Gebruik Object.values(obj).

function getValues(obj) {
  return Object.values(obj);
}
console.log(getValues({a: 1, b: 2})); // [1, 2]

Hoe controleer ik of een array een specifieke waarde bevat?

Uitleg: Gebruik Array.prototype.includes(value).

function checkIncludes(arr, val) {
  return arr.includes(val);
}
console.log(checkIncludes([1, 2, 3], 2)); // true

Hoe voeg ik twee arrays samen tot één?

Uitleg: Gebruik de spread-syntax (...) of Array.prototype.concat().

function mergeArrays(arr1, arr2) {
  return [...arr1, ...arr2];
}
console.log(mergeArrays([1, 2], [3, 4])); // [1, 2, 3, 4]

Waar verwijst this naar in de globale scope in een browser?

Uitleg: In de globale uitvoeringscontext (buiten elke functie) verwijst this naar het globale object, dat window is in webbrowsers.

console.log(this === window); // true (in een browseromgeving)

Waar verwijst this naar wanneer het wordt gebruikt in een objectmethode?

Uitleg: Wanneer een functie wordt aangeroepen als een methode van een object, verwijst this naar het object waarop de methode wordt aangeroepen.

const myObject = {
  prop: 'Hello',
  greet() {
    return this.prop;
  }
};
console.log(myObject.greet()); // 'Hello'

Hoe gaan pijpfuncties (arrow functions) om met this?

Uitleg: Pijpfuncties hebben geen eigen this-context. In plaats daarvan erven ze this van de omringende (lexicale) scope waarin ze zijn gedefinieerd.

function MyClass() {
  this.value = 42;
  setTimeout(() => {
    console.log(this.value); // Logt 42 omdat 'this' is geërfd
  }, 100);
}
new MyClass();

Wat zijn de belangrijkste verschillen tussen let, const en var?

Uitleg: var is functie-scoped en gehoisted. let en const zijn blok-scoped en gehoisted, maar bevinden zich in een 'temporele dode zone' tot de declaratie. const moet worden geïnitialiseerd en kan niet opnieuw worden toegewezen.

function scopeTest() {
  var a = 1;
  let b = 2;
  const c = 3;
  if (true) {
    var a = 10; // Herdeclareert en beïnvloedt buitenste 'a'
    let b = 20; // Nieuwe 'b' binnen blok
    // const c = 30; // Zou een nieuwe 'c' zijn
    console.log(a, b, c); // 10, 20, 3
  }
  console.log(a, b, c); // 10, 2, 3
}
scopeTest();

Leg uit wat een Promise is in JavaScript.

Uitleg: Een Promise is een object dat de uiteindelijke voltooiing (of mislukking) van een asynchrone bewerking en de resulterende waarde vertegenwoordigt. Het kan zich in een van de drie staten bevinden: pending, fulfilled of rejected.

const myPromise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Success!');
    // reject('Error!');
  }, 1000);
});

myPromise
  .then(result => console.log(result))
  .catch(error => console.error(error));

Hoe vereenvoudigen async en await het werken met Promises?

Uitleg: async/await biedt syntactische suiker over Promises, waardoor asynchrone code er meer synchroon uitziet en zich gedraagt. Een async-functie retourneert altijd een Promise, en await pauzeert de uitvoering totdat een Promise is afgerond.

function delay(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function run() {
  console.log('Starting...');
  await delay(1000);
  console.log('Waited 1 second.');
  await delay(500);
  console.log('Waited another 0.5 seconds.');
  return 'Finished!';
}

run().then(console.log);

Hoe converteer ik een string naar een getal?

Uitleg: Gebruik parseInt(), parseFloat() of de unaire plus-operator (+).

const str = '123.45';
console.log(parseInt(str)); // 123
console.log(parseFloat(str)); // 123.45
console.log(+str); // 123.45

Hoe converteer ik een getal naar een string?

Uitleg: Gebruik String(), number.toString() of string-concatenatie.

const num = 123;
console.log(String(num)); // '123'
console.log(num.toString()); // '123'
console.log('' + num); // '123'

Wat doet JSON.stringify?

Uitleg: Het converteert een JavaScript-object of -waarde naar een JSON-string.

const obj = { name: 'Alice', age: 30 };
const jsonString = JSON.stringify(obj);
console.log(jsonString); // '{"name":"Alice","age":30}'

Wat doet JSON.parse?

Uitleg: Het parseert een JSON-string en construeert de JavaScript-waarde of het object dat door de string wordt beschreven.

const jsonString = '{"name":"Alice","age":30}';
const obj = JSON.parse(jsonString);
console.log(obj.name); // 'Alice'

Hoe wordt de spread-operator gebruikt met arrays?

Uitleg: Het stelt een iterable (zoals een array) in staat om te worden uitgebreid op plaatsen waar nul of meer argumenten of elementen worden verwacht. Handig voor kopiëren, samenvoegen en toevoegen van elementen.

const arr1 = [1, 2];
const arr2 = [3, 4];
const combined = [...arr1, ...arr2]; // [1, 2, 3, 4]
const copy = [...arr1]; // [1, 2]

Hoe wordt de spread-operator gebruikt met objecten?

Uitleg: Het maakt het kopiëren en samenvoegen van objecteigenschappen mogelijk.

const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };
const merged = { ...obj1, ...obj2 }; // { a: 1, b: 3, c: 4 }
const copy = { ...obj1 }; // { a: 1, b: 2 }

Leg array-ontleding uit met een voorbeeld.

Uitleg: Het is een syntax die het mogelijk maakt om waarden uit arrays uit te pakken in afzonderlijke variabelen.

const [a, b] = [10, 20];
console.log(a); // 10
console.log(b); // 20

const [x, , z] = [1, 2, 3];
console.log(z); // 3

Leg object-ontleding uit met een voorbeeld.

Uitleg: Het maakt het mogelijk om eigenschappen uit objecten uit te pakken in afzonderlijke variabelen.

const person = { name: 'Bob', age: 25 };
const { name, age } = person;
console.log(name); // 'Bob'
console.log(age); // 25

const { name: personName } = person;
console.log(personName); // 'Bob'

Hoe zou je een basisversie van Function.prototype.call kunnen implementeren?

Uitleg: call roept een functie aan met een opgegeven this-waarde en argumenten die afzonderlijk zijn opgegeven. Je kunt de functie aan de this-context koppelen, deze aanroepen en vervolgens verwijderen.

Function.prototype.myCall = function(context, ...args) {
  context = context || window;
  const uniqueId = Symbol(); // Gebruik een unieke sleutel
  context[uniqueId] = this;
  const result = context[uniqueId](...args);
  delete context[uniqueId];
  return result;
}

function greet(greeting, punctuation) {
  console.log(`${greeting}, ${this.name}${punctuation}`);
}

greet.myCall({ name: 'Charlie' }, 'Hi', '!'); // Hi, Charlie!

Hoe zou je een basisversie van Function.prototype.apply kunnen implementeren?

Uitleg: apply is vergelijkbaar met call, maar het accepteert argumenten als een array.

Function.prototype.myApply = function(context, argsArray) {
  context = context || window;
  const uniqueId = Symbol();
  context[uniqueId] = this;
  const result = context[uniqueId](...(argsArray || []));
  delete context[uniqueId];
  return result;
}

function greet(greeting, punctuation) {
  console.log(`${greeting}, ${this.name}${punctuation}`);
}

greet.myApply({ name: 'David' }, ['Hello', '.']); // Hello, David.

Leg in het kort de JavaScript Event Loop uit.

Uitleg: JavaScript is single-threaded, maar bereikt gelijktijdigheid met behulp van een event loop. De call stack verwerkt synchrone code. Web-API's verwerken asynchrone bewerkingen (zoals setTimeout, fetch). Wanneer een asynchrone bewerking is voltooid, gaat de callback naar de callback queue (of microtask queue voor Promises). De event loop controleert constant of de call stack leeg is; als dat zo is, verplaatst het de volgende callback van de queue naar de stack voor uitvoering.

console.log('Start');

setTimeout(() => {
  console.log('Timeout Callback'); // Gaat naar Callback Queue
}, 0);

Promise.resolve().then(() => {
  console.log('Promise Resolved'); // Gaat naar Microtask Queue
});

console.log('End');

// Uitvoer Volgorde: Start, End, Promise Resolved, Timeout Callback
// (Microtasks worden uitgevoerd vóór Macrotasks/Callbacks)

Implementeer een binaire zoekfunctie voor een gesorteerde array.

Uitleg: Binaire zoekactie vindt efficiënt een item in een gesorteerde array door het zoekinterval herhaaldelijk in tweeën te delen. Als de waarde van de zoektoets kleiner is dan het item in het midden van het interval, verklein dan het interval tot de onderste helft. Anders verklein je het tot de bovenste helft. Dit doe je totdat de waarde is gevonden of het interval leeg is.

function binarySearch(sortedArray, key) {
  let start = 0;
  let end = sortedArray.length - 1;

  while (start <= end) {
    let middle = Math.floor((start + end) / 2);

    if (sortedArray[middle] === key) {
      return middle; // Gevonden
    } else if (sortedArray[middle] < key) {
      start = middle + 1; // Zoek rechterhelft
    } else {
      end = middle - 1; // Zoek linkerhelft
    }
  }
  return -1; // Niet gevonden
}

console.log(binarySearch([1, 3, 5, 7, 9, 11], 7)); // 3
console.log(binarySearch([1, 3, 5, 7, 9, 11], 2)); // -1

Implementeer het Merge Sort algoritme.

Uitleg: Merge Sort is een verdeel-en-heers algoritme. Het verdeelt de invoerarray in twee helften, roept zichzelf aan voor de twee helften en voegt vervolgens de twee gesorteerde helften samen. De merge-functie is cruciaal; deze combineert twee gesorteerde sub-arrays tot één gesorteerde array.

function mergeSort(arr) {
  if (arr.length <= 1) return arr;

  const mid = Math.floor(arr.length / 2);
  const left = mergeSort(arr.slice(0, mid));
  const right = mergeSort(arr.slice(mid));

  return merge(left, right);
}

function merge(left, right) {
  let result = [];
  let leftIndex = 0;
  let rightIndex = 0;

  while (leftIndex < left.length && rightIndex < right.length) {
    if (left[leftIndex] < right[rightIndex]) {
      result.push(left[leftIndex]);
      leftIndex++;
    } else {
      result.push(right[rightIndex]);
      rightIndex++;
    }
  }

  return result.concat(left.slice(leftIndex)).concat(right.slice(rightIndex));
}

console.log(mergeSort([38, 27, 43, 3, 9, 82, 10])); // [3, 9, 10, 27, 38, 43, 82]

Implementeer het Quick Sort algoritme.

Uitleg: Quick Sort is ook een verdeel-en-heers algoritme. Het kiest een element als spil en verdeelt de gegeven array rond de gekozen spil. Elementen kleiner dan de spil gaan naar links, en elementen groter gaan naar rechts. Vervolgens worden de sub-arrays recursief gesorteerd.

function quickSort(arr) {
  if (arr.length <= 1) return arr;

  const pivot = arr[arr.length - 1];
  const left = [];
  const right = [];

  for (let i = 0; i < arr.length - 1; i++) {
    if (arr[i] < pivot) {
      left.push(arr[i]);
    } else {
      right.push(arr[i]);
    }
  }

  return [...quickSort(left), pivot, ...quickSort(right)];
}

console.log(quickSort([10, 8, 2, 1, 6, 3, 9, 4, 7, 5])); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

Implementeer het Bubble Sort algoritme.

Uitleg: Bubble Sort is een eenvoudig sorteeralgoritme dat herhaaldelijk door de lijst stapt, aangrenzende elementen vergelijkt en ze omwisselt als ze in de verkeerde volgorde staan. De doorgang door de lijst wordt herhaald totdat de lijst is gesorteerd.

function bubbleSort(arr) {
  let n = arr.length;
  let swapped;
  do {
    swapped = false;
    for (let i = 0; i < n - 1; i++) {
      if (arr[i] > arr[i + 1]) {
        [arr[i], arr[i + 1]] = [arr[i + 1], arr[i]]; // Wissel
        swapped = true;
      }
    }
    n--; // Optimalisatie: laatste element is al op zijn plaats
  } while (swapped);
  return arr;
}

console.log(bubbleSort([64, 34, 25, 12, 22, 11, 90])); // [11, 12, 22, 25, 34, 64, 90]

Gegeven een string, vind de lengte van de langste substring zonder herhalende karakters.

Uitleg: Gebruik de schuifvenster techniek. Handhaaf een venster (substring) en een set karakters in dat venster. Breid het venster uit door de rechterwijzer te verplaatsen. Als een herhalend karakter wordt gevonden, verklein dan het venster vanaf links totdat het herhalende karakter is verwijderd.

function lengthOfLongestSubstring(s) {
  let maxLength = 0;
  let start = 0;
  const charMap = {};

  for (let end = 0; end < s.length; end++) {
    const char = s[end];
    if (charMap[char] >= start) {
        start = charMap[char] + 1;
    }
    charMap[char] = end;
    maxLength = Math.max(maxLength, end - start + 1);
  }
  return maxLength;
}

console.log(lengthOfLongestSubstring('abcabcbb')); // 3 ('abc')
console.log(lengthOfLongestSubstring('bbbbb')); // 1 ('b')
console.log(lengthOfLongestSubstring('pwwkew')); // 3 ('wke')

Implementeer een Enkelvoudig Gekoppelde Lijst met add- en print-methoden.

Uitleg: Een gekoppelde lijst is een lineaire datastructuur waarbij elementen niet op aaneengesloten geheugenlocaties worden opgeslagen. Elk element (knooppunt) wijst naar het volgende. Je hebt een Node-klasse en een LinkedList-klasse nodig om de kop en het toevoegen van nieuwe knooppunten te beheren.

class Node {
  constructor(data, next = null) {
    this.data = data;
    this.next = next;
  }
}

class LinkedList {
  constructor() {
    this.head = null;
  }

  add(data) {
    const newNode = new Node(data);
    if (!this.head) {
      this.head = newNode;
    } else {
      let current = this.head;
      while (current.next) {
        current = current.next;
      }
      current.next = newNode;
    }
  }

  print() {
    let current = this.head;
    let list = '';
    while (current) {
      list += current.data + ' -> ';
      current = current.next;
    }
    console.log(list + 'null');
  }
}

const list = new LinkedList();
list.add(10);
list.add(20);
list.add(30);
list.print(); // 10 -> 20 -> 30 -> null

Implementeer een Binaire Zoekboom met insert- en find-methoden.

Uitleg: Een BST is een knooppuntgebaseerde binaire boomdatastructuur die de volgende eigenschappen heeft: De linker subboom van een knooppunt bevat alleen knooppunten met sleutels die kleiner zijn dan de sleutel van het knooppunt. De rechter subboom van een knooppunt bevat alleen knooppunten met sleutels die groter zijn dan de sleutel van het knooppunt. Beide subbomen moeten ook binaire zoekbomen zijn.

class Node {
  constructor(data) {
    this.data = data;
    this.left = null;
    this.right = null;
  }
}

class BST {
  constructor() {
    this.root = null;
  }

  insert(data) {
    const newNode = new Node(data);
    if (!this.root) {
      this.root = newNode;
      return;
    }
    this._insertNode(this.root, newNode);
  }

  _insertNode(node, newNode) {
    if (newNode.data < node.data) {
      if (!node.left) node.left = newNode;
      else this._insertNode(node.left, newNode);
    } else {
      if (!node.right) node.right = newNode;
      else this._insertNode(node.right, newNode);
    }
  }

  find(data) {
    return this._findNode(this.root, data);
  }

  _findNode(node, data) {
    if (!node) return null;
    if (data < node.data) return this._findNode(node.left, data);
    else if (data > node.data) return this._findNode(node.right, data);
    else return node;
  }
}

const bst = new BST();
bst.insert(10);
bst.insert(5);
bst.insert(15);
bst.insert(7);
console.log(bst.find(7)); // Node { data: 7, left: null, right: null }
console.log(bst.find(12)); // null

Schrijf een functie om een array naar rechts te roteren met k stappen.

Uitleg: Een array roteren betekent het verplaatsen van de elementen. Voor een rotatie naar rechts wordt het laatste element het eerste. Dit k keer herhalen werkt, maar is inefficiënt. Een betere manier is om array-manipulatie te gebruiken of de nieuwe posities te berekenen.

function rotateArray(nums, k) {
  k = k % nums.length; // Behandel gevallen waarbij k > lengte
  if (k === 0) return nums;

  const partToMove = nums.splice(nums.length - k);
  nums.unshift(...partToMove);
  return nums;
}

console.log(rotateArray([1, 2, 3, 4, 5, 6, 7], 3)); // [5, 6, 7, 1, 2, 3, 4]

Gegeven twee arrays, schrijf een functie om hun doorsnede (elementen die in beide voorkomen) te berekenen.

Uitleg: Een goede aanpak is om één array om te zetten in een Set voor O(1) gemiddelde zoektijden. Doorloop vervolgens de tweede array en controleer of elk element in de set bestaat. Verzamel de overeenkomsten.

function intersection(nums1, nums2) {
  const set1 = new Set(nums1);
  const resultSet = new Set();

  for (const num of nums2) {
    if (set1.has(num)) {
      resultSet.add(num);
    }
  }

  return [...resultSet];
}

console.log(intersection([1, 2, 2, 1], [2, 2])); // [2]
console.log(intersection([4, 9, 5], [9, 4, 9, 8, 4])); // [9, 4]

Gegeven een array van strings, groepeer anagrammen samen.

Uitleg: De sleutel is om een unieke handtekening te vinden voor elke groep anagrammen. Een veelgebruikte manier is om elk woord alfabetisch te sorteren. Woorden die resulteren in dezelfde gesorteerde string zijn anagrammen. Gebruik een hash map waarbij de sleutels gesorteerde woorden zijn en de waarden arrays van originele woorden.

function groupAnagrams(strs) {
  const map = {};
  for (const str of strs) {
    const sortedStr = str.split('').sort().join('');
    if (!map[sortedStr]) {
      map[sortedStr] = [];
    }
    map[sortedStr].push(str);
  }
  return Object.values(map);
}

console.log(groupAnagrams(['eat', 'tea', 'tan', 'ate', 'nat', 'bat'])); 
// Uitvoer: [['eat', 'tea', 'ate'], ['tan', 'nat'], ['bat']]

Gegeven een array nums, schrijf een functie om alle nullen naar het einde te verplaatsen met behoud van de relatieve volgorde van de niet-nul-elementen.

Uitleg: Gebruik een twee-pointer- of sneeuwbal-aanpak. Eén wijzer houdt de positie bij waar het volgende niet-nul-element moet komen. Doorloop de array; als een element niet-nul is, plaats het dan op de positie van de wijzer en verhoog de wijzer. Vul ten slotte de rest met nullen.

function moveZeroes(nums) {
  let nonZeroIndex = 0;

  // Verplaats alle niet-nul elementen naar voren
  for (let i = 0; i < nums.length; i++) {
    if (nums[i] !== 0) {
      nums[nonZeroIndex] = nums[i];
      nonZeroIndex++;
    }
  }

  // Vul de rest met nullen
  for (let i = nonZeroIndex; i < nums.length; i++) {
    nums[i] = 0;
  }

  return nums;
}

console.log(moveZeroes([0, 1, 0, 3, 12])); // [1, 3, 12, 0, 0]

Gegeven een integer array nums, vind de aaneengesloten sub-array (die ten minste één getal bevat) met de grootste som en retourneer de som.

Uitleg: Kadane's algoritme is een efficiënte manier om dit op te lossen. Doorloop de array, houd de currentMax som die eindigt op de huidige positie en de globalMax som die tot nu toe is gevonden bij. Als currentMax negatief wordt, zet het dan terug naar 0 (of liever, het huidige element).

function maxSubArray(nums) {
  let globalMax = -Infinity;
  let currentMax = 0;

  for (let i = 0; i < nums.length; i++) {
    currentMax = Math.max(nums[i], currentMax + nums[i]);
    if (currentMax > globalMax) {
      globalMax = currentMax;
    }
  }
  return globalMax;
}

console.log(maxSubArray([-2, 1, -3, 4, -1, 2, 1, -5, 4])); // 6 (van [4, -1, 2, 1])