interview-questions.js

/* 
 * --------------------------------------------------------------------------------------------
 * what's in the console, and explian what happened (async programming)
 * --------------------------------------------------------------------------------------------
 */
console.log("New york");
setTimeout(function(){console.log("Vienne");}, 1000);
setTimeout(function(){console.log("London");});
console.log("Ottawa");

// New York
// Ottawa
// London
// Vienne
// good: mentioned event loop and message queue.
// bonus: know why it is important for UI code and its performance implications.
// bad: wrong answer or have no idea what is happened to the code execution


/* 
 * --------------------------------------------------------------------------------------------
 * what's in the console, and explian what happened (variable hoisting)
 * --------------------------------------------------------------------------------------------
 */
var city = "Rome"
+function() {
  console.log(city);
  var city = "Paris";
}();

// undefined
// good: know what is variable hoisting, can explain the scope when hoisting happens
// bad: wrong answer, do not familiar with the concept


/* 
 * --------------------------------------------------------------------------------------------
 * what will be print in console when click button#2, and explian what happened (closure)
 * --------------------------------------------------------------------------------------------
 */
var nodes = document.getElementsByTagName('button');
// assume there is totally 5 nodes
for (var i = 0; i < nodes.length; i++) {
   nodes[i].addEventListener('click', function() {
      console.log('You clicked element #' + i);
   });
}

// You clicked element #5
// good: know closure, know what happened (i is not in the callback func's closure)
// bonus: know how to fix (create a closure to preserve the i value)
// bad: wrong answer or don't know the concept of closure


/* 
 * --------------------------------------------------------------------------------------------
 * List ways to create Objects in javascript (inheritence 1)
 * --------------------------------------------------------------------------------------------
 */
// Object literal
var obj1 = {city: "Toronto"};

// Objec.create based on prototype
var obj2 = Object.create({city: "Sydney"});

// Classical prototype inheritence
function City(city) {
  this.city = city
}
City.prototype.getCity = function(){return this.city};
var obj3 = new City("Helsinki");

// Factory
function ObjFactory() {
  return { city: "Stockholm" };
}
var obj4 = ObjFactory();

// Object composition
var obj5 = Object.assign({}, {city: "Copenhagen"}, {population: "2m"})

// good: know how each object looks like, know the issue with prototype inheritence
// bonus: know composition and why "Composition over inheritence"
// bad: did not mention factory pattern or Object.assign pattern


/* 
 * --------------------------------------------------------------------------------------------
 * What is a pure function, are following pure functions? (functional programming)
 * --------------------------------------------------------------------------------------------
 */
 var i = 0;
 function function_a(x) {
   i++;
   return i;
 }
 
 function function_b(x) {
   if(i > 0) {
     return 1;
   }
   else {
     return x;
   }
 }
 
 function function_c(x) {
   return Math.random() > 0.5 ? x : 1;
 }
 
 function function_d(obj) {
   obj.called = true;
   return obj;
 }
 
 // none of above is pure functions
 // function_a and function_b relies on external states, function_a produces side effect
 // function_c does not follow "Given the same input, will always return the same output." principle
 // function_d modifies function arguments
 // good: know what pure function is, know why is good (easy to reason about, good testability), can identify the above functions
 // bouns: know howpure function collaborates with functional programming
 // bad: no idea what is a pure function