Categories
interview

Front End Engineer Interview Prep

These are the most common topics covered in Front End Engineer Interviews today.

POST

  • Can’t be Cached
  • Can’t be bookmarked
  • Suitable for sensitive data like logins
  • Used for posting data

GET

  • Can be Cached
  • Can be bookmarked
  • Not Suitable for sensitive data like logins
  • Used to retrieve data

Observables

  • Used for a stream of events
  • Need to subscribe to consume data
  • Subscription can be cancelled

Promises

  • Used for a single event
  • Subscription not required
  • Can’t be cancelled

ES6 (ECMA Script 2015)

Some of the most important ES6 changes are listed below.

Default Parameters

let box = (width = 100, height = 100) {}

Spread Syntax

// Pass an array as arguments
let someFunc = (a, b, c) => { }
let arr = [0, 1, 2]
someFunc(...arr)

// Concatenation of arrays
let array1 = [1, 2, 3]
let array2 = [4, 5, 6]
let array3 = [...arr1, ...arr2]

// Clone objects without the prototypes and merge them.
let objOne = {name: 'John' , age: 25}
let objTwo = {name: 'Smith' , type: 'user'}
let person = { ...objOne, ...ObjTwo }

Template Literals & Multiline Strings

let first = 'World'
let name = `Hello ${first} !`
// outputs Hello World !

// Multi line string
let someString = `Hey,
        This is a multiline string`

Destructuring Assignment

let person = {fname: 'John',
 lname: 'Smith'}
var {fname, lname} = person

Object Literals

let person = {fname: 'John', age: 25},
    getAssets = ()=>{ return; }

let employee = {
    __proto__: person,
    getAssets
}

Arrow Function

let someFunc = function() {
  this.randomString = 'Hello'
  return () => console.log(this.randomString)
}

someFunc()()

Promises

let sleep = new Promise((resolve, reject) => {
  setTimeout(resolve, 3000)
})

sleep.then(() => {
  console.log('after 3 seconds')
})

let & const

let let’s you scope variables in a block and const lets you define constants that you will no longer make changes to.

classes

class person {
  constructor(name = '', age = 0) {
    this.name = name
    this.age = age
  }
}

class employee extends person {
  constructor(name = '', age = 0) {
    super(name, age)
  }

}

let someEmployee = new employee('John', 25);
console.log(someEmployee.name);

Export & Import statements

export var portNo = 3000
export function startServer() {
  ...
}

import {portNo, startServer} from 'module'
              or
import * as services from 'module'

Passing an Object vs Primitive data type in Javascript

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

Closure

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

let 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.

Arguments

Arguments are “array-like” in the sense that it has length and elements accessible by index. It doesn’t have foreach or map.

function test(a, b, c) {
console.log(arguments.length); // 3
console.log(arguments[0]);  // 1
console.log(arguments[1]);   // 2
console.log(arguments[2]);    // 3
}

test(1, 2, 3);

Optional Chaining (?.)

Optional Chaining is useful when trying to reference a property of an object. The root object can be undefined, but it must be declared.

const someFunction = (inp) => {
  console.log(inp?.first?.second);
};

someFunction({third: 'blah'});

// Output: undefined

State Management (Immutable objects)

Debounce

Throttling

Throttling using Queue

Currying

Copy to clipboard

Script async vs defer

ES7 & ES8

Read about the more recent Javascipt versions.
ES7, ES8.

Subject

They are very similar to observables.

Others

Some other topics you might want to be familiar with are CORS issue, preflight options, HTTP call,  Change Detection, framework lifecycle, TypeScript 2, Angular 5, React/Redux, Vue 2, webpack, babel, gulp, npm, etc.