Interview for a front-end JavaScript developer: best questions

I recently had the opportunity to attend a meeting of FreeCodeCamp participants in San Francisco. If anyone knows, Free Code Camp is a community aimed at learning JavaScript and web programming. There, one person who was preparing for interviews for a front-end developer position asked me to suggest which JavaScript questions should be worked out. I googled a little, but I could not find a suitable list of questions to which I could give a link and say: "Disassemble these questions and your work." Some lists were close to what I wanted to find, some looked very simple , but all of them were either incomplete, or contained questions that hardly anyone would ask at a real interview.


In the end, I decided to make my own list. It includes those questions that were asked to me when I was looking for work, and those that I asked when I was looking for employees in the frontend-developer position. Please note that some companies (like Google) pay special attention to such things as designing efficient algorithms. Therefore, if you want to work in such a company, in addition to the questions listed here, solve the problems from the CodeJam competitions.

I will add and edit answers to these questions here . If you have a desire to supplement or improve something, I will be glad to your pull-requests.
')
The questions are divided into several sections:

• Theory.
• Programming.
• Debugging
• System Design.

So, here are my questions.

Theory

The interviewee must have a clear understanding of the concepts that affect the questions in this section, he should be able to explain all this. Programming is not required here.

1. What is the “O-large” notation and how to use it?
2. What is a DOM?
3. What is the event loop?
4. What is a closure?
5. How does prototype inheritance work and how does it differ from the classical inheritance model? (In my opinion, this is not a particularly useful question, but many people like to ask it.)
6. How does the this keyword work?
7. What is event bubbling and how does this mechanism work? (I don’t like this question either, but it is often asked at interviews.)
8. Describe several ways to exchange data between a client and a server. Tell us, without going into details, about how several network protocols work (IP, TCP, HTTP / S / 2, UDP, RTC, DNS, and so on).
9. What is REST and why is this technology popular?
10. My site is slow. Tell us about the steps to diagnose and correct it. Describe the popular approaches to optimization, and tell when to use them.
11. What frameworks did you use? What are their strengths and weaknesses? Why do programmers use frameworks? What kind of problems do frameworks solve?

Programming

Answers to these questions involve the implementation of functions in JavaScript. Each question is followed by tests that must successfully pass a solution.

▍ Simple tasks

1. Implement the isPrime() function, which returns true or false , indicating whether the number passed to it is simple.
   
   

    isPrime(0)                          // false isPrime(1)                          // false isPrime(17)                         // true isPrime(10000000000000)             // false 

   
   
2. Implement the factorial() function, which returns the factorial of the number passed to it.
   
   

    factorial(0)                        // 1 factorial(1)                        // 1 factorial(6)                        // 720 

   
   
3. Implement the function fib() , which returns the n-th Fibonacci number .
   
   

    fib(0)                              // 0 fib(1)                              // 1 fib(10)                             // 55 fib(20)                             // 6765 

   
   
4. Implement the isSorted() function, which returns true or false depending on whether the numeric array passed to it is sorted.
   
   

    isSorted([])                        // true isSorted([-Infinity, -5, 0, 3, 9])  // true isSorted([3, 9, -3, 10])            // false 

   
   
5. Create your own implementation of the filter() function.
   
   

    filter([1, 2, 3, 4], n => n < 3)    // [1, 2] 

   
   
6. Create your own implementation of the reduce() function.
   
   

    reduce([1, 2, 3, 4], (a, b) => a + b, 0) // 10 

   
   
7. Implement a reverse() function that reverses the order of the characters of the string passed to it. Do not use the built-in reverse() function.
   
   

    reverse('')                         // '' reverse('abcdef')                   // 'fedcba' 

   
   
8. Create your own implementation of the indexOf() function for arrays.
   
   

    indexOf([1, 2, 3], 1)               // 0 indexOf([1, 2, 3], 4)               // -1 

   
   
9. Implement the isPalindrome() function, which returns true or false depending on whether the string passed to it is a palindrome (the function is case insensitive and there are no spaces in the string).
   
   

    isPalindrome('')                                // true isPalindrome('abcdcba')                         // true isPalindrome('abcd')                            // false isPalindrome('A man a plan a canal Panama')     // true 

   
   
10. Implement a missing() function that takes an unsorted array of unique numbers (that is, numbers do not repeat in it) from 1 to some number n , and returns a number that is not in the sequence. There may be either one missing number, or they may not be at all.
    
    Are you able to ensure that the function solves the problem in time O (N) ? Hint: there is one good formula you can use.
    
    

     missing([])                         // undefined missing([1, 4, 3])                  // 2 missing([2, 3, 4])                  // 1 missing([5, 1, 4, 2])               // 3 missing([1, 2, 3, 4])               // undefined 

    
    
11. Implement the i sBalanced() function that takes a string and returns true or false , indicating whether the curly braces in the string are balanced.
    
    

     isBalanced('}{')                      // false isBalanced('{{}')                     // false isBalanced('{}{}')                    // true isBalanced('foo { bar { baz } boo }') // true isBalanced('foo { bar { baz }')       // false isBalanced('foo { bar } }')           // false 

▍Questions of medium difficulty

1. Implement the function fib2() . It is similar to the function fib() from the previous group of tasks, but supports numbers up to 50. Hint: use memoization.
   
   

    fib2(0)                               // 0 fib2(1)                               // 1 fib2(10)                              // 55 fib2(50)                              // 12586269025 

   
   
2. Implement the isBalanced2() function. It is similar to the isBalanced() function from the previous task group, but it supports three types of brackets: curly {} , square [] , and round () . When passing a function to a string with invalid parentheses, the function must return false .
   
   

    isBalanced2('(foo { bar (baz) [boo] })') // true isBalanced2('foo { bar { baz }')         // false isBalanced2('foo { (bar [baz] } )')      // false 

   
   
3. Implement the uniq() function, which takes an array of numbers and returns the unique numbers found in it. Can a function solve this problem in O (N) time ?
   
   

    uniq([])                              // [] uniq([1, 4, 2, 2, 3, 4, 8])           // [1, 4, 2, 3, 8] 

   
   
4. Implement the intersection() function, which takes two arrays and returns their intersection. Can you get the function to solve this problem in O (M + N) time , where M and N are the lengths of the arrays?
   
   

    intersection([1, 5, 4, 2], [8, 91, 4, 1, 3])    // [4, 1] intersection([1, 5, 4, 2], [7, 12])             // [] 

   
   
5. Create an implementation of the sort() function sort() , which sorts a numeric array in O (N × log (N)) time .
   
   

    sort([])                              // [] sort([-4, 1, Infinity, 3, 3, 0])      // [-4, 0, 1, 3, 3, Infinity] 

   
   
6. Implement the includes() function, which returns true or false depending on whether the number passed to it occurs in the sorted array passed to it. Can a function solve this problem in O (log (N)) time ?
   
   

    includes([1, 3, 8, 10], 8)            // true includes([1, 3, 8, 8, 15], 15)        // true includes([1, 3, 8, 10, 15], 9)        // false 

   
   
7. Implement the assignDeep() function, which is similar to Object.assign() , but performs a deep union of objects. In order not to complicate the task, one can proceed from the assumption that objects can contain only numbers and other objects (they cannot contain arrays, strings, and so on).
   
   

    assignDeep({ a: 1 }, {})              // { a: 1 } assignDeep({ a: 1 }, { a: 2 })        // { a: 2 } assignDeep({ a: 1 }, { a: { b: 2 } }) // { a: { b: 2 } } assignDeep({ a: { b: { c: 1 }}}, { a: { b: { d: 2 }}, e: 3 }) // { a: { b: { c: 1, d: 2 }}, e: 3 } 

   
   
8. Implement the reduceAsync() function, which is similar to the reduce() function from a group of simple tasks, but works with functions that return promise objects, each of which must be resolved before proceeding to the next.
   
   

    let a = () => Promise.resolve('a') let b = () => Promise.resolve('b') let c = () => new Promise(resolve => setTimeout(() => resolve('c'), 100)) await reduceAsync([a, b, c], (acc, value) => [...acc, value], []) // ['a', 'b', 'c'] await reduceAsync([a, c, b], (acc, value) => [...acc, value], ['d']) // ['d', 'a', 'c', 'b'] 

   
   
9. Implement the seq() function using the same approach as when working on the reduceAsync() function. This function should take an array of functions that return promise objects and resolve them one by one.
   
   

    let a = () => Promise.resolve('a') let b = () => Promise.resolve('b') let c = () => Promise.resolve('c') await seq([a, b, c])                  // ['a', 'b', 'c'] await seq([a, c, b])                  // ['a', 'c', 'b'] 

▍ Difficult tasks

Some tasks from this group are related to the creation of data structures. You do not need to memorize all the subtleties of their functioning, it is enough to understand their device, and information about the interface they provide can be found on the Internet. Next, you need to know what these data structures are used for, what their limitations are in comparison with other data structures.

1. Implement the permute() function, which returns an array of strings containing all permutations of the specified string.
   
   

    permute('')             // [] permute('abc')          // ['abc', 'acb', 'bac', 'bca', 'cab', 'cba'] 

   
   
2. Create a standalone implementation of the debounce() function.
   
   

    let a = () => console.log('foo') let b = debounce(a, 100) b() b() b() //      a() 

   
   
3. Implement the LinkedList class without using embedded JavaScript ( [] ) arrays. Your LinkedList should support only 2 methods: add() and has() .
   
   

    class LinkedList {...} let list = new LinkedList(1, 2, 3) list.add(4)                           // undefined list.add(5)                           // undefined list.has(1)                           // true list.has(4)                           // true list.has(6)                           // false 

   
   
4. Implement the HashMap class without using embedded JavaScript objects ( {} ) or the map() function. You are given a hash() function that takes a string and returns a certain number. These numbers are mostly unique, but it is also possible that the same numbers correspond to two different lines.
   
   

    function hash (string) { return string   .split('')   .reduce((a, b) => ((a << 5) + a) + b.charCodeAt(0), 5381) } 

   
   Your HashMap implementation should support only 2 methods: get() and set() .
   
   

    let map = new HashMap map.set('abc', 123)                   // undefined map.set('foo', 'bar')                 // undefined map.set('foo', 'baz')                 // undefined map.get('abc')                        // 123 map.get('foo')                        // 'baz' map.get('def')                        // undefined 

   
   
5. Implement the BinarySearchTree class. It must support 4 methods: add() , has() , remove() , and size() .
   
   

    let tree = new BinarySearchTree tree.add(1, 2, 3, 4) tree.add(5) tree.has(2)                           // true tree.has(5)                           // true tree.remove(3)                        // undefined tree.size()                           // 4 

   
   
6. Implement the BinaryTree class, which supports wide-search, as well as symmetric, direct, and reverse depth-first functions.
   
   

    let tree = new BinaryTree let fn = value => console.log(value) tree.add(1, 2, 3, 4) tree.bfs(fn)                          // undefined tree.inorder(fn)                      // undefined tree.preorder(fn)                     // undefined tree.postorder(fn)                    // undefined 

Debugging

When answering the following questions, first try to understand why the presented code does not work. Explain the cause of the error. Then offer a couple of options for correcting the problem and rewrite the code, implementing one of the suggested options. As a result, the program should work correctly.

1. It is necessary that this code output to the hey amy log, but it displays hey arnold . Why?
   
   

    function greet(person) { if (person == { name: 'amy' }) {   return 'hey amy' } else {   return 'hey arnold' } } greet({ name: 'amy' }) 

   
   
2. It is necessary that this code log the numbers 0, 1, 2, 3 in the specified order, but it does not (One day you will encounter this error. Some people like to ask this question at interviews).
   
   

    for (var i = 0; i < 4; i++) { setTimeout(() => console.log(i), 0) } 

   
   
3. It is necessary that this code output to the doggo log, but it displays only undefined .
   
   

    let dog = { name: 'doggo', sayName() {   console.log(this.name) } } let sayName = dog.sayName sayName() 

   
   
4. Attempting to call the bark() method of a Dog object causes an error. Why?
   
   

    function Dog(name) { this.name = name } Dog.bark = function() { console.log(this.name + ' says woof') } let fido = new Dog('fido') fido.bark() 

   
   
5. Why isBig() returns exactly this result?
   
   

    function isBig(thing) { if (thing == 0 || thing == 1 || thing == 2) {   return false } return true } isBig(1)    // false isBig([2])  // false isBig([3])  // true 

System Design

If you are not sure that you know what “system design” is, first read this .

1. Tell us about the implementation of the widget auto-complete user-entered text. Data for completion is downloaded from the server. Consider the client and server parts of the system.

• How would you design the client part of the system that supports the following features:
  
  
  • Data acquisition using server API.
  • The output of the results in the form of a tree, when the elements can have parent and child elements, that is, auto-fill hints is not an ordinary flat list.
  • Support, in addition to the usual text fragments, elements of different types: checkboxes, radio buttons, icons.
  
  
• What does the component API look like?
• What does the server API look like?
• What performance considerations do you need to take into account in order for a widget to work in real time, displaying hints as user input? Are there any borderline cases here (for example, when a user enters text quickly with a slow network connection)?
• How would you design the network subsystem and server part of this kind of high-performance solution? How would you organize the interaction of the client and server? How is the data stored on the server? How does all of this scale to support large amounts of data and a large number of clients?

2. Tell us about the implementation of a service like Twitter, describing the client and server parts (this question has been shamelessly stolen from my friend Michael Woo ).

• How are tweets loaded from the server and displayed in the user interface?
• How, when updating tweets, the tape is updated? How does the client part of the application learn about new tweets?
• How is the search for tweets? How is the search organized by author? Tell us about how the database is designed, the server side of the application and the API.

Results

We hope these questions will be useful to those who are going to the interview, and those who hold them. And if you do not belong to either one or the other, we assume that the questions will help you to keep yourself in good programmer form.

Here, by the way, are a few more places to go if you want to practice: The Algorithm Design Manual , tasks from CodeJam competitions, keon / algorithms repository. And here are a few resources that will be useful to JS developers: JavaScript Allonge , You Don't Know JS , Effective JavaScript .

Dear readers! If you have in mind questions that you think should be added to this list (or if you find an error) - tell us and write to the author of this material.