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.