JavaScript Common Questions and Answers

Question 1: What is the difference between null and undefined in JavaScript?

Answer:

null is a value that represents the intentional absence of any object value. It is a primitive value that can be assigned to a variable to indicate the absence of an object.
undefined is a value that represents an uninitialized or undefined variable. It is also a primitive value.

In summary, null is used to explicitly assign an empty value, while undefined is used when a variable has been declared but not assigned a value.

Question 2: What is hoisting in JavaScript?

Answer: Hoisting is a JavaScript behavior where variable and function declarations are moved to the top of their containing scope during the compilation phase, before the code is executed. This means that you can use variables and functions before they are declared in the code.

However, it’s important to note that only the declarations are hoisted, not the initializations or assignments. Variables are hoisted but remain undefined until they are assigned a value.

For example:

console.log(x); // Output: undefined
var x = 5;

In the above code, the variable x is hoisted to the top, but its assignment (x = 5) is not hoisted. Therefore, the initial value of x is undefined.

Question 3: What are closures in JavaScript?

Answer: A closure is a combination of a function and the lexical environment within which that function was declared. It allows a function to retain access to variables and parameters of its outer (enclosing) function even after the outer function has finished executing.

Closures are created whenever a function is defined inside another function and the inner function is returned or accessed outside of its parent function.

Closures are commonly used to create private variables and encapsulation in JavaScript.

Example:

function outer() {
  var x = 10;

  function inner() {
    console.log(x); // Accesses the variable 'x' from the outer function
  }

  return inner;
}

var closure = outer();
closure(); // Output: 10

In the above code, the inner function inner() is returned from the outer() function. Even though the outer() function has finished executing, the inner function still has access to the variable x due to closure.

Question 4: What is event delegation in JavaScript?

Answer: Event delegation is a technique in JavaScript where instead of attaching event listeners to individual elements, you attach a single event listener to a parent element that contains multiple child elements. The idea is that events occurring on the child elements will “bubble up” to the parent element, where the event listener can handle them.

This approach is useful when you have a large number of elements or dynamically added elements and you want to handle events efficiently without attaching listeners to each individual element.

By utilizing event delegation, you can improve performance and reduce memory usage in your applications.

Example:

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

// JavaScript:
const myList = document.getElementById('myList');

myList.addEventListener('click', function(event) {
  if (event.target.tagName === 'LI') {
    console.log(event.target.textContent); // Output: Clicked item's text
  }
});

In the above code, a single event listener is attached to the parent <ul> element. When a <li> element is clicked, the event bubbles up to the parent, and the event listener checks if the clicked element’s tag name is 'LI'. If it matches, it means an <li> element was clicked, and the text content of the clicked item is logged to the console.

By using event delegation, we avoid the need to attach individual event listeners to each <li> element, which can be beneficial when dealing with a large number of elements or dynamically added elements. It simplifies the code structure and improves performance by reducing the number of event listeners.

Share this:

Related