Frequently asked code snippets in JavaScript interview

Often we land up in a situation where the interviewer gives a code snippet and expects the output of the code snippet. Today, I will write about few such commonly asked questions in the JavaScript interviews

What will the code below output to the console and why 
 
console.log(1 + "2" + "2"); 
console.log(1 + +"2" + "2"); 
console.log(1 + -"1" + "2"); 
console.log(+"1" + "1" + "2"); 
console.log( "A" - "B" + "2"); 
console.log( "A" - "B" + 2);?

The above code will output the following to the console:

"122"
"32"
"02"
"112"
"NaN2"
"NaN"

Here’s why…

The fundamental issue here is that JavaScript (ECMAScript) is a loosely typed language and it performs automatic type conversion on values to accommodate the operation being performed. Let’s see how this plays out with each of the above examples.

Example 1: 1 + “2” + “2” Outputs: “122”

Explanation: The first operation to be performed in 1 + “2”. Since one of the operands (“2”) is a string, JavaScript assumes it needs to perform string concatenation and therefore converts the type of 1 to “1”, 1 + “2” yields “12”. Then, “12” + “2” yields “122”.

Example 2: 1 + +”2" + “2” Outputs: “32”

Explanation: Based on order of operations, the first operation to be performed is +”2" (the extra + before the first “2” is treated as a unary operator). Thus, JavaScript converts the type of “2” to numeric and then applies the unary + sign to it (i.e., treats it as a positive number). As a result, the next operation is now 1 + 2 which of course yields 3. But then, we have an operation between a number and a string (i.e., 3 and “2”), so once again JavaScript converts the type of the numeric value to a string and performs string concatenation, yielding “32”.

Example 3: 1 + -”1" + “2” Outputs: “02”

Explanation: The explanation here is identical to the prior example, except the unary operator is — rather than +. So “1” becomes 1, which then becomes -1 when the — is applied, which is then added to 1 yielding 0, which is then converted to a string and concatenated with the final “2” operand, yielding “02”.

Example 4: +”1" + “1” + “2” Outputs: “112”

Explanation: Although the first “1” operand is typecast to a numeric value based on the unary + operator that precedes it, it is then immediately converted back to a string when it is concatenated with the second “1” operand, which is then concatenated with the final “2” operand, yielding the string “112”.

Example 5: “A” — “B” + “2” Outputs: “NaN2”

Explanation: Since the — operator can not be applied to strings, and since neither “A” nor “B” can be converted to numeric values, “A” — “B” yields NaN which is then concatenated with the string “2” to yield “NaN2”.

Example 6: “A” — “B” + 2 Outputs: NaN

Explanation: As explained in the previous example, “A” — “B” yields NaN. But any operator applied to NaN with any other numeric operand will still yield NaN.

What will be the output when the following code is executed? 
Explain. console.log(false == '0') console.log(false === '0')

The code will output:

true
false

In JavaScript, there are two sets of equality operators. The triple-equal operator === behaves like any traditional equality operator would: evaluates to true if the two expressions on either of its sides have the same type and the same value. The double-equal operator, however, tries to coerce the values before comparing them. It is therefore generally good practice to use the === rather than ==. The same holds true for !== vs !=

What is the output out of the following code?
 var a={};
 b={key:'b'};
 c={key:'c'};
 
 a[b]=123;
 a[c]=456;
 console.log(a[b]);

The output of this code will be 456 (not 123).

The reason for this is as follows: When setting an object property, JavaScript will implicitly “stringify” the parameter value. In this case, since b and c are both objects, they will both be converted to “[object Object]”. As a result, a[b] and a[c] are both equivalent to a[“[object Object]”] and can be used interchangeably. Therefore, setting or referencing a[c] is precisely the same as setting or referencing a[b].

What will this code print?
for (let i = 0; i < 5; i++) { 
        setTimeout(function() { console.log(i); }, i * 1000 ); 
}

It will print 0 1 2 3 4, because we use let instead of var here. The variable i is only seen in the for loop’s block scope.

What will the code below output? 
console.log(0.1 + 0.2); console.log(0.1 + 0.2 == 0.3);

An educated answer to this question would simply be: “You can’t be sure. it might print out 0.3 and true, or it might not. Numbers in JavaScript are all treated with floating point precision, and as such, may not always yield the expected results.”

The example provided above is classic case that demonstrates this issue. Surprisingly, it will print out:

0.30000000000000004
false
What will be the output of this code
 var x = 21; 
 var girl = function () {
   
   console.log(x); 
   
   var x = 20;
}
girl();

Neither 21, nor 20, the result is undefined

It’s because JavaScript initialization is not hoisted.

Why doesn’t it show the global value of 21?

The reason is that when the function is executed, it checks that there’s a local x variable present but doesn’t yet declare it, so it won’t look for global one.

What do the following lines output, and why? 
console.log(1 < 2 < 3); 
console.log(3 > 2 > 1);

The first statement returns true which is as expected.

The second returns false because of how the engine works regarding operator associativity for < and >. It compares left to right, so 3 > 2 > 1 JavaScript translates to true > 1. true has value 1, so it then compares 1 > 1, which is false.

What will the following code output and why? 
var b = 1; 
function outer(){
 
var b = 2
function inner(){ 
b++; 
var b = 3; 
console.log(b)
}
 
inner(); 
}
 
outer();

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:

function inner () {
    var b; // b is undefined
    b++; // b is NaN
    b = 3; // b is 3
    console.log(b); // output "3"
}

Hope this article gonna be fruitful for the interview preparation !!