5 Javascript coding interview questions - Part 6

Q1: What is the difference between let, const, and var?

Ans:

• var: Function-scoped, can be redeclared, hoisted, and doesn’t support block scoping.
• let: Block-scoped, can’t be redeclared in the same scope, hoisted but not initialized.
• const: Block-scoped, must be initialized at declaration, hoisted but not initialized. its value cannot be reassigned.

const and let variables are hoisted, but they are not accessible before their declaration due to the temporal dead zone (TDZ).

// var example
if (true) {
  var x = 10;
}
console.log(x); // 10

// let example
if (true) {
  let y = 20;
  console.log(y); // 20
}
// console.log(y); // ReferenceError: y is not defined

// const example
const z = 30;
// z = 40; // TypeError: Assignment to constant variable

Q2: What is Event Delegation in JavaScript?

Ans: Event Delegation is a technique in JavaScript where you add a single event listener to a parent element instead of adding multiple event listeners to child elements. The event listener on the parent element listens for events on its children using event bubbling.
Here is my separate blog on event delegation

// Add one event listener to the parent element
const parent = document.querySelector(".parent");

parent.addEventListener("click", (event) => {
  if (event.target.classList.contains("child-button")) {
    console.log(`Button ${event.target.textContent} clicked!`);
  }
});

//HTML
<div class="parent">
  <button class="child-button">Button 1</button>
  <button class="child-button">Button 2</button>
  <button class="child-button">Button 3</button>
</div>

Q3: What is the this keyword in JavaScript?

Ans: The value of this depends on the context:

• In global scope, it refers to the global object (e.g., window in browsers).
• Inside a function, it depends on how the function is called (e.g., in strict mode, it’s undefined by default).
• Inside an object method, it refers to the object.
• Inside an arrow function, it inherits this from the parent context.

const obj = {
  name: 'JavaScript',
  regularFunc() {
    console.log(this.name); // 'JavaScript'
  },
  arrowFunc: () => {
    console.log(this.name); // undefined (inherits from global scope)
  },
};

obj.regularFunc();
obj.arrowFunc();

Q4: How do you flatten a deeply nested array in JavaScript?

Ans: You can use recursion or the Array.prototype.flat() method with an appropriate depth.

// Recursive function to flatten an array
function flattenArray(arr) {
  return arr.reduce((acc, val) => 
    Array.isArray(val) ? acc.concat(flattenArray(val)) : acc.concat(val), []);
}

const nestedArray = [1, [2, [3, [4, 5]]]];
console.log(flattenArray(nestedArray)); // [1, 2, 3, 4, 5]

// Using flat()
console.log(nestedArray.flat(Infinity)); // [1, 2, 3, 4, 5]

Q5: What is the difference between == and === in JavaScript?

Ans:

• == compares values after performing type coercion.
• === compares values and types without type coercion.

console.log(5 == '5');  // true (type coercion occurs)
console.log(5 === '5'); // false (no type coercion, types are different)

console.log(null == undefined);  // true (both are loosely equal)
console.log(null === undefined); // false (different types)

5 Javascript coding interview questions - Part 5