JavaScript Front End Mastery: Advanced Interview Quiz Quiz

1. Understanding Event Delegation

   In JavaScript, which statement best describes event delegation, particularly when handling many dynamic child elements within a list?

   1. Attaching a single event listener to a parent node to handle events from its current and future child elements.
   2. Adding an event listener to every child node explicitly once during initialization.
   3. Assigning event listeners to the window object to listen to all events globally.
   4. Using only inline HTML event handlers for every child dynamically.
   5. Calling preventDefault in every child node’s event handler.

2. The 'this' Keyword Complexity

   Inside a JavaScript function (not in strict mode) called as a plain function (not as a method or with bind/call/apply), what does 'this' refer to by default?

   1. The global object (e.g., window in browsers)
   2. The function’s prototype
   3. The child scope object
   4. The parent object of where the function is defined
   5. The undefined value

3. Prototypal Inheritance Explained

   Which statement correctly explains how prototypal inheritance works in JavaScript?

   1. Objects inherit properties by establishing an internal link to another object called its prototype.
   2. Every object copies all properties from its parent at creation time.
   3. Inheritance in JavaScript is only possible using classes introduced in ES6.
   4. Inheritance in JavaScript relies solely on the 'super' keyword.
   5. Only native objects participate in the prototype chain.

4. AMD vs CommonJS Distinctions

   Given a JavaScript module system scenario, which statement best describes the fundamental difference between AMD and CommonJS?

   1. AMD is optimized for loading modules asynchronously in browsers; CommonJS is designed for synchronous loading in server environments.
   2. AMD stands for All Module Definitions, while CommonJS does not involve modules.
   3. CommonJS is only used for CSS files, while AMD applies to JavaScript.
   4. Both require all dependencies to be loaded before any code executes.
   5. AMD cannot define dependencies explicitly.

5. Immediate Invoked Function Expressions (IIFEs)

   Why does 'function foo() { }();' not work as an IIFE in JavaScript, and what needs to be changed to make it a valid IIFE?

   1. It’s a function declaration, not an expression; for a valid IIFE, wrap the function in parentheses like (function(){})();
   2. It lacks the var keyword before foo; add 'var' to fix it.
   3. JavaScript does not support automatically invoked functions.
   4. The syntax is correct, no changes needed.
   5. Functions must be assigned to objects before calling them automatically.

6. Variable State Differences

   Given 'var a;', 'var b = null;', and an undeclared variable 'c', which JavaScript statement is true?

   1. 'a' is undefined, 'b' is null, 'c' causes a ReferenceError when accessed.
   2. 'a' is null, 'b' is undefined, 'c' is null.
   3. 'a' is undeclared, 'b' is undefined, 'c' is undefined.
   4. 'a' and 'b' are both undefined, 'c' causes a SyntaxError.
   5. 'a' is declared and initialized, 'b' is undeclared, 'c' is null.

7. Closures and Scope

   How does a closure in JavaScript maintain access to variables after the outer function has finished execution? Consider a scenario where an inner function references an outer variable.

   1. By storing a reference to the outer scope's variables in memory, even after the outer function returns.
   2. By copying all outer variables into the inner function at definition time.
   3. By rewriting the variable values in the global scope.
   4. Through hoisting all inner variable definitions to the outer function.
   5. Closures do not allow access to outer variables after function execution.

8. Anonymous Functions Usage

   In which scenario are anonymous functions particularly useful in JavaScript?

   1. As callbacks passed to higher-order functions like map, filter, or event handlers.
   2. For declaring named constructors only.
   3. When defining global constants.
   4. For use only with the 'for' loop statement.
   5. Anonymous functions are not allowed in JavaScript.

9. Host vs Native Objects

   Which distinction best characterizes host objects versus native objects in JavaScript?

   1. Host objects are provided by the environment (e.g., 'window' in browsers), while native objects are part of the ECMAScript standard (e.g., Array, String).
   2. Native objects depend on the host environment and can be redefined.
   3. Host objects are only available in Node.js, while native objects are only in browsers.
   4. There is no difference; all JavaScript objects are host objects.
   5. Host objects are defined in user code using the 'host' keyword.

10. Function Construction and Invocation

    Consider the following patterns: 'function Person() {}', 'var person = Person()', and 'var person = new Person()'. What is the correct explanation of these three statements?

    1. 'Person()' declares a function; 'person = Person()' invokes it directly (returns undefined); 'person = new Person()' creates a new instance with 'Person' as its constructor.
    2. 'Person()' is an object; 'person = Person()' creates a new prototype; 'person = new Person()' invokes Person without any context.
    3. All three statements declare new objects with the same prototype chain.
    4. 'Person()' creates a variable; 'person = Person()' declares the function; 'person = new Person()' assigns the prototype to person.
    5. None of the statements are valid in JavaScript syntax.