JavaScript Interview Questions

The eval() function evaluates JavaScript code represented as a string. The string can be a JavaScript expression, variable, statement, or sequence of statements.

console.log(eval("1 + 2")); //  3

Below are the main differences between window and document,

The window.history object contains the browser's history. You can load previous and next URLs in the history using back() and next() methods.

function goBack() {
window.history.back();
}
function goForward() {
window.history.forward();
}

Note: You can also access history without window prefix.

The mouseEvent getModifierState() is used to return a boolean value that indicates whether the specified modifier key is activated or not. The modifiers such as CapsLock, ScrollLock and NumLock are activated when they are clicked, and deactivated when they are clicked again.

Let's take an input element to detect the CapsLock on/off behavior with an example:

<input type="password" onmousedown="enterInput(event)" />

<script>
function enterInput(e) {
var flag = e.getModifierState("CapsLock");
if (flag) {
document.getElementById("feedback").innerHTML = "CapsLock activated";
} else {
document.getElementById("feedback").innerHTML =
"CapsLock not activated";
}
}
</script>

The isNaN() function is used to determine whether a value is an illegal number (Not-a-Number) or not. i.e, This function returns true if the value equates to NaN. Otherwise it returns false.

isNaN("Hello"); //true
isNaN("100"); //false

Below are the major differences between undeclared(not defined) and undefined variables,

var a;
a; // yields undefined

b; // Throws runtime error like "Uncaught ReferenceError: b is not defined"

This can be confusing, because it says not defined instead of not declared (Chrome)

Global variables are those that are available throughout the length of the code without any scope. The var keyword is used to declare a local variable but if you omit it then it will become global variable

msg = "Hello"; // var is missing, it becomes global variable

The problem with global variables is the conflict of variable names of local and global scope. It is also difficult to debug and test the code that relies on global variables.

The NaN property is a global property that represents "Not-a-Number" value. i.e, It indicates that a value is not a legal number. It is very rare to use NaN in a program but it can be used as return value for few cases

Math.sqrt(-1);
parseInt("Hello");

The isFinite() function is used to determine whether a number is a finite, legal number. It returns false if the value is +infinity, -infinity, or NaN (Not-a-Number), otherwise it returns true.

isFinite(Infinity); // false
isFinite(NaN); // false
isFinite(-Infinity); // false

isFinite(100); // true

Event flow refers to the order in which events are handled in the browser when a user interacts with elements on a webpage like clicking, typing, hovering, etc.

When you click an element that is nested in various other elements, before your click actually reaches its destination, or target element, it must trigger the click event for each of its parent elements first, starting at the top with the global window object.

Hence, there are three phases in JavaScript’s event flow:

1. Event Capturing(Top to Bottom): The event starts from the window/document and moves down the DOM tree toward the target element.
2. Target phase: The event reaches the target element — the element that was actually interacted with.
3. Event Bubbling(Bottom to Top): The event then bubbles back up from the target element to the root.

Event capturing is a phase of event propagation in which an event is first intercepted by the outermost ancestor element, then travels downward through the DOM hierarchy until it reaches the target (innermost) element.

To handle events during the capturing phase, you need to pass true as the third argument to the addEventListener method.

<button class="child">Hello</button>

<script>
const parent = document.querySelector("div");
const child = document.querySelector(".child");

// Capturing phase: parent listener (runs first)
parent.addEventListener("click", function () {
console.log("Parent (capturing)");
}, true); // `true` enables capturing

// Bubbling phase: child listener (runs after)
child.addEventListener("click", function () {
console.log("Child (bubbling)");
});
</script>
// Parent (capturing)
// Child (bubbling)

Event bubbling is a type of event propagation in which an event first triggers on the innermost target element (the one the user interacted with), and then bubbles up through its ancestors in the DOM hierarchy — eventually reaching the outermost elements, like the document or window.

By default, event listeners in JavaScript are triggered during the bubbling phase, unless specified otherwise.

<button class="child">Hello</button>

<script>
const parent = document.querySelector("div");
const child = document.querySelector(".child");

// Bubbling phase (default)
parent.addEventListener("click", function () {
console.log("Parent");
});

child.addEventListener("click", function () {
console.log("Child");
});
</script>
//Child
//Parent

Here, at first, the event triggers on the child button. Thereafter it bubbles up and triggers the parent div's event handler.

You can submit a form using document.forms[0].submit(). All the form input's information is submitted using onsubmit event handler

function submit() {
document.forms[0].submit();
}

The window.navigator object contains information about the visitor's browser OS details. Some of the OS properties are available under platform property,

console.log(navigator.platform);