1. Explain event bubbling and event capturing in JavaScript. How can you prevent it?
Response: Event bubbling and event capturing are two phases of event propagation in the HTML DOM API. Event bubbling occurs when an event triggered on an element propagates up to its ancestors, whereas event capturing occurs when an event propagates down from the top of the DOM tree to the target element. To prevent event propagation, you can use event.stopPropagation() in the event handler. Additionally, you can prevent the default action of events using event.preventDefault().
2. What are closures in JavaScript and how are they used?
Response: A closure is a function that captures variables from its surrounding scope. In JavaScript, closures allow you to access an outer function’s scope from an inner function. They are used to create private variables, encapsulate code, and in functional programming patterns like currying and partial application. Closures are powerful because they let you associate data with a function that operates on that data, creating a sort of “state”.
3. Explain the difference between == and === in JavaScript.
Response: In JavaScript, == is the equality operator that performs type coercion if the types of the two operands are not the same before making the comparison. On the other hand, === is the strict equality operator that does not perform type coercion and only returns true if both the value and the type of the two operands are identical.
4. What is hoisting in JavaScript?
Response: Hoisting is a JavaScript mechanism where variables and function declarations are moved to the top of their containing scope before code execution. However, only the declarations are hoisted, not the initializations. If a variable is declared and initialized after using it, the variable will be undefined due to hoisting.
5. Explain how this keyword works in JavaScript.
Response: In JavaScript, this refers to the object that is currently executing or invoking the function. The value of this depends on the context in which the function is called: in the global context, this refers to the global object; inside a function, this refers to the global object or undefined in strict mode; in methods of objects, this refers to the object the method was called on; and in event handlers, this refers to the element that received the event.
6. What is a Promise in JavaScript? Give an example.
Response: A Promise in JavaScript is an object representing the eventual completion or failure of an asynchronous operation. It allows you to write asynchronous code that is more readable and easier to manage. A Promise has three states: pending, fulfilled, and rejected. Example:
const promise = new Promise((resolve, reject) => {
// Asynchronous operation
const success = true; // Simulate operation outcome
if (success) {
resolve('Operation successful');
} else {
reject('Operation failed');
}
});
promise.then(result => console.log(result)).catch(error => console.error(error));
7. What are template literals in JavaScript?
Response: Template literals are string literals allowing embedded expressions, multi-line strings, and string interpolation. Enclosed by backticks (“), they can contain placeholders (${expression}) for embedding variables and expressions into the string.
8. Explain the concept of destructuring in JavaScript.
Response: Destructuring is a JavaScript expression that allows unpacking values from arrays or properties from objects into distinct variables. It simplifies the way to access values and reduces the need for temporary variables when dealing with complex structures.
9. What is the difference between var, let, and const in JavaScript?
Response: var declares a variable optionally initializing it to a value. Variables declared with var are scoped to the function in which they are declared, or globally if declared outside a function. let allows you to declare block-scoped variables, significantly limiting the scope of a variable to the block, statement, or expression in which it is used. const is similar to let but is used to declare variables whose values are never intended to change. const must be initialized at the time of declaration.
10. How does the JavaScript event loop work?
Response: The JavaScript event loop is a mechanism that allows JavaScript to perform non-blocking asynchronous operations. It works by repeatedly taking an event from the event queue and processing it, if there is any, while executing other tasks asynchronously. This includes rendering updates, executing callbacks, and handling user interactions. The event loop enables JavaScript to execute long-running scripts without freezing the user interface, making it suitable for web applications that require high responsiveness.
These questions cover a range of JavaScript topics, from basics to more advanced concepts, providing a comprehensive overview of a candidate’s proficiency in JavaScript.