Advanced javascript interview questions

Hungry for more advanced and tricky JavaScript Interview questions and answers to transform yourself from a Junior JavaScript Developer into a Senior JavaScript Guru before your next tech interview? Search no more! Come along and explore top hardest JavaScript Interview Questions and Answers including ES6, ES2015 for experienced web developer and get your next six-figure job offer.

Q1: Explain equality in JavaScript

Topic: JavaScript

Difficulty: :star:

JavaScript has both strict and type–converting comparisons:

• Strict comparison (e.g., ===) checks for value equality without allowing coercion
• Abstract comparison (e.g. ==) checks for value equality with coercion allowed

var a = "42";
var b = 42;

a == b;            // true
a === b;        // false

Some simple equalityrules:

• If either value (aka side) in a comparison could be the true or false value, avoid == and use === .
• If either value in a comparison could be of these specific values ( 0 , "" , or [] — empty array), avoid == and use === .
• In all other cases, you’re safe to use == . Not only is it safe, but in many cases it simplifies your code in a way that improves readability.

:link: Source: FullStack.Cafe

Q2: Provide some examples of non-bulean value coercion to a boolean one

Topic: JavaScript

Difficulty: :star::star::star:

The question is when a non-boolean value is coerced to a boolean, does it become true or false , respectively?

"" (empty string)
0, -0, NaN (invalid number)
null, undefined
false

The specific list of “falsy” values in JavaScript is as follows:

Any value that’s not on this “falsy” list is “truthy.” Here are some examples of those:

"hello"
42
true
[ ], [ 1, "2", 3 ] (arrays)
{ }, { a: 42 } (objects)
function foo() { .. } (functions)

:link: Source: FullStack.Cafe

:link: Javascript Frameworks you should definitely learn in 2020

Q3: What is IIFEs (Immediately Invoked Function Expressions)?

Topic: JavaScript

Difficulty: :star::star::star:

It’s an Immediately-Invoked Function Expression, or IIFE for short. It executes immediately after it’s created:

(function IIFE(){
    console.log( "Hello!" );
})();
// "Hello!"

This pattern is often used when trying to avoid polluting the global namespace, because all the variables used inside the IIFE (like in any other normal function) are not visible outside its scope.

:link: Source: stackoverflow.com

Q4: When should I use Arrow functions in ES6?

Topic: JavaScript

Difficulty: :star::star::star:

I’m now using the following rule of thumb for functions in ES6 and beyond:

function
class
=>

Why use arrow functions almost everywhere?

• Scope safety : When arrow functions are used consistently, everything is guaranteed to use the same thisObject as the root. If even a single standard function callback is mixed in with a bunch of arrow functions there’s a chance the scope will become messed up.
• Compactness : Arrow functions are easier to read and write. (This may seem opinionated so I will give a few examples further on).
• Clarity : When almost everything is an arrow function, any regular function immediately sticks out for defining the scope. A developer can always look up the next-higher function statement to see what the thisObject is.

:link: Source: stackoverflow.com

Q5: What are the differences between ES6 class and ES5 function constructors?

Topic: JavaScript

Difficulty: :star::star::star:

Let’s first look at example of each:

// ES5 Function Constructor
function Person(name) {
  this.name = name;
}

// ES6 Class
class Person {
  constructor(name) {
    this.name = name;
  }
}

For simple constructors, they look pretty similar.

The main difference in the constructor comes when using inheritance. If we want to create a Student class that subclasses Person and add a studentId field, this is what we have to do in addition to the above.

// ES5 Function Constructor
function Student(name, studentId) {
  // Call constructor of superclass to initialize superclass-derived members.
  Person.call(this, name);

  // Initialize subclass's own members.
  this.studentId = studentId;
}

Student.prototype = Object.create(Person.prototype);
Student.prototype.constructor = Student;

// ES6 Class
class Student extends Person {
  constructor(name, studentId) {
    super(name);
    this.studentId = studentId;
  }
}

It’s much more verbose to use inheritance in ES5 and the ES6 version is easier to understand and remember.

:link: Source: github.com/yangshun

Q6: Explain Function.prototype.bind .

Topic: JavaScript

Difficulty: :star::star::star:

Taken word-for-word from MDN :

The bind() method creates a new function that, when called, has its this keyword set to the provided value, with a given sequence of arguments preceding any provided when the new function is called.

In my experience, it is most useful for binding the value of this in methods of classes that you want to pass into other functions. This is frequently done in React components.

:link: Source: github.com/yangshun

Q7: What’s a typical use case for anonymous functions?

Topic: JavaScript

Difficulty: :star::star::star:

They can be used in IIFEs to encapsulate some code within a local scope so that variables declared in it do not leak to the global scope.

(function() {
  // Some code here.
})();

As a callback that is used once and does not need to be used anywhere else. The code will seem more self-contained and readable when handlers are defined right inside the code calling them, rather than having to search elsewhere to find the function body.

setTimeout(function() {
  console.log('Hello world!');
}, 1000);

Arguments to functional programming constructs or Lodash (similar to callbacks).

const arr = [1, 2, 3];
const double = arr.map(function(el) {
  return el * 2;
});
console.log(double); // [2, 4, 6]

:link: Source: github.com/yangshun

Q8: Explain the difference between Object.freeze() vs const

Topic: JavaScript

Difficulty: :star::star::star:

const and Object.freeze are two completely different things.

• const applies to bindings (“variables”). It creates an immutable binding, i.e. you cannot assign a new value to the binding.

const person = {
    name: "Leonardo"
};
let animal = {
    species: "snake"
};
person = animal; // ERROR "person" is read-only

• Object.freeze works on values , and more specifically, object values . It makes an object immutable, i.e. you cannot change its properties.

let person = {
    name: "Leonardo"
};
let animal = {
    species: "snake"
};
Object.freeze(person);
person.name = "Lima"; //TypeError: Cannot assign to read only property 'name' of object
console.log(person);

:link: Source: stackoverflow.com

Q9: What is generator in JS?

Topic: JavaScript

Difficulty: :star::star::star:

Generators are functions which can be exited and later re-entered. Their context (variable bindings) will be saved across re-entrances. Generator functions are written using the function* syntax. When called initially, generator functions do not execute any of their code, instead returning a type of iterator called a Generator. When a value is consumed by calling the generator’s next method, the Generator function executes until it encounters the yield keyword.

The function can be called as many times as desired and returns a new Generator each time, however each Generator may only be iterated once.

function* makeRangeIterator(start = 0, end = Infinity, step = 1) {
    let iterationCount = 0;
    for (let i = start; i < end; i += step) {
        iterationCount++;
        yield i;
    }
    return iterationCount;
}

:link: Source: stackoverflow.com

Q10: When should we use generators in ES6?

Topic: JavaScript

Difficulty: :star::star::star:

To put it simple, generator has two features:

• one can choose to jump out of a function and let outer code to determine when to jump back into the function.
• the control of asynchronous call can be done outside of your code

The most important feature in generators — we can get the next value in only when we really need it, not all the values at once. And in some situations it can be very convenient.

:link: Source: stackoverflow.com

Q11: Explain what is hoisting in Javascript

Topic: JavaScript

Difficulty: :star::star::star::star:

Hoistingis the concept in which Javascript, by default, moves all declarations to the top of the current scope. As such, a variable can be used before it has been declared.

Note that Javascript only hoists declarations and not initializations.

:link: Source: https://github.com/kennymkchan

Q12: What will be the output of the following code?

Topic: JavaScript

Difficulty: :star::star::star::star:

var output = (function(x) {
  delete x;
  return x;
})(0);

console.log(output);

Above code will output 0 as output. delete operator is used to delete a property from an object. Here x is not an object it’s local variable . delete operator doesn’t affect local variable.

:link: Source: github.com/ganqqwerty

Q13: What will be the output of the following code?

Topic: JavaScript

Difficulty: :star::star::star::star:

var Employee = {
  company: 'xyz'
}
var emp1 = Object.create(Employee);
delete emp1.company
console.log(emp1.company);

Above code will output xyz as output.

Here emp1 object got company as prototype property.

delete operator doesn’t delete prototype property.

emp1 object doesn’t have company as its own property. You can test it like:

console.log(emp1.hasOwnProperty('company')); //output : false

However, we can delete company property directly from Employee object using delete Employee.company or we can also delete from emp1 object using __proto__ property delete emp1.__proto__.company .

:link: Source: github.com/ganqqwerty

Q14: Explain the Prototype Design Pattern

Topic: JavaScript

Difficulty: :star::star::star::star:

The Prototype Pattern creates new objects, but rather than creating non-initialized objects it returns objects that are initialized with values it copied from a prototype – or sample – object. The Prototype pattern is also referred to as the Properties pattern.

An example of where the Prototype pattern is useful is the initialization of business objects with values that match the default values in the database. The prototype object holds the default values that are copied over into a newly created business object.

Classical languages rarely use the Prototype pattern, but JavaScript being a prototypal language uses this pattern in the construction of new objects and their prototypes.

:link: Source: dofactory.com

Q15: What is the Temporal Dead Zone in ES6?

Topic: JavaScript

Difficulty: :star::star::star::star:

In ES6 let and const are hoisted (like var , class and function ), but there is a period between entering scope and being declared where they cannot be accessed. This period is the temporal dead zone (TDZ) .

Consider:

//console.log(aLet)  // would throw ReferenceError

let aLet;
console.log(aLet); // undefined
aLet = 10;
console.log(aLet); // 10

In this example the TDZ ends when aLet is declared, rather than assigned.

:link: Source: github.com/ajzawawi

Q16: Can you describe the main difference between a .forEach loop and a .map() loop and why you would pick one versus the other?

Topic: JavaScript

Difficulty: :star::star::star::star:

To understand the differences between the two, let’s look at what each function does.

forEach

• Iterates through the elements in an array.
• Executes a callback for each element.
• Does not return a value.

const a = [1, 2, 3];
const doubled = a.forEach((num, index) => {
  // Do something with num and/or index.
});

// doubled = undefined

map

• Iterates through the elements in an array.
• “Maps” each element to a new element by calling the function on each element, creating a new array as a result.

const a = [1, 2, 3];
const doubled = a.map(num => {
  return num * 2;
});

// doubled = [2, 4, 6]

The main difference between .forEach and .map() is that .map() returns a new array. If you need the result, but do not wish to mutate the original array, .map() is the clear choice. If you simply need to iterate over an array, forEach is a fine choice.

:link: Source: github.com/yangshun

Q17: What’s the difference between a variable that is: null , undefined or undeclared? How would you go about checking for any of these states?

Topic: JavaScript

Difficulty: :star::star::star::star:

Undeclaredvariables are created when you assign a value to an identifier that is not previously created using var , let or const . Undeclared variables will be defined globally, outside of the current scope. In strict mode, a ReferenceError will be thrown when you try to assign to an undeclared variable. Undeclared variables are bad just like how global variables are bad. Avoid them at all cost! To check for them, wrap its usage in a try / catch block.

function foo() {
  x = 1; // Throws a ReferenceError in strict mode
}

foo();
console.log(x); // 1

A variable that is undefined is a variable that has been declared, but not assigned a value. It is of type undefined . If a function does not return any value as the result of executing it is assigned to a variable, the variable also has the value of undefined . To check for it, compare using the strict equality ( === ) operator or typeof which will give the 'undefined' string. Note that you should not be using the abstract equality operator to check, as it will also return true if the value is null .

var foo;
console.log(foo); // undefined
console.log(foo === undefined); // true
console.log(typeof foo === 'undefined'); // true

console.log(foo == null); // true. Wrong, don't use this to check!

function bar() {}
var baz = bar();
console.log(baz); // undefined

A variable that is null will have been explicitly assigned to the null value. It represents no value and is different from undefined in the sense that it has been explicitly assigned. To check for null, simply compare using the strict equality operator. Note that like the above, you should not be using the abstract equality operator ( == ) to check, as it will also return true if the value is undefined .

var foo = null;
console.log(foo === null); // true
console.log(typeof foo === 'object'); // true

console.log(foo == undefined); // true. Wrong, don't use this to check!

As a personal habit, I never leave my variables undeclared or unassigned. I will explicitly assign null to them after declaring if I don’t intend to use it yet. If you use a linter in your workflow, it will usually also be able to check that you are not referencing undeclared variables.

:link: Source: github.com/yangshun

Q18: Describe the Revealing Module Pattern design pattern

Topic: JavaScript

Difficulty: :star::star::star::star::star:

A variation of the module pattern is called the Revealing Module Pattern . The purpose is to maintain encapsulation and reveal certain variables and methods returned in an object literal. The direct implementation looks like this:

var Exposer = (function() {
  var privateVariable = 10;

  var privateMethod = function() {
    console.log('Inside a private method!');
    privateVariable++;
  }

  var methodToExpose = function() {
    console.log('This is a method I want to expose!');
  }

  var otherMethodIWantToExpose = function() {
    privateMethod();
  }

  return {
      first: methodToExpose,
      second: otherMethodIWantToExpose
  };
})();

Exposer.first();        // Output: This is a method I want to expose!
Exposer.second();       // Output: Inside a private method!
Exposer.methodToExpose; // undefined

An obvious disadvantage of it is unable to reference the private methods

:link: Source: scotch.io

Q19: What’s the difference between ES6 Map and WeakMap?

Topic: JavaScript

Difficulty: :star::star::star::star::star:

They both behave differently when a object referenced by their keys/values gets deleted. Lets take the below example code:

var map = new Map();

var weakmap = new WeakMap();

(function() {
    var a = {
        x: 12
    };
    var b = {
        y: 12
    };

    map.set(a, 1);
    weakmap.set(b, 2);
})()

The above IIFE is executed there is no way we can reference {x: 12} and {y: 12} anymore. Garbage collector goes ahead and deletes the key b pointer from “WeakMap” and also removes {y: 12} from memory. But in case of “Map”, the garbage collector doesn’t remove a pointer from “Map” and also doesn’t remove {x: 12} from memory.

WeakMap allows garbage collector to do its task but not Map. With manually written maps, the array of keys would keep references to key objects, preventing them from being garbage collected. In native WeakMaps, references to key objects are held “ weakly “, which means that they do not prevent garbage collection in case there would be no other reference to the object.

:link: Source: stackoverflow.com

Q20: Is JavaScript a pass-by-reference or pass-by-value language?

Topic: JavaScript

Difficulty: :star::star::star::star::star:

It’s always pass by value, but for objects the value of the variable is a reference. Because of this, when you pass an object and change its members , those changes persist outside of the function. This makes it look like pass by reference. But if you actually change the value of the object variable you will see that the change does not persist, proving it’s really pass by value.

Example:

function changeStuff(a, b, c)
{
  a = a * 10;
  b.item = "changed";
  c = {item: "changed"};
}

var num = 10;
var obj1 = {item: "unchanged"};
var obj2 = {item: "unchanged"};

changeStuff(num, obj1, obj2);

console.log(num);
console.log(obj1.item);    
console.log(obj2.item);

Output:

10
changed
unchanged

:link: Source: stackoverflow.com

Q21: How to “deep-freeze” object in JavaScript?

Topic: JavaScript

Difficulty: :star::star::star::star::star:

If you want make sure the object is deep frozen you have to create a recursive function to freeze each property which is of type object:

Without deep freeze:

let person = {
    name: "Leonardo",
    profession: {
        name: "developer"
    }
};
Object.freeze(person); // make object immutable
person.profession.name = "doctor";
console.log(person); //output { name: 'Leonardo', profession: { name: 'doctor' } }

With deep freeze:

function deepFreeze(object) {
    let propNames = Object.getOwnPropertyNames(object);
    for (let name of propNames) {
        let value = object[name];
        object[name] = value && typeof value === "object" ?
            deepFreeze(value) : value;
    }
    return Object.freeze(object);
}
let person = {
    name: "Leonardo",
    profession: {
        name: "developer"
    }
};
deepFreeze(person);
person.profession.name = "doctor"; // TypeError: Cannot assign to read only property 'name' of object

:link: Source: medium.com

Q22: In JavaScript, why is the “this” operator inconsistent?

Topic: JavaScript

Difficulty: :star::star::star::star::star:

The most important thing to understand is that a function object does not have a fixed this value — the value of this changes depending on how the function is called. We say that a function is invoked with some a particular this value — the this value is determined at invocation time, not definition time.

• If the function is called as a “raw” function (e.g., just do someFunc() ), this will be the global object ( window in a browser) (or undefined if the function runs in strict mode).
• If it is called as a method on an object, this will be the calling object.
• If you call a function with call or apply , this is specified as the first argument to call or apply .
• If it is called as an event listener, this will be the element that is the target of the event.
• If it is called as a constructor with new , this will be a newly-created object whose prototype is set to the prototype property of the constructor function.
• If the function is the result of a bind operation, the function will always and forever have this set to the first argument of the bind call that produced it. (This is the single exception to the “functions don’t have a fixed this ” rule — functions produced by bind actually do have an immutable this .)

:link: Source: stackoverflow.com

Q23: Compare Async/Await and Generators usage to achive same functionality

Topic: JavaScript

Difficulty: :star::star::star::star::star:

• Generator function are executed yield by yield i.e one yield-expression at a time by its iterator (the next method) where as Async-await, they are executed sequential await by await.
• Async/await makes it easier to implement a particular use case of Generators.
• The return value of Generator is always {value: X, done: Boolean} where as for Async function it will always be a promise that will either resolve to the value X or throw an error.
• Async function can be decomposed into Generator and promise implementation like:

:link: Source: stackoverflow.com