Basic JavaScript Interview Exercises — Numbers and Elements
Tags: webdev, programming, beginners, javascript
Published: 2021-01-24 02:01:54

**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.