Tricky JavaScript Interview Questions and Answers
We are sharing the top 10 tricky javascript interview questions and answers which can be asked at the beginners level as well as to the experienced professional. These are the frequently asked javascript interview questions and answers.
Que 1: What will be the output of the following code?
function Show(){
console.log(x);
var x = 2;
};
Show();
Output: undefined
Explanation: It is due to Hoisting. Because variables declared with var keyword is hoisted at the creational phase only. So whenever console.log(x); will come for execution , Js engine search for the x variables in the memory. So x variable will be there in the memory but there is no value assigned to it. Hence its output will be undefined.
Que 2: Will both the functions return same output in below code?
function foo1(){
return {
bar: "hello"
};
}
function foo2() {
return
{
bar: "hello"
};
}
console.log(foo1());
console.log(foo2());
Output:
Object {bar: “hello”}
undefined
Explanation: It is because whenever we write the return statement , and if there is nothing after the return statement on same line then javascript automatically inserted the semicolon immediately after the return statement. And then rest of the statement does not execute after this.
Que 3: What will be the output of below code?
var a={},
b={key:'b'},
c={key:'c'};
a[b]=123;
a[c]=456;
console.log(a[b]);
Output: 456
Explanation: It is because the javascript implicitly stringify the parameter value for object properties. In our case b and c both are objects so its converted to “[object Object]”. It means 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 c[b].
Que 4: What will the following code output?
let a = [1, 2, 3];
let b = [...a];
b.push(4);
console.log(a);
console.log(b);
Output :
[1, 2, 3]
[1, 2, 3, 4]
Explanation: Here we are simply copying the values of object a into object b using spread operator. Later we are again inserting one more value into b. Since its a spread operator , hence original array which is a does not change.
Que 5:What will be the output of below code?
let obj1 = { name: "John", age: 30 };
let obj2 = { name: "John", age: 30 };
console.log(obj1 === obj2);
Output: false
Explanation: The code creates two objects, obj1 and obj2, that have the same properties, but are not the same object in memory. Therefore, when comparing them using the strict equality operator (===), the output is false.
Que 6: What will the following code output?
function first() {
var a = 100;
function second() {
console.log(a);
}
return second;
}
var third = first();
third();
Output: 100
Explanation: The code defines first function that creates a variable a and second function that logs the value of a. The first function then returns the second function. The second function is assigned to the variable third, and then invoked. As the second function has access to first function’s scope and a is accessible there so the output is 10. Its the concept of closure.
Que 7: What will the following code output?
let arr = [1, 2, 3];
let newArr = arr.map(function(item) {
return item * 2;
});
console.log(newArr);
Output: [2, 4, 6]
Explanation: The code creates an array “arr” with three elements, then uses the map method to create a new array “newArr” by applying a function that multiplies each element of “arr” by 2. Finally, it logs the new array to the console.
Que 8: What will the following code output?
let x = {a: 1};
let y = x;
x.a = 2;
console.log(y.a);
Output: 2
Explanation: Here x and y both are pointing to the same object in the memory. Hence when we are changing the value of x object properties , it will change the y object as well. Hence output is 2
Que 9: What will the following code output?
let a = [1, 2, 3];
let b = [1, 2, 3];
let c = a;
console.log(a == b);
console.log(b == c);
console.log(a == c);
Output:
Explanation:This question is tricky because it tests the understanding of reference equality and value equality.
- The first comparison,
a == b, compares the references of the two arrays, which are stored in different memory locations, so they are not equal. - The second comparison,
b == c, compares the references of the two arrays, which are stored in different memory locations, so they are not equal. - The third comparison,
a == c, compares the references of the two arrays, which are pointing to the same memory location, so they are equal.
Que 10: What will the following code output?
let a = 1;
let b = 2;
let c = 3;
(function firstFunction(){
let b = 5;
(function secondFunction(){
let a = b;
(function thirdFunction(){
let b = a;
console.log("a: "+a+", b: "+b+", c: "+c);
})();
})();
})();
Output: “a: 5, b: 5, c: 3”
Explanation:
This question is tricky because it involves nested function scopes and variable hoisting.
- The outermost function
firstFunctiondeclares a variablebwith a value of 5, which is only accessible within that function scope. - The second function
secondFunctiondeclares a variableaand assigns it the value of the outerbvariable, which is 5. - The innermost function
thirdFunctiondeclares a variableband assigns it the value of the outeravariable, which is 5. - When we log all the variables
a,bandcin the innermost function, it takes the values of the nearest scope which isb:5,a:5,c:3 respectively.
I hope these javascript interview questions and answers will be helpful for you. If you want to get more javascript interview questions or any other topics related to javascript Please visit the below articles and give like.
Prototypal Inheritance
What is Async/Await?
Scope Chain
How Closures work in Javascript
