Interview Questions

JavaScript

1. Difference between ES5 and ES6
2. What are the types of functions in Javascript
3. What are Generator Functions
4. What is Event Loop
5. What is Closure. Write an example for closure

6. Home/About/../Gallery/Blog/Contact/../News

   Convert the above line to below. (wherever /.. comes. those before page link and the /.. should be removed)

   Home/Gallery/Blog/News

7. What will be the output

   for(let a = 0; a < 5; a++) {
      setTimeout( function(){
         console.log(a);
      }, 1000)
   }
   

   Above code explained in this page

React

1. If we remove two elements from an array, how it will update through Virtual DOM
2. Difference between Class and Functional components
3. What are Higher Order Component (HOC)

JavaScript

1. What will be the output

   q1:

   let x = 0.1 + 0.2;
   let y = 0.3;
   console.log(x == y);
   Output - 
   

   Answer

   My answer - true

   correct answer is false

   How? -

   • This is due to floating-point precision errors in programming languages
   • 0.1 + 0.2 actually results in: 0.30000000000000004
   • x == y // becomes 0.30000000000000004 == 0.3 => false
   Q2:

   let x = Infinity;
   console.log(typeof x);
   Output - 
   

   Answer

   My answer - String

   Correct answer : number

   Explanation:

   • In JavaScript, Infinity is a special numeric value. It is still considered a number by the language.
     • typeof Infinity → "number"
     • typeof -Infinity → "number"
     • typeof NaN → also "number"
   • Infinity in Java, Python, C, and C++,

     Language	Infinity Value	Type	Type Output
     Java	Double.POSITIVE_INFINITY	double	Double (via getClass())
     Python	float('inf')	float	<class 'float'>
     C	INFINITY	double	N/A (manually tracked)
     C++	INFINITY	double	N/A (manually tracked)
     JS	Infinity	number	"number"

   q3:

   let x = [];
   console.log(Boolean(x));
   Output - 
   

   Answer

   My answer - true

   Correct answer : true

   Explanation:

   • In Javascript, only below values are converted to false. All other values are true
     • false
     • 0
     • "" (Note: non-empty string is true, even just space: " ")()
     • null
     • undefined
     • NaN
   q4:

   let x = [];
   let y = [];
   let z = x + y;
   
   console.log(typeof z);
   
   Output - 
   

   Answer

   My answer - undefined

   Correct answer : string

   Explanation:

   Why is the output "string"?

   • In JavaScript, when you use the + operator on non-numeric types, it performs string concatenation.
   • x and y are both empty arrays: []
   • JavaScript converts both arrays to empty strings using .toString()
   • "" + "" → "" (an empty string)
   • You can try:
     console.log(x.toString()); // ""
     console.log(y.toString()); // ""
     

   • Expression	Result	Type
     [] + []	""	string
     [] + {}	"[object Object]"	string
     {} + []	0 (if parsed as expression)	number
     {} + {}	"NaN" (or [object Object][object Object] in some contexts) Block + Object (may return NaN)	string or number
     ({} + {})	"[object Object][object Object]" Object + Object as strings	string

   q5:

   let x = [1, 2, 3];
   
   let y = x.map((num) => {
      x.push(num + 3);
      return num + 1;
   });
   console.log(y);
   
   Output. -
   

   Answer

   My answer. - [2, 3, 4]

   Correct answer : [2, 3, 4]

   q6:

   var x = 23;
   
   (function(){
      var x = 43;
      (function random(){
         x++;
         console.log(x);
      x=21
      })();
   })();
   Output -
   

   Answer

   My answer - 44

   Correct answer : 44

   q7:

   import React from 'react';
   
   export function App(props) {
         const handleOnClick = () => {
            console.log("Button Clicked")
         }
         return (
            <div>
               <button onClick={() => handleOnClick()} ></button>
               <button onClick={() => handleOnClick} ></button>
               <button onClick={handleOnClick()} ></button>
               <button onClick={handleOnClick} ></button>
            </div>
         )
   }
   Output - 
   

   Answer

   My answer -

   handleOnClick() Function call handeled by react

   handleOnClick reference passed

   handleOnClick() - Error, cannot call directly on onClick

   handleOnClick Function called by react

   Correct answer:

   Explanation:

   You're using 4 different ways to attach an event handler in React.

   • <button onClick={() => handleOnClick()}></button>
     ✅
     • On click, the arrow function is called → handleOnClick() is invoked → logs "Button Clicked"
     • This is a common and safe way to call a function with no or fixed arguments.
     • Output: On click: Button Clicked
   • <button onClick={() => handleOnClick}></button>
     ⚠️
     • On click, the arrow function returns the function handleOnClick, but does not call it.
     • Output: On click: No Output
   • <button onClick={handleOnClick()}></button>
     ❌
     • handleOnClick() is called immediately during render, not on click.
     • The return value of handleOnClick() (which is undefined) becomes the onClick handler.
     • So, nothing happens on click, and the log appears once at render time.
     • Output:
       At render:
       Button Clicked
     • On click: Error or nothing (because onClick is undefined)
   • <button onClick={handleOnClick}></button>
     ✅
     • handleOnClick is passed by reference.
     • On click, React calls handleOnClick().
     • This is the cleanest and most performant way when no arguments are needed.
     • Output: On click: Button Clicked

   • Button	Code	On Click Behavior	Output
     1	onClick={() => handleOnClick()}	✅ Calls the function	Button Clicked
     2	onClick={() => handleOnClick}	❌ Returns function, not called	Nothing happens
     3	onClick={handleOnClick()}	❌ Invokes immediately on render	Button Clicked (at render), nothing on click
     4	onClick={handleOnClick}	✅ Calls function on click	Button Clicked

   Q8 a)

   var x;
   x==undefined ? console.log(true) : console.log(false)
   
   Output. -
   

   Answer

   My answer - true

   Correct answer : true

   Q8 b)

   null ? console.log(true) : console.log(false)
   Output -
   

   Answer

   My answer - false

   Correct answer : false