Practical tasks for JavaScript interview

In the previous article, I described my main coding tasks for React interview. In this article, I want to do the same for JS Core. I always suggest 2-3 coding tasks in native JS to see how candidates understand main JS concepts. It’s very good when you know any framework or library, but without perfect JC Core knowledge, you can’t be a successful developer. So let’s go.

Task 1. Phrase reverse.

This is a simple task, the main idea is to create logic that will reverse words in the target phrase. For example, we have this sentence: This is an example!. Reversed variant will be sihT si na !elpmaxe. Here we can check how the candidate knows arrays, and arrays methods. One of the ways how we can implement this:

function reverseWords(str) {
  return str.split(' ').map((item) => {
    return item.split('').reverse().join('');
  }).join(' ')
}

Task 2. Knowledge of Event Loop

This is a theoretical task where we can ask for an order in which we will see logs. Let’s imagine that we have this piece of code:

console.log('1');

setTimeout(function(){
    console.log('2')
}, 0)

function test() {
  console.log('3');
}

test();

Promise.resolve().then(function(){console.log('4')})

console.log('5')

The correct order in console.log will be 1, 3, 5, 4, 2. The first 3 numbers are easy. But then we will see 4. This is because promise will be pushed to the microtasks queue in an event loop, and this queue has higher priority before macro tasks. And finally in the end we have 2 in timeout.

Task 3. ‘this‘ keyword

This small task helps to check the candidate’s understanding of this keyword. How it works, and how we can use it. Here is the code:

const object = {
  name: 'John Cohnor',
  printName() {
    console.log(this.name);
  }
}

object.printName(); // what we will see here

const printName = object.printName;

printName(); // what we will se in console here

There are 2 questions. What we will see in object.printName(). Here we call method printName, and as this is a point to object - the correct answer is John Cohnor . In the next line, we save our method to the new variable and then call it. And in this case, we will lose our context, and we will se undefined. To fix this case we can bind context in const printName = object.printName.bind(object) or we can use call/apply and call the function with the correct context printName.apply(object)

Task 4. JS Core + DOM

The next task is a task to implement a simple timer in Vanilla JS. To see how candidates can interact with HTML elements. We have an existing HTML layout. The idea is to create a timer. When we click Start - timer should start and we see counting in the display every second and Start button transformed to Pause. So we can click Pause and the timer will pause. Then we can click Resume and time will continue. Stop button will stop the timer and reset the display to the initial value 0.

<div>
  <div id="display">0</div>
  <button id="start">Start</button>
  <button id="stop">Stop</button>
</div>

Basic solution cab be in imperative stile. For more experienced developer we can try to ask to use more interesting approaches. Use OOP, etc..

const DEFAULT = 0;
const display = document.getElementById('display')
const startButton = document.getElementById('start')
const stopButton = document.getElementById('stop')

let interval;
let timer = 0;

function handleStartClick () { 
  if(/Start|Resume/.test(startButton.textContent)) {
    startButton.textContent = 'Pause';
    interval = setInterval(() => {
       timer += 1;
       display.textContent = timer;
    }, 1000);
  } else {
  	clearInterval(interval);
    startButton.textContent = 'Resume';
  }
}

function handleStopClick () {
  clearInterval(interval);
  startButton.textContent = 'Start';
  display.textContent = 0;
  timer = 0;
}

startButton.addEventListener('click', handleStartClick);
stopButton.addEventListener('click', handleStopClick);

Task 5. Array

Here we have an array of employees with their ids, names, and id of line manager. The task is to create a function that should take initial array and id of employee and return an array of all managers id in hierarchy.

Initial array:

const employees = [ 
  { employeeId: 11, name: 'John', managerId: 11 }, 
  { employeeId: 50, name: 'Todd', managerId: 73 }, 
  { mployeeId: 150, name: 'Alex', managerId: 200 }, 
  { employeeId: 73, name: 'Sara', managerId: 11 }, 
  { employeeId: 200, name: 'Alex', managerId: 50 }, 
  { employeeId: 100, name: 'Alex', managerId: 150 }, 
]; 

How it should work:

getManagers(employees, 200) should return array of managers ids in hierarchy [50, 73, 11]

getManagers(employees, 11) should return [11]

if there is no managers - than should return empty array []

Simple implementation for this task can be based on a recursion

function getManagers(employees, id) { 
	   const result = []; 
 
    function findManager(employees, id) { 
      const targetEmployee = employees.find((item) => item.employeeId === id); 
      if (!targetEmployee) return; 
 
     	if (targetEmployee.managerId !== id) { 
          result.push(targetEmployee.managerId); 
     		  findManager(employees, targetEmployee.managerId); 
   		} else if (!result.includes(targetEmployee.managerId)) { 
     			result.push(targetEmployee.managerId); 
   		} 
  	} 
 
    findManager(employees, id); 
    return result; 
}