JavaScript Interview

This documents contains the most actual and important questions for JavaScript developer position. It will help you to compose question list for your own interview or prepare to interview.

Table of contents:

• Inheritance in JavaScript:
  • Theory:
    • What is functional inheritance pattern? How to create protected methods and private properties?
  • Practice:
    • Write Object.create polyfill
    • What will output the following code and why?
• Closure in JavaScript:
  • Theory:
    • What is Closure in JavaScript?
    • Does any currying function have a closure?
  • Practice:
    • What will output the following code and why?
    • Resolving example of problem code
    • Write nextID function
• Bind, apply and call function methods
  • Practice:
    • Write sum function
• Hoisting in JavaScript:
  • Theory:
    • What is a hoisting in JavaScript
  • Practice:
    • What will output the following code and why?
    • What will output the following code and why?
    • What will output the following code and why?
• Event Loop
  • Theory:
    • How works event loop in the browser JavaScript?
  • Practice:
    • What will output the following code and why?
• Scope in JavaScript
  • Practice:
    • What will output the following code and why?
• Booleans in JavaScript
  • Theory:
    • What are JavaScripts' falsy values?

Inheritance in JavaScript

Theory

Question i1: What is functional inheritance pattern? How to create protected methods and private properties?

Practice

Question i2: Write Object.create polyfill

For implementing use this kata please.

Question i3: What will output the following code and why?

var baseObject = {
  prop: 'Base value',
  getProp: function() {
    return this.prop;
  }
};

var otherObject = Object.create(baseObject);

otherObject.prop = "Other value";

console.log(otherObject.getProp());
delete otherObject.prop;
console.log(otherObject.getProp()); 

Answer

Console will output:

Other value
Base value

Closure in JavaScript

Theory

Question c1: What is Closure in JavaScript?

MDN definition: Closures are functions that refer to independent (free) variables (variables that are used locally, but defined in an enclosing scope). In other words, these functions 'remember' the environment in which they were created.

JavaScript.isSexy: A closure is an function that has access to the outer (enclosing) function’s variables-scope chain.

Questions c2. Does any currying function have a closure? Give an example, please.

Example

const addTwoThings = thingToAdd(2);
addTwoThings(3); // -> 5

const addTwoThings = thingToAdd(10);
addTwoThings(30); // -> 40

Answer

Currying functions consist of chaining closures that return inner functions. So in the case of thingToAdd you will have two separate closures that each return a single value that gets evaluated sequentially.

Example implementation using ES6

const thingToAdd = (a) => (b) => a + b;

Example implementation showing Closures

let thingToAdd = function (a) {
    return function (b) {
        return a + b;
    }
}

Practice

Question c3: What will output the following code and why?

function outerFunction() {
    var flag = undefined;

    function innerFunction() {
      if (true) {
        flag = true;
      } else {
        var flag = false;
      }

      console.log(flag);
    }

    console.log(flag);
    innerFunction();
}

outerFunction();

Answer

Console will output the followings:

undefined
true

Question c4: Resolving example of problem code

What will output these example?

for (var i = 0; i < 10; i++) {
    setTimeout(function() {
        console.log(i);
    }, 1000);
}

How to fix it to output numbers from 0 to 9?

Answer

They're several ways to resolve code above.

1. By creating a IIFE (Immediately Invoked Function Expression):

for (var i = 0; i < 10; i++) {
    setTimeout((function(param) {
        console.log(i);
    })(i), 1000);
}

2. By using ES6 feature, by using let syntax particularly:

for (let i = 0; i < 10; i++) {
    setTimeout(function() {
        console.log(i);
    }, 1000);
}

3. By binding console.log function:

for (var i = 0; i < 10; i++) {
    setTimeout(console.log.bind(console, i), 1000);
}

Question c5: Write nextID function that will generate ID incrementally after each calling

There's an example of function output:

nextID(); // output: 1
nextID(); // output: 2
nextID(); // output: 3

Answer

We should use closure in IIFE:

var nextID = (function() {
    var id = 0;
    return function() {
        console.log(++id);
    }
})();

Bind, apply and call function methods

Practice

Question b1: Write sum function

This function must meet conditions:

typeof sum(1) === 'function'
typeof sum(1)(2) === 'function'
typeof sum(1)(2)() === 'number'

sum(1)() === 1
sum(1,2)(3)() == 6
sum(1,2)(3,4)() === 10

Answer

function sum (fn) {
  var sumArguments = Array.prototype.slice.call(arguments);
    
  return function sumInner() {
      if (arguments.length) {
          sumArguments = sumArguments.concat(Array.prototype.slice.call(arguments));

          return sumInner;
      } else {
          return sumArguments.reduce(function(total, arg) {
            return total + arg;
          }, 0);
      }
  };
}

Hoisting in JavaScript

Theory

Question h1: Explain what is hoisting in JavaScript

Answer

W3School Hoisting is JavaScript's default behavior of moving declarations to the top. In JavaScript, a variable can be declared after it has been used. In other words; a variable can be used before it has been declared.

Practice

Question h2: What will output the following code and why?

var a = 1; 
function bar() { 
    if (!a) { 
        var a = 10; 
    } 
    console.log(a); 
} 
bar();

Answer

Console will output:

10

Question h3: What will output the following code and why?

var a = 1;
function b() {
    a = 10;
    return;
    function a() {}
} 
b(); 
console.log(a);

Answer

Console will output:

1

Question h4: What will output the following code and why?

function test() { 
    foo(); 
    bar();
    function foo() { 
        console.log('foo'); 
    }
    var bar = function() { 
        console.log('bar'); 
    } 
} 
test(); 

Answer

Console will output:

foo
TypeError: bar is not a function

Event Loop

Theory

Question el1: How works event loop in the browser JavaScript?

Answer

Event Loop in the browser could be represented as the following code:

while (eventLoop.waitForTask()) {  
  const taskQueue = eventLoop.selectTaskQueue();
  if (taskQueue.hasNextTask()) {
    taskQueue.processNextTask();
  }

  const microtaskQueue = eventLoop.microTaskQueue;
  while (microtaskQueue.hasNextMicrotask()) {
    microtaskQueue.processNextMicrotask();
  }

  if (eventLoop.shouldRender()) {
    eventLoop.render();
  }
}

Check current presentation

Question el2: What is a "Promise" in JavaScript in regards to event loops?

Answer

A Promise is essentially an object that can produce a single value at some time in the future, either a value or the reason why it could not be resolved. Developers can then attach callbacks to these objects to execute code once the value resolved by the Promise is available. Promises are also known as microtasks of event loops. This means it is basically a task that is queued to be recalled during the event loop. Promises can also be chained, meaning they can be attached to other Promises. Each attached Promise, or "child" Promise, would therefore have a "parent" Promise, that has to be resolved before the child can execute.

Practice

Question el3: What will output the following code and why?

console.log('script start');

setTimeout(function() {
  console.log('setTimeout');
}, 0);

Promise.resolve().then(function() {
  console.log('promise1');
}).then(function() {
  console.log('promise2');
});

console.log('script end');

Answer

Console will output:

script start
script end
promise1
promise2
setTimeout

Scope in JavaScript

Practice

Question s1: What will be the output of the following code and why?

try {
  console.log(a);
} catch (e) {
  try {
    a = 10;
    console.log(a);
  } catch (e) {
    console.log('bar');
  }
}
let a = 1;

Answer

Console will output:

bar

Reason:

Since let is uninitialized at any time until being declared (unlike var which is always initialized but with value undefined), the first attempt to console.log(a) will raise an error which will be caught by the catch block. Then, inside that catch block, there's a = 10 inside a try block again. This will also raise an error because there's still no variable named a so the catch block will catch the error once again so the output will be bar.

Booleans in JavaScript

Theory

Question b1: How many falsy values does JavaScript have? Name all of them

Answer JavaScript has the following 7 falsy values:

• 0 (integer)
• 0n (BigInt)
• null
• undefined
• false
• NaN
• "", '' or `` (empty string)

Contributing

I would be thankful for your issues and pull requests.