In that line of problems, there is a favorite question of mine, which a lot of people misunderstood and answered incorrectly. If my memory serves right only 2 out of 20+ people answered correctly (Sorry the title was a click-bait and people have answered it before) and was able to explain the reason as well. Let’s see the problem and then discuss the output and the reason for the behavior.
The above code is pretty simple with few assignments and log statements, think of what will be the output of the code and check your answer with the screenshot below.
Most people will either miss the
undefined or will fail to explain why it is
undefined. If your answer is right and you know why this is happening, you probably can move on without reading further (But please read it anyway and give me your feedback).
Two interesting things are happening here, the first one is how js resolves variable definitions when encountered a variable in the code. We defined a global variable name and then immediately put a
console.log for it. After that, it encounters a function definition and then another
console.log in the global scope. In both cases, the JS interpreter will look for a variable defined as
name in the current scope which is the global scope in this case.
When the JS interpreter encounters a variable usage it’ll look in the current scope and if the variable isn’t defined in the current scope, it will look in the parent scope and grandparent’s and so on, until it either find the variable or it reaches the global scope. If the variable is not found in any scopes, it’ll be returned as undefined.
In our code, we have a function defined as
print() which also put
console.log for the
name variable, so according to the quoted lines above, the print function should look for the name variable in its current scope and which is undefined at the moment and it should reach the global scope and should write the value
Our print function is declaring 3 variable at a later stage after the console log but the js interpreter will move the declarations to the top of the current scope which is the equivalent of the second function in the above gist. This is exactly what is happening in our initial problem.
print() function defines a variable
var name = "React" the
var name; will be moved to the top and when JS interpreter looks for the variable within the function’s scope, it’ll be available but the value will not be assigned to it, hence the log says
undefined because it is undefined at the moment within the function’s scope. In the second
console.log you can see it logs the value fine because the value has been assigned to the variable once that assignment code is executed.
I hope I explained it as best as I can, feel free to let me know of any feedback/queries in the comments.
Note: Asking only this kind of tricking questions in an interview is not always the ideal approach to see the best of a candidate. I am mostly using this to see if the candidate is able to think like a compiler/interpreter when encountered with a tricky issue. You should probably use tricking questions along with other proven interview practices to get the best outcome.