JavaScript Interview Questions
Tags: javascript, interview, software
Published: 2020-02-12 19:32:15

---
title: JavaScript Interview Questions
published: true
description: Description of a few common exercises that are used for JavaScript interviews
tags: javascript, interviews, software
---

After a few interviews this month I wanted to share a few nice exercises that would come up in technical interviews, and how I originally approached them. 

## Asynchronous for-loop
This exercise is related to how asynchronous programming work. If you asked me, I would rather ask about **how the event loop works** instead of asking this particular question.

You are given the following code:
```js
for(var i = 0; i < 10; i++){
    setTimeout(() => {
        console.log(i);
    }, 1000);
}
```
and you're asked two questions
1. what's the output? 
2. what would you add to print the numbers from 0 to 9

I will leave the first answer as an exercise for the reader but question n°2 should already give you a hint. 
To answer the second question what you want is to store for every iteration the value of the variable `i` so that they can be accessed later on by the `setTimeout`. One of the **many alternatives** is to create an [IIFE](http://benalman.com/news/2010/11/immediately-invoked-function-expression/) (maybe better called _IIAF_ in this case?):
```js
for(var i = 0; i < 10; i++){
    (n => {
        setTimeout(() => {
            console.log(n);
        }, 1000);
    })(i);
}
```
### Bonus
Would you be able to explain in the comments why this little change works as expected?
```js
for(let i = 0; i < 10; i++){
    setTimeout(() => {
        console.log(i);
    }, 1000);
}
```

## Reduce
The goal of this exercise is to define a function that does exactly the same than [Array.prototype.reduce](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce) but receiving the array as first parameter (much like [lodash's counterpart](https://lodash.com/docs/4.17.15#reduce)).

### Iterative
This is the most intuitive solution for me, using an accumulator to carry on the result of each function execution.
```js
function reduce(arr, fn, def) {
    let accum = def;
    for(let i = 0; i < arr.length; i++) {
        accum = fn(accum, arr[i]);
    }
    return accum;
}
```

### Recursive
The recursive version has the requirement of knowing about an specific array operation: removing the first element of an array and get an array with the remaining elements. **Of course I didn't knew which function did exactly that from the top of my head** and the interviewer was kind enough to mention [Array.prototype.slice](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice). It is also important to clarify that `Array.prototype.slice` doesn't modifies the array itself but returns a copy of it.
```js
function reduce(arr, fn, def) {
    // base case: there are no more elements in the array and the function should finish
    if(arr.length === 0) {
        return def;
    }
    return reduce(arr.slice(1), fn, fn(def, arr[0]));
}
```

#### Minimalistic
There's a growing interest for _tweet-sized_ solutions, minimizing the characters used for a solution and thought it would be a nice exercise to add it here. I wouldn't recommend to include this type of solutions in your codebase though.

```js
function reduce(arr, fn, def) {
    return arr.length === 0 ? def : reduce(arr.slice(1), fn, fn(def, arr[0]));
}
```

## Map
For this exercise you're asked to write a `map` function that would replicate the behavior of [Array.prototype.map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map).
### Iterative
```js
function map(arr, fn) {
    const result = [];
    for(const elem of arr) {
        result.push(fn(elem));
    }
    return result;
}
```

### Using reduce
This is when things started to get interesting. I was told to only use the `reduce` function previously implemented to write the map function and my first thought was doing something like:
```js
function map(arr, fn) {
    const result = [];
    reduce(arr, (curr, next) => {
        result.push(fn(next));
        return curr;
    });
    return result;
}
```

which is not incorrect, but was later asked "what if we don't want to use a intermediate variable?" which got me thinking...
```js
function map(arr, fn) {
    return reduce(arr, (curr, next) => {
        curr.push(fn(next));
        return curr;
    }, []);
}
```

#### Minimalistic
```js
function map(arr, fn) {
    return reduce(arr, (curr, next) => curr.push(fn(next)) && curr, []);
}
```


I've prepared a few playgrounds in CodeSandbox for you to try and solve them if you like:
1. [Reduce](https://codesandbox.io/s/reduce-exercise-3t2mc)
2. [Map](https://codesandbox.io/s/map-exercise-kzgr3)

There are many sites that you can use to practice with similar (or more complex) exercises like [Hackerrank](https://www.hackerrank.com/) or [Codility](https://www.codility.com/).


Are there any other interesting exercises that you were asked to do? Let me know in the comments!