learn kro favicon img

JavaScript Interview Questions (Part-2)

1. The following recursive code will cause a stack overflow if the array list is too large. How can you fix this and still retain the recursive pattern?

Answer:
The potential stack overflow can be avoided by modifying the nextListItem function as follows:

The stack overflow is eliminated because the event loop handles the recursion, not the call stack. When nextListItem runs, if item is not null, the timeout function (nextListItem) is pushed to the event queue and the function exits, thereby leaving the call stack clear. When the event queue runs its timed-out event, the next item is processed and a timer is set to again invoke nextListItem. Accordingly, the method is processed from start to finish without a direct recursive call, so the call stack remains clear, regardless of the number of iterations.

2. Create a function that, given a DOM Element on the page, will visit the element itself and all of its descendants (not just its immediate children). For each element visited, the function should pass that element to a provided callback function.

The arguments to the function should be:

i) a DOM element

ii) a callback function (that takes a DOM element as its argument)

Answer:
Visiting all elements in a tree (DOM) is a classic Depth-First-Search algorithm application. Here’s an example solution:

3. What will the following code output and why?

Answer:
Output to the console will be “3”.

There are three closures in the example, each with it’s own var b declaration. When a variable is invoked closures will be checked in order from local to global until an instance is found. Since the inner closure has a b variable of its own, that is what will be output.

Furthermore, due to hoisting the code in inner will be interpreted as follows:

4. What is WeakMap in ES6?

Answer:
The WeakMap is same as Map where it is a collection of key/value pairs. But in WeakMap, the keys must be objects and the values can be arbitrary values. The object references in the keys are held weakly, meaning that they are a target of garbage collection (GC) if there is no other reference to the object anymore. The WeakMap API is the same as the Map API.

However, One difference to Map objects is that WeakMap keys are not enumerable. And there are no methods giving us a list of keys. If they were, the list would depend on the state of garbage collection, introducing non-determinism. If we want to have a list of keys, we should use a Map.

5. What is Set?

Answer:
Set 
objects are collections of unique values. Duplicate values are ignored, as the collection must have all unique values. The values can be primitive types or object references.

Also, NaN and undefined can also be stored in a SetNaN is considered the same as NaN (even though NaN !== NaN).

6. What is Generator function?

Answer:
Generator functions are a new feature in ES6 that allow a function to generate many values over time by returning an object which can be iterated over to pull values from the function one value at a time.

A generator function returns an iterable object when it’s called. It is written using the new * syntax as well as the new yield keyword introduced in ES6.

Each time yield is called, the yielded value becomes the next value in the sequence. Also, note that generators compute their yielded values on demand, which allows them to efficiently represent sequences that are expensive to compute, or even infinite sequences.

7. What is WeakSet?

Answer:
The WeakSet object lets you store weakly held objects in a collection.

WeakSet objects are collections of objects. An object in the WeakSet may occur only once; it is unique in the WeakSet’s collection. The main differences to the Set object are:

  • Unlike SetWeakSet s are collections of objects only and not of arbitrary values of any type.
  • The WeakSet is weak: References to objects in the collection are held weakly. If there is no other reference to an object stored in the WeakSet, they can be garbage collected. That also means that there is no list of current objects stored in the collection. WeakSets are not enumerable.

8. What is undefined x 1 in JavaScript?

Answer:

When you run the code above and type console.log(trees); into your Chrome developer console, you will get
[“redwood”, “bay”, “cedar”, undefined × 1, “maple”]. When you run the code in Firefox’s browser console, you will get [“redwood”, “bay”, “cedar”, undefined, “maple”]. Thus, it’s clear that the Chrome browser has its own way of displaying uninitialised indexes in arrays. However, when you check trees[3] === undefined in both browsers, you will get similar output as true.

Note: Please remember you do not need to check for the uninitialised index of array in trees[3] === ‘undefined × 1’, as it will give you an error. ‘undefined × 1’ is just way of displaying an array’s uninitialised index in Chrome.

9. What is function hoisting in JavaScript?

Answer:
Function Expression

In JavaScript, variable and functions are hoisted. Let’s take function hoisting first. Basically, the JavaScript interpreter looks ahead to find all variable declarations and then hoists them to the top of the function where they’re declared. For example:

Behind the scene of the code above looks like this:

10. What is the instanceof operator in JavaScript? What would be the output of the code below?

Answer:
Here, instanceof operator checks the current object and returns true if the object is of the specified type.

For Example:

Here dog instanceof Animal is true since dog inherits from Animal.prototype.

Here name instanceof String is true since name inherits from String.prototype. Now let’s understand the code below:

Here function foo is returning foo, which again points to function foo.

So the new foo() instanceof foo return false;

That’s all for today…Thank for Reading. Give a clap if you liked this article. Happy Learning 🙂

You Might Like:

Let’s say we have a complex object, and we’d like to convert it into a string, to send it over ...
Read More
Let’s meet a new built-in object: Date. It stores the date, time and provides methods for date/time management. For instance, ...
Read More
The two most used data structures in JavaScript are Object and Array.
  • Objects allow us to create a single ...
    Read More
Let’s step away from the individual data structures and talk about the iterations over them. In the previous chapter we ...
Read More
As we know from the chapter Garbage collection, JavaScript engine keeps a value in memory while it is “reachable” and can ...
Read More
Till now, we’ve learned about the following complex data structures:
  • Objects are used for storing keyed collections.
  • Arrays are ...
    Read More
Iterable objects are a generalization of arrays. That’s a concept that allows us to make any object useable in a ...
Read More
1. The following recursive code will cause a stack overflow if the array list is too large. How can you ...
Read More
1. difference between Function.prototype.apply and Function.prototype.call? The only difference between apply and call is how we pass the arguments in ...
Read More
Solve 10 Days of JavaScript HackerRank Problems Today we’ve solved several JavaScript coding interview problems from hackerrank.com. Here we’ve presented ...
Read More

Leave a Comment

Your email address will not be published. Required fields are marked *