JavaScript Interview questions and Implementation

# Closures

# Callback functions

# Callback Queue & Main thread blocking

# First Class Functions

First class objects are called first class citizens. These objects have the following properties:
> Be stored in a variable;
> Be passed as arguments to functions;
> Be returned by functions;
> Be stored in some data structure; and,
> Hold their own properties and methods.
Functions have all these properties and hence are called First class functions.
Below are demos of the same.

• # Function Declaration/Statement

  
  function greet(user) { //function declaration
  window.alert("Welcome! " + user);
  }

  
  These function can also be store in variable.

  const greetVar = greet; // using functions as variables

  Note that the function's reference is store in the greetVar variable
  greet() greetVar()

• # Function Expression

  
  const greetFuncVar = function (user) {
  window.alert("Welcome! " + user);
  }

  Function Statement/Declaration vs Expression

  Function statement are hoisted where as function expression are not.
  Hence, function statements can be called before they are initialised but function expressions cannot.

  
  // Function Declaration/Statement:
  func(); // this is allowed
  
  function func() {
  console.log("Function statement called");
  }
  
  // Function Expression:
  // func2(); // this is not and will throw a Error.
  //cannot call func2 before initialisation
  
  const /* ||let||var */ func2 = function () {
  console.log("Function expression called");
  };

• # Anonymous Functions

  
  function (){ // unamed Anonymous function
  console.log("Anonymous funtion");
  }

  
  Note, The above code as is will give a SyntaxError as Function statements require a function name
  
  Anonymous can be named or unamed.
  Below is an example of Named Anonymous function.
  

  
  //Named anonymous function. xyz is created as a local variable
  //and the is accessible inside the xyz function scope
  
  const abc = function xyz() {
  console.log("Named anonymous function");
  // these have access to their function
  console.log(xyz);
  };
  
  abc(); // this is allowed
  
  //outer function doesnot has access to this function.
  // xyz(); // hence this is not allowed

• # Higher order function

  Higher order functions are functions that accept anothe function as argument and perform additional operations on it.
  
  Here, timerFactory is a higher order function that takes a callback function and returns another function with additional
  functionality to track the time need to execute the function added to it.
  

  
  function timerFactory(callbackFunc) { // higher order function
  return function (...args) {
  const startTime = Date.now();
  callbackFunc(...args);
  const timeElapsed = (Date.now() - startTime) / 1000;
  console.log(`[INFO] function '${callbackFunc.name}' took ${timeElapsed}s`);
  };
  }

  
  We can now pass an function as a callback and timerFactory will return another function with the ability to track timeelapsed to it.
  

  
  const sayHi = () => window.alert("Hi there!! developer");
  const sayHiTimmed = timerFactory(sayHi);

  Call sayHiTimmed()
  Check console for the time log.
  
  

# Arrow Functions

() => window.alert("Hi! from Arrow") // arrow funtion

• # Arrow vs Normal Functions

  Arrow functions donot have their own 'this' binding and bind the 'this' scope to the lexical environment.
  This means arrow functions bind 'this' to the scope in which they are defined.
  Where as in,
  Normal functions the binding of 'this' is derived from the context in which they are called. Hence, arrow functions are not suitable for object methods.
  Examples follow to illustrate this.

  
  const obj = {
  offset: 10,
  getOffsetArrow: (val) => {
  // console.log( this, this.offset);
  return this.offset + val;
  },
  getOffsetNormal: function (val) {
  // console.log(this, this.offset);
  return this.offset + val;
  },
  };

  As arrow function dont have their own 'this' binding, the 'this' inside the function points to the lexical scope i.e. the 'window' object in this case. As offset is not defined in the window object hence we get 'NaN' as result.
  
  window.alert("Arrow function result : ", obj.getOffsetArrow(20)); See Result
  
  As normal functions get their 'this' binding from the context in which they are called, thus as the 'getOffsetNormal' is called on the 'obj' object, so the 'offset' refers to the offset of the object.
  
  window.alert("Normal function result : ", obj.getOffsetNormal(20)); See Result
  

• # Call, Apply & Bind are not suitable for Arrow funtions

  Call, Apply and Bind in Normal Functions
  
  

  
  const objToBind = {
  name: "Person Object",
  };
  
  window.name = "Window Object";
  
  function logger(x, y) {
  console.log(this.name, x, y);
  }

  with normal functions as the scope is defined by the context 'call', 'apply', 'bind' methods work as expected.
  
  logger.call(objToBind, 1, 2); See result
  
  logger.apply(objToBind, [3, 4]); See result
  
  const boundLogger = logger.bind(objToBind);
boundLogger(5, 6); See result
  

  In all the above invokcations logger will be called and the 'this' will be bound to the 'objToBind' object's 'this' context

  
  

  Call, Apply and Bind in Arrow Functions

  
  const objToBind = {
  name: "Person Object",
  };
  
  window.name = "Window Object";
  
  const arrowLogger = (x, y) => {
  window.alert(this.name + x + y);
  };

  with arrow functions as the 'this' is bound to the lexical scope,
  thus the 'name' property is refering to the outer scope's 'name'
  variable i.e. the window object in this case. And as we've defined
  'name' on the window object earlier, hence that is used here.
  
  arrowLogger.call(objToBind, 1, 2); See Result
  
  arrowLogger.apply(objToBind, [3, 4]); See Result
  
  const boundLoggerArrow = arrowLogger.bind(objToBind);
boundLoggerArrow(5, 6); See Result
  
  

• # Arrow functions and setTimeout

  Arrow functions are most useful incase of setTimeout methods when the function is called in a different context.
  Following example illustrates this.

  Normal functions & setTimeout

  
  const mockService_Broken = {
  data: 10,
  getData: function () {
  setTimeout(function () {
  window.alert("Response : " + this.data);
  }, 2000);
  },
  };

  mockService_Broken.getData(); See Result
  
  Normal function bind their 'this' to the context in which they are called.
  As timeouts are called in the global/window context, thus as 'data' is not
  defined in global/window object, hence we get undefined.

  
  
  Arrow functions & setTimeout

  
  const mockService_Ok = {
  data: 10,
  getData: function () {
  setTimeout(() => {
  console.log("Response : " + this.data);
  }, 2000);
  },
  };

  mockService_Ok.getData(); See Result
  
  Arrow function bind their 'this' to lexical environment in which they
  are declared(window/global object if there's not any) irrespective of
  the calling context. Thus, even if the setTimeout callback is called
  in the window context, the 'this' is bound to the context in which
  they are declared. Thus, 'this.data' references the 'data' property
  of the 'mockService_Ok' object

# Debouncing & Throttling in JS

This Tutorial blog explains both these topics very clearly.

• # Debouncing

  
  Debouncing is a technique used to limit the number of callbacks invoked due to an event listener.
  In debouncing we set up a timer when an event fires. And only after the timer is over, do we call the callback associated with the event.
  If while the timer is runing, the event fires again we cancel the previous timer and the callback that was supposed to be invoked at the end of the timer is canceled and we start a new timer with a new callback altogether.
  Following demo illustrates this clearly.
  
  

  Count without debounce:

  Count with debounce:

  Let's take a look at the code.

  
  let counter = 0;
  let debounceCounter = 0;
  let timeoutId;
  
  function debounce() {
  counter++;
  count.textContent = counter;
  
  if (timeoutId) {
  clearTimeout(timeoutId);
  }
  
  timeoutId = setTimeout(function () {
  debounceCounter++;
  debounceCount.textContent = debounceCounter;
  }, 300);
  }
  
  document.getElementById("debounce-input").addEventListener("input", debounce);

  An input event listener is setup and counters are maintained for both normal count and count with debounce.
  The normal count increments on every input. But the debounce count increments only after the use has stopped typing for 300ms.
  If user types something before the timer is over then, the previous timeout is canceled(and also the callback associated with it) and a new timer is setup again.

• # Throttling

  Throttling is anothe way to limit the number of times a callback is invoked due to an event. But this is different from debouncing.
  In throttling we only invoke a callback associated with an event once in a given time frame no matter how many times the particular event is fired.
  Following demo illustrates this.

  Mouse over the grey area to trigger the mouse over event.
  

  Count without throttle:

  Count with throttle:

  Let's look at the code and understand what's going on.

  
  let nothrottlecounter = 0;
  let throttleCounter = 0;
  
  let thottleTimeoutId;
  
  function throttle() {
  nothrottlecounter++;
  nothrottleCount.textContent = nothrottlecounter;
  /**
  * If there's a timmer already running then just return and
  * don't touch the throttled function.
  */
  if (thottleTimeoutId) return;
  
  thottleTimeoutId = setTimeout(function () {
  /**
  * else when the timer stops, we set the timer to 'undefined'
  * so that, the next time the event is fired the throttled
  * function gets invoked.
  */
  thottleTimeoutId = undefined;
  throttleCounter++;
  throttleCount.textContent = throttleCounter;
  }, 250);
  }
  document
  .getElementById("mouse-hover-zone")
  .addEventListener("mousemove", throttle);

  When the mouse moves over the grey area, the callback is fired. The normal counter increments
  every time the event is triggered. But the throttled functions is called only once in 250ms interval.
  Even if the event is triggered during this time, the throttled function doesnot get invoked.

# Promises