Front-End Interview Questions - JavaScript

1. 1. Explain event delegation
2. 2. Explain how this works in JavaScript
3. 3. Explain how prototypal inheritance works.
4. 4. What is a promise? Where and how would you use promise?
5. 5. What is the difference between while and do...while loops in JavaScript?
6. 6. Why you might want to create static class members?
7. 7. How can you share code between files?

8.Explain the difference between synchronous and asynchronous functions.

1. Explain event delegation

Event delegation refers to the process of using event propagation (bubbling) to handle events at a higher level in the DOM than the element on which the event originated. It allows us to attach a single event listener, to a parent element, that will fire for all descendants, whether thoese descendants exist now or are added in the future.

2. Explain how this works in JavaScript

Global context

In the global execution context (outside of any function), this refers to the global object.

// In web browsers, the window object is also the global object:
console.log(this === window); // true

a = 37;
console.log(window.a); // 37

this.b = "MDN";
console.log(window.b)  // "MDN"
console.log(b)         // "MDN"

Function context

Inside a function, the value of this depends on how the function is called.

In non-strict mode, the value of this defaults to the global object, which is window in a browser.

function f1() {
  return this;
}

// In a browser:
f1() === window; // true

// In Node:
f1() === globalThis; // true

In strict mode, if the value of this is not set when entering an execution context, it remains as undefined.

function f2() {
  'use strict'; // see strict mode
  return this;
}

f2() === undefined; // true

Class context

The behavior of this in classes and functions is similar.

Within a class constructor, this is a regular object. All non-static methods within the class are added to the prototype of this.

class Example {
  constructor() {
    const proto = Object.getPrototypeOf(this);
    console.log(Object.getOwnPropertyNames(proto));
  }
  first(){}
  second(){}
  static third(){}
}

new Example(); // ['constructor', 'first', 'second']

Arrow functions

In arrow functions, this retains the value of the enclosing lexical context’s this.

3. Explain how prototypal inheritance works.

The core idea of prototypal inheritance is that an object can point to another object and inherit all its properties. The main purpose is to allow multiple instances of an object to share common properties.

4. What is a promise? Where and how would you use promise?

A promise is an object that my produce a single value some time in the future: either a resolved value, or a reason that’s not resolved. A promise may be in one of 3 possible states: fufilled, rejected, or pending. It can be chained with callback functions to handle the fufilled value or the reason for rejection.

• Complex async code made easier
• Promisifying XMLHttpRequest
• Chaining thens to transform values or run additional async actions one after another

5. What is the difference between while and do...while loops in JavaScript?

The difference is a matter of when the condition is checked.

• A while loop checks the condition, then executes the loop.
• A do...while loop executes the loop and then checks the conditions.

6. Why you might want to create static class members?

Static methods are used for the functionality that belongs to the class, it doesn't relate to a concrete class instance.

Static properties are used when we’d like to store class-level data, also not bound to an instance.

Static properties and methods are inherited.

7. How can you share code between files?

Solution 1. Global object

utils.js

var add = function(num1, num2){
  return num1 + num2;
};

var subtract = function(num1, num2){
  return num1 - num2
};

window.globalobject = {
  add: add,
  subtract: subtrack
};

file1.js

globalobject.add(4, 4);

Solution 2. CommonJS

utils.js

var add = function(num1, num2){
  return num1 + num2;
};

var subtract = function(num1, num2){
  return num1 - num2
};

module.exports = {
  add,
  subtract
};

file1.js

var { add, subtract } = require('./utils.js');

console.log(add(1, 2));
console.log(subtract(1, 2));

*Solution 3. ESM

utils.js

var add = function(num1, num2){
  return num1 + num2;
};

var subtract = function(num1, num2){
  return num1 - num2
};

export default {
  add,
  subtract
};

file1.js

import globalobject from './utils.mjs'

const { add, subtract } = globalobject;

console.log(add(1, 2));
console.log(subtract(1, 2));

Solution 4. JSONP
utils.js

var add = function(num1, num2){
  return num1 + num2;
};

var subtract = function(num1, num2){
  return num1 - num2
};

file1.js

function jsonp(file, callback) {
  var s = document.createElement('script');
  s.src = file;
  s.onload = callback;
  document.body.appendChild(s);
}

jsonp('./a.js', function() {
  console.log(add(1, 2));
  console.log(subtract(1, 2));
});

8.Explain the difference between synchronous and asynchronous functions.

Synchronous functions: It waits for each operation to complete, after that only it executes the next operation.

Asynchronous functions: It never waits for each operation to complete, rather it executes all operations in the first only. The result of each operation will be handled once the result is available.