Categories
interview

Front End Engineer Interview Questions

Classical Inheritance vs Prototypal Inheritance

The difference between classical inheritance and prototypal inheritance is that classical inheritance is limited to classes inheriting from other classes while prototypal inheritance supports the cloning of any object using an object linking mechanism. Read more here.

== vs ===

== in JavaScript is used for comparing two variables, but it ignores the datatype of variable. === is used for comparing two variables, but this operator also checks datatype and compares two values. 

Closure

This property of Javascript allows for private variables in a function. For example

const increment = (() => {
  let counter = 0;
  return () => {
    counter += 1;
    console.log(counter);
  }
})();
// Self invoking function.

increment();
increment();
increment();

Demo

This is one common scenario you might run into when you use async calls inside a loop. The loop executes before the async call returns and the desired output is not logged.

function httpGet(theUrl, callback) {
  var xmlHttp = new XMLHttpRequest();
  xmlHttp.onreadystatechange = function() {
    if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
      callback(xmlHttp.responseText);
  }
  xmlHttp.open("GET", theUrl, true);
  xmlHttp.send(null);
}

for (var i = 0; i < 5; i++) {
  httpGet('https://httpbin.org/get', function(data) {
    console.log(i);
  });
}

Demo

Output

5
5
5
5
5

Using closure we can handle this in the following way

function httpGet(theUrl, callback) {
  var xmlHttp = new XMLHttpRequest();
  xmlHttp.onreadystatechange = function() {
    if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
      callback(xmlHttp.responseText);
  }
  xmlHttp.open("GET", theUrl, true);
  xmlHttp.send(null);
}

for (var i = 0; i < 5; i++) {
  ((index) => {
    httpGet('https://httpbin.org/get', function(data) {
      console.log(index);
    })
  })(i);
}

/*     or in ES6 you can simply use the 'let' keyword.   */

for (let i = 0; i < 5; i++) {
  httpGet('https://httpbin.org/get', function(data) {
    console.log(i);
  });
}

Demo

Output

0
1
2
3
4

Hoisting

The variables in javascript can be declared even after they are used as they are moved to the top of the code during execution. Hoisting doesn’t take place for initializing though. The same goes with function hoisting.

Note: There is no variable/function hoisting in ES6.

Strict Mode

When ‘use strict’ is used you will need to declare variables while using them. There are other rules such as not being able to delete objects etc when using this mode.

 Bubbling vs Capturing

Event propogation can be of 2 types Bubbling and Capturing.

Bubbling

Event propogation occurs starting from the inner element to the outermost element.

Capturing

Event propogation starts from the outermost element to innermost element. This is also known as Trickling.

Event Delegation

If a lot of elements are handled in a similar way, then instead of assigning a handler to each of them – we put a single handler on their common ancestor.

event.target vs event.currentTarget

Events bubble by default. So the difference between the two is:

  • target is the element that triggered the event (e.g., the user clicked on)
  • currentTarget is the element that the event listener is attached to

Event Loop

Javascript event loop

Promises

The Promise object represents the eventual completion (or failure) of an asynchronous operation and its resulting value. Read more here.

REST API design

REST stands for representational state transfer. API stands for Application programming interface. Read here.

Pixel Pipeline

Pixel Pipeline

Read more here.

async await

Read more here.

What happens when you type google.com into address bar?

Read more here.

Performance optimization

Stick to compositor-only properties. Read more here.

JWT (JSON Web Token)

Read more here.

Local storage vs Session storage vs Cookies

The localStorage and sessionStorage objects are part of the web storage API, are two great tools for saving key/value pairs locally. Using localStorage and sessionStorage for storage is an alternative to using cookies and the data is saved locally only and can’t be read by the server, which eliminates the security issue that cookies present. It allows for much more data to be saved (10MB). Cookies are still useful, especially when it comes to authentication, but there are times when using localStorage/sessionStorage may be a better alternative.
Read more here & here.

Garbage Collection

Reference counting vs Mark and Sweep. Read more here.

HTML Element as a datastore

Is Element in view

Js filter() polyfill

Javascript call() vs apply() vs bind()

Singleton Pattern

Shallow copy vs deep copy

Debounce

Throttling using Queue

Currying

Script async vs defer

Render Directory Structure

Smooth Animation

Flatten Array

getElementById() polyfill using BFS

Use DFS to flatten Javascript Objects

Implementing a Trie in Javascript

Find identical node in DOM Tree

Valid Parentheses

Overview of XSS & CSRF, How do you combat them?

Create a carousel component

Create a component to render Google Photos

Create a component to render auto complete suggestions

Create a component to render a table with filter and sort capabilities

Create a component to render a Chat App