JavaScript trivia or interview questions

Yesterday, I had an interview on JavaScript. As a React developer, I do not have practical experience with these questions. But, the interview questions are interesting to know.

Global this

What is the value of this in global scope? I have not really tried it before. I gave an answer. Maybe, it points to the window object. It turns out to be correct.

console.log(this);

UPDATE:

The value of this in global scope is the global object. For web, it is the window object. However, in strict mode, this is not bound to the global object. So, in strict mode, its value is undefined.

Equality operator

Have you ever pondered what the below expression evaluates to?

null == undefined

It turns out to be true. I guessed it right. Both null and undefined evaluates to false. So the expression evaluates to true.

What if I swap the == operator with === operator?

null === undefined

The triple equal operator checks for equality of values as well as equality of types. Clearly, null is of object type. And undefined is of undefined type. So, the expression evaluates to false.

Type of NaN

Continuing on the theme of equality, what does the below expression evaluate to?

NaN == NaN

I answered true. But, it turns out to be wrong. The above expression evaluates to false. For example, the expression parseInt('aaa') == parseInt('bbb') evaluates to false.

Do you know the type of NaN? NaN is of number type.

More probing on this

Consider the following code.

var theVar = 'a';
var obj = {
  theVar:  'b',
  prop:  {
    theVar: 'c',
    print: function() {
      console.log(this.theVar);
    }
  }
}

What gets printed on the console when we call obj.prop.print()? The answer is c. (Implicit binding of this)

What will get printed if I execute the following code?

var test = obj.prop.print;
test();

Calling test prints a. Because, the function does not have the context set. (Default binding of this)

How will you call the print function so that b is printed?

obj.prop.print.call(obj);

Using call allows us to pass the this context. To print b, we pass obj as the context to the call function. (Explicit binding of this)

Try it out for yourself using CodePen.

Arrow functions

Define a function which when invoked returns 5.

sum(2)(3)

I have a good working knowledge of arrow functions. So, this was a bit easy for me.

const sum = a => b => a + b;

Closures

We all know what closures are. And how it works. But, I always find it difficult to explain closures in words. So, here is some code which does not work the way it should.

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

The above code snippet outputs 5, 5 times. Apparently, var is a bit screwy. I have not used var for the last two years. The loop completes before console.log is run. So, each iteration prints 5. How do I fix the loop so that it prints 1 to 5? The simple answer. Use let instead of var.

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

The interviewer was not impressed. He asked me for an alternate solution using var.

for (var i = 0; i < 5; i++) {
  setTimeout(function(x) {
    console.log(x);
  }.bind(null, i), 1000);
}

Bind the closure with the current iteration variable. That fixes it.

I found the interview quite interesting. Because, it was well organised around core concepts. However, my interview was for React. And I don’t plan to work in ES5. So, the interview was a bit academic.

Related Posts

Leave a Reply

Your email address will not be published.