5 JavaScript Interview Questions

These questions test the foundational understanding of the developer

1: What is event delegation in JavaScript?
Answer: Event delegation is a technique where you attach a single event listener to a parent element, rather than multiple event listeners to individual child elements. This allows you to handle events efficiently for dynamically created or large sets of elements. When an event is triggered, it bubbles up through the DOM hierarchy and can be caught by the parent element's event listener.

// HTML
<ul id="parentList">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

// JavaScript
document.getElementById('parentList')
        .addEventListener('click', function(event) {
          if (event.target.tagName === 'LI') {
            console.log('You clicked on:', event.target.textContent);
          }
        });

**2: What is “closure” in JavaScript?
**Answer: A closure is a function bundled together with its lexical environment, which consists of all the variables that were in scope at the time of its creation. Closures allow JavaScript functions to maintain access to variables from their containing scope even after the parent function has finished executing. This enables powerful patterns like encapsulation, data privacy, and the creation of modules.

`function outerFunction() {
let outerVariable = 'I am outer';

function innerFunction() {
    console.log(outerVariable);
}

return innerFunction;

}

let closureExample = outerFunction();
closureExample(); // Output: I am outer`

3: Explain the differences between "==" and "===" operators in JavaScript.
Answer: The "==" operator checks for equality after performing type coercion, meaning it converts the operands to the same type before comparison. On the other hand, the "===" operator (strict equality) checks for equality without type coercion; it returns true only if the operands are of the same type and have the same value. In general, it's recommended to use "===" for more predictable and less error-prone comparisons.

console.log(5 == '5');  // Output: true (equality with type coercion)
console.log(5 === '5'); // Output: false (strict equality)

**4: What is the event loop in JavaScript?
**Answer: The event loop is a fundamental concept in JavaScript's concurrency model. It's responsible for handling asynchronous tasks such as callbacks, timers, and I/O operations. The event loop continuously checks the call stack and the task queue. When the call stack is empty, it takes the first task from the queue and pushes it onto the stack, effectively executing it. This process continues, allowing JavaScript to handle asynchronous operations efficiently.

console.log('Start');

setTimeout(function() {
    console.log('Timeout');
}, 0);

Promise.resolve().then(function() {
    console.log('Promise');
});

console.log('End');
// Output: Start, End, Promise, Timeout
5: Select correct way(s) to define a function in JavaScript:
function functionName() { ... }

var functionName = function() { ... };

var functionName = () => { ... };

var obj = { methodName() { ... } };

function ConstructorName() { ... }

var functionName = new Function('...');

Answer: They’re all correct.

// Function declaration
function functionName() {
// code
}

// Function expression
var functionName = function() {
// code
};

// Arrow function expression
var functionName = () => {
// code
};

// Method definition in an object
var obj = {
methodName() {
// code
}
};

// Constructor function
function ConstructorName() {
// code
}

// Function constructor
var functionName = new Function('arg1', 'arg2', 'return arg1 + arg2;');