Awesome Javascript interview questions

javascript_interview_questions.txt

1. Event delegation

We have html code:

<ul id="todo-app">
  <li class="item">Walk the dog</li>
  <li class="item">Pay bills</li>
  <li class="item">Make dinner</li>
  <li class="item">Code for one hour</li>
</ul>

As a user I want an action to occur when I click one of the list items. 

We want to test if user understands performance implications by looking how he attaches events. (Creating lots of handlers vs one for parent element)

2. Closures

Write a function that will loop through a list of integers and print the index of each element after a 3 second delay given

const arr = [10, 12, 15, 21];

BAD:
const arr = [10, 12, 15, 21];
for (var i = 0; i < arr.length; i++) {
  setTimeout(function() {
    console.log('The index of this number is: ' + i);
  }, 3000);
}

# 4 printed every time

Good:
const arr = [10, 12, 15, 21];
for (var i = 0; i < arr.length; i++) {
  // pass in the variable i so that each function 
  // has access to the correct index
  setTimeout(function(i_local) {
    return function() {
      console.log('The index of this number is: ' + i_local);
    }
  }(i), 3000);
}

Good:
const arr = [10, 12, 15, 21];
for (let i = 0; i < arr.length; i++) {
  // using the ES6 let syntax, it creates a new binding
  // every single time the function is called
  // read more here: http://exploringjs.com/es6/ch_variables.html#sec_let-const-loop-heads
  setTimeout(function() {
    console.log('The index of this number is: ' + i);
  }, 3000);
}

3. Debouncing

Write a function to execute expensive operation while user scrolls the page.

What are differences between throttling and debouncing?

Good:
// function to be called when user scrolls
function foo() {
  console.log('Expensive operation while scrolling!');
}

// wrap our function in a debounce to fire once 2 seconds have gone by
let elem = document.getElementById('container');
elem.addEventListener('scroll', debounce(foo, 2000));