In the previous , 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. article 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: . Reversed variant will be . Here we can check how the candidate knows arrays, and arrays methods. One of the ways how we can implement this: This is an example! sihT si na !elpmaxe 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 will be . 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. console.log 1, 3, 5, 4, 2 Task 3. ‘this‘ keyword This small task helps to check the candidate’s understanding of keyword. How it works, and how we can use it. Here is the code: this 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 Here we call method , and as is a point to object - the correct answer is . 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 . To fix this case we can bind context  in or we can use and call the function with the correct context object.printName(). printName this John Cohnor undefined const printName = object.printName.bind(object) call/apply 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 - timer should start and we see counting in the display every second and button transformed to . So we can click and the timer will pause. Then we can click and time will continue. button will stop the timer and reset the display to the initial value 0. Start Start Pause Pause Resume Stop <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: should return array of managers ids in hierarchy getManagers(employees, 200) [50, 73, 11] should return getManagers(employees, 11) [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; 
}

Target

Practical tasks for JavaScript interview

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Checkers on React - Part 1 - Project Configuration and Initialization

10 Repositories to Help You 10x Your Performance on Technical Interviews

10 Repositories that Will Transform the Way You Approach Technical Interviews

10 JavaScript Interview Questions and Answers to Help you Land Your Next Role

10 GitHub Repositories to Follow

10 Frontend Projects to Take Your Coding Skills to the Next Level

Checkers on React - Part 1 - Project Configuration and Initialization

10 Repositories to Help You 10x Your Performance on Technical Interviews

10 Repositories that Will Transform the Way You Approach Technical Interviews

10 JavaScript Interview Questions and Answers to Help you Land Your Next Role

10 GitHub Repositories to Follow

10 Frontend Projects to Take Your Coding Skills to the Next Level

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps