Basic JavaScript Interview Exercises — Numbers and Elements

Check out my books on Amazon at https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62

Subscribe to my email list now at http://jauyeung.net/subscribe/

To get a job as a front end developer, we need to nail the coding interview.

In this article, we’ll look at some quick warmup questions that everyone should know.

Write a function that computes the Fibonacci number of N.

We can do that with a loop and the destructuring syntax of JavaScript.

We create the fib function as follows:

const fib = (n) => {
  let i = 1,
    a = 1,
    b = 1;
  while (i < n) {
    [a, b] = [b, a + b];
    i++;
  }
  return a;
}

In the code above, we set b to a and b to a + b to update the numbers with the new Fibonacci values as we increase i .

Then we return a when we’re done with the loop.

Write a function that accepts a string and returns a map with the strings character frequency.

We can use a JavaScript Map to do this.

We count the frequencies of the characters in a string by splitting it into an array of characters and then counting the frequency of the characters as follows:

const count = str => {
  const chars = str.split('');
  const frequencies = new Map();
  for (let c of chars) {
    const freq = frequencies.get(c) || 0;
    frequencies.set(c, freq + 1);
  }
  return frequencies;
}

In the code, we used the Map ‘s get method to get the frequency, and we add it by 1 and then set it.

Once we’re done with the loop, we return the Map .

Write a function that accepts a number and checks if it’s a prime or not.

We can check if a number is a prime by checking if it’s 2 or odd. If it’s odd, then we try to divide numbers up to the floor of the given number divided by 2.

For example, we can write the following function to check for prime numbers:

const isPrime = (num) => {
  if (num % 2 === 0 && num !== 2) {
    return false;
  }
  for (let i = 3; i <= Math.ceil(num / 2); i++) {
    if (num % i === 0) {
      return false;
    }
  }
  return true
}

We check if it’s even and it’s not 2. If it is, we return false .

Otherwise, we run the loop to check if a number is divisible by 3 up to the ceiling of the num divided 2.

If it’s evenly divisible by any of those, then we return false .

Otherwise, we return true .

Write a function that accepts a DOM element and a string and prints any of its immediate children that contain the class name with that string.

We can use the getElementsByClassName method of an element object to get the children with the given class attribute.

For instance, we can write the following function:

const getChildrenWithClass = (el, className) => {
 const children = el.getElementsByClassName(className);
  for (let c of children) {
   console.log(c);
  }
}

The code above calls the getElementsByClassName on the el element object and prints out the child elements with the given class name.

Also, we can use the querySelectorAll method to do the same thing.

We can write the following:

const getChildrenWithClass = (el, className) => {
  const children = el.querySelectorAll(`.${className}`);
  for (let c of children) {
    console.log(c);
  }
}

The only difference is that we called querySelectAll with the template string `.${className}` .

Write a function that accepts a DOM element and a string and prints if any of its parent nodes contain the class with that string. It should stop when there are no parent elements.

We can use the parentNode property recursively until we reach the root element or until we find the element with the className that we wanted.

To do this, we create a getParentWithClassName as follows:

const getParentWithClassName = (el, className) => {
  let currentEl = el.parentNode;
  while (currentEl) {
    if (currentEl.className === className) {
      return currentEl;
    }
    currentEl = currentEl.parentNode;
  }
  return undefined;
}

In the code above, we set currentEl to the parentNode of el .

Then we use a while loop through to search for a parentNode with the given className until we find one with the given name.

If we find one with the given className , we return the element.

Otherwise, we keep going by setting currrentel to currentEl.parentNode .

If we loop up to the root node and still didn’t find an element with the given className , we return undefined .

Conclusion

We use the parentNode property to find the parent of a child node.

To get the child node with the given CSS selector, we can call any DOM navigation methods to find the elements with the given selector.

To create a dictionary we can use the Map constructor.

We can use the destructuring syntax to reassign multiple things easily as we did with the Fibonacci numbers.