# Tricky Javascript Interview Questions – Coding N Concepts

Tricky Javascript Interview Questions – Coding N Concepts | ninjasquad

This post is a collection of tricky interview questions based on different concepts in JavaScript. The difficulty level of question will increase as you read forward down the line in this post.

## Number operators. Guess the output?

``````console.log(   2 + "2" );
console.log( "2" + "2" );

console.log(   2 - "2" );
console.log( "2" - "2" );
console.log( "A" - "A" );
``````

Think for a while before looking at the output.

``````Output
22
22

0
0
NaN
``````

Here is the explanation,

Javascript `+` operator behaves as,

• number operator when both operands are number
• concat operator if any one or both of the operands are string.

Javascript `-` operator always behaves as number operator. if any one or both of the operands are string, Javascript attempts to convert it to a number, if not able to convert then return NaN.

## Relational Operators. Guess the output ?

``````console.log( 10 < 20 < 30 );
console.log( 30 > 20 > 10 );
``````

Have you guessed `true` in both the cases ? No, its not correct.

``````Output
true
false
``````

The output is `true` and `false`. Here is the explanation,

In Javascript relational operators are evaluated from left to right, false equals 0, and true equals 1 for number comparisons.

So comparison evaluation is something like this,

``````10 < 20 < 30  =>  true < 30  =>  1 < 30  => true
30 > 20 > 10  =>  true > 10  =>  1 > 10  => false
``````

## Comparison Operators. Guess the output ?

``````console.log( null == 0 );
console.log( null > 0  );
console.log( null >= 0 );
``````

You might have guessed `false` in all the three cases but its not correct.

``````Output
false
false
true
``````

In Javascript, equality check `==` and comparisons `> < >= <=` behaves differently.

For equality comparison,

• null and undefined are comparable.
• 0, false and “” (empty string) are comparable.
• null and 0 are not comparable so `null == 0` returns false.

For number comparison,

• if one operand is number, it attempts to convert other operand to number.
• null becomes 0 and undefined becomes NaN for number comparison so `null > 0` returns false whereas `null >= 0` returns true.

## `forEach` loop. Guess the output?

``````const elements = [1, 2, 3, 4, 5];

elements.forEach(element => {
console.log(element);

if(element == 2){
return;
//break;
//continue;
}
})
``````

Have you guessed it will print 1 and 2 ? Let’s look at the output,

``````Output
1
2
3
4
5
``````

Yes, its confusing in Javascript. The reason is that we are passing a callback function in `forEach` loop which will be executed for each element no matter if we `return`.

If you use `break` or `continue` instead of `return`, you get either one of the error since these are not applicable for a callback function:

``````Uncaught SyntaxError: Illegal break statement
Uncaught SyntaxError: Illegal continue statement
``````

From Official MDN docs:
There is no way to stop or break a `forEach` loop other than throwing an exception. If you need such behavior, the `forEach` method is the wrong tool.
Early termination may be accomplished with:

• A simple `for` loop
• A `for...of` / `for...in` loops

## Variable `hoisting`. Guess the output?

``````var foo = 1;

function myFun(){
console.log(foo);

var foo = 2;
}

myFun();
``````

Have you guessed `foo = 1` or `foo = 2`?

It’s neither one of them. It will print `undefined`. Here is the explanation,

Hoisting is a JavaScript mechanism where variables and function declarations are moved to the top of their scope before code execution.

Let’s see how it is interpreted by the compiler in hoisting process,

``````var foo;
foo = 1;

function myFun(){

var foo;          // var hoisted and initialized with undefined
console.log(foo); // undefined

foo = 2;
}

myFun();
``````

## `Closure`. Guess the output?

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

Have you guessed it will print 0, 1, 2 after every 1 second ? Let’s look at the output,

``````Output
3
3
3
``````

Actually it will print 3, 3, 3 after every 1 second. This is because of JavaScript Closure. Here is the explanation,

###### closure

A JavaScript closure is when an inner function has access to its outer function’s scope. In the following line of code:

``````setTimeout(function() { console.log(i); }, i*1000);
``````

variable `i` is used in an inner function whereas it is actually declared in outer for loop. Inner function will be able to access the value of `i` through Closure.

###### hoisting

In Javascript hoisting process, declaration of `i` will be moved to the top of their scope, since `i` is defined using var in for loop, declaration of `i` will be moved to global scope in hoisting process.

After three iteration of for loop, value of global scoped variable `i` will be 3. All three closures will refer to this same `i` variable from global scope.

###### let

if `i` were defined using let instead of var in for loop, output would have been different. Why?

let is block scoped as opposed to var which is function scoped. Since for loop is also a block, value of `i` in each iteration is block scoped within that iteration and each closure has its own copy of `i` variable. Let’s look at the code,

``````for (let i = 0; i < 3; i++) {
setTimeout(function() { console.log(i); }, i*1000);
}
``````
``````Output
0
1
2
``````

## `this` keyword. Guess the output?

``````var a = new Person("a");
var b = Person
var c = Person("c");

function Person(fname) {
this.fname = fname;
}

console.log("1.", fname);
console.log("2.", a.fname);
console.log("3.", b.fname);
console.log("4.", c.fname);
``````

Think for a while before looking at the output.

``````Output
1. c
2. a
3. undefined
Uncaught TypeError: Cannot read property 'fname' of undefined
``````

Here is the explanation,

1. `fname` will print c. When you execute `Person("c")` function, `this` refers to global object window and `this.fname` is assigned value as c.
2. `a.fname` will print a. When you execute function using new keyword `new Person("a")`, `this` refers to newly created object.
3. `b.fname` will print `undefined` since you are just assigning a function object and not executing it. `Person` object is not having property named as `fname`
4. function `Person("c")` doesn’t return anything so c is `undefined` and `c.fname` will throw error

Source: Internet

We are offering free coding tuts

X