Challenging JavaScript and Modern Frameworks Quiz Quiz

Test your expertise on advanced JavaScript concepts and foundational knowledge of modern frameworks including React, Vue, and Angular. Expect scenario-based and concept-driven questions for deep understanding.

1. Closures and Scope Control

   In JavaScript, what is the output of the following code snippet: let funcs = []; for (var i = 0; i u003C 3; i++) { funcs[i] = function() { return i; }; } console.log(funcs[0]());

   1. 0
   2. ReferenceError
   3. null
   4. 3
   5. undefined

2. React State Management

   In React, which statement best describes the consequence of directly mutating a component's state without using setState?

   1. It throws a runtime error immediately.
   2. ComponentWillMount is automatically called.
   3. The UI will not reflect the updated state value.
   4. It improves performance by skipping re-render.
   5. It triggers the error boundary to run.

3. Vue Reactivity System

   Considering Vue 3’s composition API, which method is primarily used to make a plain object reactive so that changes to its properties trigger updates?

   1. updateReactive
   2. effect
   3. reactive
   4. refactor
   5. respond

4. Arrow Functions and this

   Which of the following is true about the behavior of 'this' inside an arrow function in JavaScript?

   1. Arrow functions use the enclosing lexical context's 'this'.
   2. 'this' cannot be used inside arrow functions.
   3. 'this' in arrow functions is dynamically scoped.
   4. Arrow functions have their own 'this' based on call-site.
   5. 'this' always refers to the global object in arrow functions.

5. Angular Dependency Injection

   Which of the following is a key advantage of using dependency injection in Angular’s architecture?

   1. Improved testability and modularity
   2. Global variable isolation
   3. Reduced code readability
   4. SVG rendering enhancement
   5. Mandatory global state management

6. Async Patterns and Promises

   What will be logged by the following code: Promise.resolve(42).then(x =u003E { throw x }).catch(y =u003E y + 1).then(z =u003E console.log(z));

   1. 43
   2. 42
   3. Promise
   4. TypeError
   5. undefined

7. React Key Prop Importance

   Why is it critical to provide a 'key' prop when rendering a list of React elements using the map function?

   1. To increase render speed by skipping the virtual DOM
   2. To help React identify which items have changed, added, or removed
   3. Because omitting it throws a syntax error
   4. To enable the useEffect hook in child components
   5. To prevent styles from reloading on every render

8. Vue Template Binding Syntax

   In Vue, which template syntax is used to bind an element’s attribute dynamically to a JavaScript expression?

   1. bind-val
   2. :bind
   3. @bind
   4. v-attribute
   5. v-bind

9. JavaScript Event Loop

   If both a 'setTimeout' with a 0ms delay and a 'Promise.then' are called in a JavaScript execution context, which will execute first and why?

   1. It is unpredictable due to the single-thread event loop
   2. setTimeout executes first because it is asynchronous
   3. setTimeout always executes before Promises by specification
   4. Promise.then executes first because microtasks have higher priority than macrotasks
   5. They execute simultaneously because delay is zero

10. Angular Change Detection

    What mechanism does Angular predominantly use to check and update the DOM when application state changes?

    1. MutationObserver
    2. WebSockets polling
    3. VirtualDOM diff
    4. RequestAnimationFrame
    5. Zone-based change detection

11. Object Destructuring with Default Values

    Given const {x = 3, y} = {y: 10}; what are the values of x and y after destructuring?

    1. x is undefined, y is 3
    2. x is 3, y is 10
    3. x is 10, y is undefined
    4. x is 10, y is 3
    5. x is 3, y is undefined

12. React useEffect Dependencies

    What is the result if you call React's useEffect hook without providing a second argument (dependencies array)?

    1. The effect causes a render loop.
    2. The effect runs only once after the initial render.
    3. It throws a syntax error.
    4. The effect never runs.
    5. The effect runs after every completed render.

13. Vue Computed Properties vs Methods

    Which is a distinguishing characteristic of Vue’s computed properties compared to methods for accessing derived data?

    1. Methods provide automatic dependency tracking.
    2. Methods can only be used for event handling.
    3. Computed properties are always asynchronous.
    4. Computed properties cannot access component data.
    5. Computed properties are cached based on their dependencies.

14. TypeScript's Type System in Frameworks

    What TypeScript feature most commonly enhances code reliability in large modern JavaScript frameworks?

    1. Synchronous event loops
    2. Static type checking
    3. Dynamic prototype chaining
    4. Global variable hoisting
    5. Implicit coercion overrides

15. Angular Decorators

    Which decorator in Angular is used to mark a class as a component and supply its metadata such as templates and styles?

    1. @View
    2. @Module
    3. @Component
    4. @Service
    5. @Directive

16. JavaScript Symbol Uniqueness

    Which statement correctly describes two JavaScript symbols created with Symbol('id') and Symbol('id')?

    1. They are the same if created within the same closure.
    2. They are numbers under the hood.
    3. They are equal if the same string was passed.
    4. They are coerced to boolean true when compared.
    5. They are always unique and do not equal each other.