Application Development - 2 · Quiz 2 · Sep 2024

**1. Understand the default argument:** num=count++ is evaluated only when the argument is omitted. Post-increment returns the old count as num, then increases count before the function body executes. **2. Trace each call:** Initially count=0. The first increment() sets num=0, raises count to 1, and then adds 0, leaving 1. increment(2) skips the default expression and adds 2, leaving 3. **3. Trace the last omitted argument:** The final increment() sets num=3 and increments count to 4. Its body adds num=3, leaving count=7, which is logged. **Answer: C — 7.** A: **Incorrect:** It stops after the explicit increment(2), ignoring the last call. B: **Incorrect:** It includes the last post-increment but omits adding the captured value 3. C: **Correct:** The three calls leave count equal to 1, then 3, then 7. D: **Incorrect:** It treats the post-increment value as the already incremented value. E: **Incorrect:** It omits one of the side effects in the default-argument evaluations.

**1. Read the initial reactive state:** data() returns message="Hello". The paragraph interpolates this property, so it initially displays Hello. **2. Follow the click handler:** A single click invokes updateMessage. Since this.message === "Hello" is true, the conditional expression chooses "World" and assigns it to message. **3. Apply the reactive update:** Vue updates the paragraph from the new property value, so it displays World after the update. A subsequent click would toggle it back to Hello. **Answer: D — World.** A: **Incorrect:** The data property contains a string and is not cleared by the handler. B: **Incorrect:** The method exists and its conditional assignment is valid. C: **Incorrect:** message is initialized and remains defined. D: **Correct:** The first click changes Hello to World. E: **Incorrect:** Hello is the initial value and would reappear after a second click.

**1. Resume after the first await:** Promise.resolve("Start") fulfills, so result1 becomes Start and the first console.log prints it. **2. Await the rejecting promise:** The timer rejects with the string Error after approximately 100 ms. Await turns that rejection into a throw, so the result2 log is skipped and control enters catch, which prints Caught: Error. **3. Fulfill the outer async call:** After catch, execution continues to return "End". The async function’s returned promise fulfills with End, so the attached then callback logs End last. **Answer: A — Start, Caught: Error, End.** A: **Correct:** It follows successful first await, caught second rejection, then the final fulfilled return. B: **Incorrect:** End cannot be logged before the catch finishes and the async function returns. C: **Incorrect:** The first await succeeds and logs Start before the delayed rejection. D: **Incorrect:** The rejection is logged through the catch prefix rather than as an uncaught bare Error.

**1. Execute beforeCreate before data setup:** Vue 2 has not yet installed the reactive data properties. Reading this.message therefore yields undefined, and the first log is "Before Create: undefined". **2. Continue initialization:** The early assignment this.message="Before Create" is not the initialized reactive data value. data() subsequently supplies message="Hello" and Vue proxies it onto the instance. **3. Execute mounted in statement order:** mounted first assigns this.message="Mounted" and then logs it. Therefore the second log is "Mounted: Mounted". The assignment happens before the log even though DOM rendering may be queued. **Answer: D — `Before Create: undefined` and `Mounted: Mounted`.** A: **Incorrect:** The first log precedes its assignment, and the mounted log follows a different assignment. B: **Incorrect:** The first log is correct, but mounted changes the value before logging it. C: **Incorrect:** Hello is not yet installed when beforeCreate reads message. D: **Correct:** It accounts for both the uninitialized beforeCreate value and the assignment preceding the mounted log.

**1. Build the summary strings:** map preserves movie order and forms the strings for Inception (8.8), Interstellar (8.6) and Dunkirk (7.9). **2. Calculate each timer delay:** The formula 1000−index×200 gives 1000 ms, 800 ms and 600 ms respectively. The timers are registered in array order, but their different expiration times determine the later callback order. **3. Read the logs by increasing delay:** Dunkirk logs first, followed by Interstellar, then Inception. The displayed lines are "Dunkirk has a rating of 7.9", "Interstellar has a rating of 8.6", and "Inception has a rating of 8.8". **Answer: C — Dunkirk 7.9, then Interstellar 8.6, then Inception 8.8.** A: **Incorrect:** It preserves array order instead of accounting for the shorter later timers. B: **Incorrect:** It incorrectly puts the 1000 ms Inception callback first. C: **Correct:** It follows the timers in the order 600, 800 and 1000 ms. D: **Incorrect:** Interstellar does not precede the shorter 600 ms Dunkirk timer.

**1. Bind the ordinary method call:** obj.fn() is a method call, so this inside fn refers to obj. Its local variable a=30 does not change obj.a, which is 20. **2. Capture this in the returned arrow:** Arrow functions do not obtain a new this from their own invocation. The returned arrow retains the enclosing fn call’s this, namely obj. **3. Evaluate the returned expression:** The arrow’s local a=40 and outer lexical a=10 are not used because the expression is this.a, not a. It reads obj.a and returns 20. **Answer: B — 20.** A: **Incorrect:** The outer lexical variable a is not the property this.a. B: **Correct:** The arrow captures obj as this and reads obj.a=20. C: **Incorrect:** 30 is a local variable in fn, not a property on obj. D: **Incorrect:** 40 is a local variable in the arrow, not the requested property.

**1. Finish synchronous execution:** The first log prints Start. Registering a promise callback and a zero-delay timer does not execute either callback immediately, so the last synchronous log prints End next. **2. Drain promise microtasks:** Once the current script finishes, the fulfilled promise’s then callback runs as a microtask and prints Promise. **3. Run the timer task:** The timer callback runs in a later task and prints Timeout. A zero delay means eligible later, not before the current stack or pending promise microtasks. **Answer: C — Start, End, Promise, Timeout.** A: **Incorrect:** The timer cannot interrupt the synchronous script or precede its End log. B: **Incorrect:** The promise callback runs after the synchronous End log. C: **Correct:** It orders synchronous logs first, then the microtask, then the timer task. D: **Incorrect:** It moves both asynchronous callbacks ahead of the final synchronous log.

**1. Identify the state-changing mechanism:** A Vuex mutation is a named synchronous handler that receives state and changes it. Components or actions request that change with store.commit. **2. Separate the other store operations:** Actions can coordinate asynchronous work, getters derive values, and component computed properties can expose those values. Those are distinct from a mutation’s direct state update. **Answer: B — To directly mutate the state.** A: **Incorrect:** Asynchronous operations belong in actions; mutation handlers must be synchronous. B: **Correct:** Mutations are the standard Vuex mechanism for directly changing state. C: **Incorrect:** Reading or deriving store values is the role of state access and getters. D: **Incorrect:** Computed properties are a component mechanism, not the purpose of mutations.

**1. Distinguish any from race:** Promise.any fulfills with the first fulfilled input. A rejected input does not reject the combined promise while another input can still fulfill; all inputs must reject for an AggregateError. **2. Trace the settling times:** p2 rejects with B at about 50 ms, so Promise.any keeps waiting. p1 fulfills with A at about 100 ms, before p3 fulfills with C at about 150 ms. **3. Settle the aggregate once:** The first fulfillment resolves Promise.any with A, so then logs A. The later C fulfillment cannot change that result, and catch does not run. **Answer: A — A.** A: **Correct:** A is the first successful fulfillment, at approximately 100 ms. B: **Incorrect:** B is an early rejection, which Promise.any skips while waiting for success. C: **Incorrect:** C fulfills after A has already resolved the aggregate. D: **Incorrect:** Not all promises reject, so the aggregate catch is not reached.

**1. Match the parent route:** In the hash URL /video/5/comments/newest, the parent pattern /video/:id matches with id="5" and renders VideoDetail in the root router outlet. **2. Match the nested route:** The remaining comments/newest path matches the child route for NewestComments. It renders inside the router outlet declared by VideoDetail, below its Video Details text. **3. Retain the root layout:** TopBar and NavBar are outside the root router outlet, so route navigation does not remove them. The visible result is Topbar, Navbar, Video Details and Newest Comments in that hierarchy. **Answer: A — TopBar and NavBar remain; NewestComments renders inside VideoDetail.** **Convention note:** The option’s TopNavbar wording is read as the supplied TopBar component; no separate component named TopNavbar is defined. A: **Correct:** The fixed root layout remains, and the matching newest-comments child renders inside VideoDetail. B: **Incorrect:** Home matches only the root path /, not this video URL. C: **Incorrect:** TopComments requires the child path comments/top. D: **Incorrect:** Both the parent video route and the newest-comments child route match.

**1. Resolve the prop:** The parent does not pass playerName or player-name to player-card. The component therefore uses its default heading, "Unknown Player"; mentioning Rahul in slot text does not assign the prop. **2. Fill the default slot:** The paragraph "Rahul is a versatile player, skilled in defense and attack." is supplied as default-slot content. It replaces the fallback paragraph "This player is an important part of the team.". **3. Fill the named slot:** The template marked v-slot:extra supplies "Position: Captain" and "Years on the team: 5" to the extra slot. The final order is Unknown Player, the Rahul description, Position: Captain, then Years on the team: 5. **Answer: C — Unknown Player, Rahul description, Position: Captain, Years on the team: 5.** A: **Incorrect:** It incorrectly uses Rahul as the heading even though no playerName prop is passed. B: **Incorrect:** It incorrectly uses both the Rahul heading and the default-slot fallback despite supplied slot content. C: **Correct:** It uses the default prop and renders both supplied default and named slot content. D: **Incorrect:** It omits the supplied default-slot paragraph and incorrectly changes the heading to Rahul.

**1. Describe what a watcher observes:** A watcher registers a callback for a reactive source and runs that callback when the observed value changes. It can react to a property without changing how the property itself is declared. **2. Choose appropriate work:** Watchers are useful for side effects such as starting a request, persisting a setting or coordinating another operation after a change. Cached derived values are normally expressed as computed properties instead. **Answer: A, C — To watch a reactive property and perform actions when it changes.; To perform side effects when a specific data property changes..** A: **Correct:** A watcher invokes an action or callback in response to an observed change. B: **Incorrect:** Dependency-based caching is the defining role of computed properties. C: **Correct:** Side effects in response to data changes are a standard watcher use. D: **Incorrect:** Reactive data is declared through the state/reactivity APIs; watching it does not create that state.

**1. Recognize component encapsulation:** Components package reusable UI structure, behavior and local state. Each component instance participates in lifecycle hooks such as created and mounted, even though parent–child mounting determines their timing. **2. Follow one-way props:** Props carry data from parent to child. A child normally informs its parent through emitted events or a shared state mechanism, rather than reversing the prop direction. **3. Isolate instance data:** In a reusable Vue 2 component, data is a function that returns a fresh object. Reusing a single object would let separate instances unintentionally share mutable local state. **Answer: A, C, D — Components can be reused throughout the application to create modular and ; Components can have their own lifecycle hooks independent of the parent ; Data in components must be a function that returns an object to ensure each .** **Convention note:** The data-function requirement refers to reusable Vue 2 component definitions. A root Vue instance may use a data object; lifecycle independence means separate hooks, not unrelated scheduling. A: **Correct:** Reusing encapsulated components improves modularity and maintainability. B: **Incorrect:** Props normally flow from parent to child, not child to parent. C: **Correct:** A component can declare its own hooks; their timing still interacts with the component tree. D: **Correct:** A fresh returned data object prevents accidental state sharing between component instances.

**1. Follow a theme change:** setDarkMode and setLightMode update the component’s theme and write the same string to localStorage under the theme key. **2. Recreate the component after refresh:** data() reads localStorage.getItem("theme") and uses light only if no stored truthy value exists. A stored dark setting is therefore restored across reloads. **3. Distinguish shared storage from live component state:** Same-origin tabs share localStorage, so a newly opened tab initializes from the stored theme. However, this code has no storage-event listener; an already mounted component in another tab does not automatically update its own theme property when storage changes. **Answer: A, D — The theme will persist across page reloads because it is stored in localStorage.; The theme will be shared across all open tabs, as localStorage is accessible .** **Convention note:** D is correct for the shared persisted localStorage value. It should not be read as a guarantee that every already-open tab’s reactive UI updates immediately; a storage-event handler or another synchronization mechanism is needed for that. A: **Correct:** The initialization explicitly reloads the stored theme after a refresh. B: **Incorrect:** A new same-origin tab reads the saved value rather than unconditionally resetting to light. C: **Incorrect:** The light fallback is used only when no stored truthy theme exists. D: **Correct:** The localStorage theme value is shared across same-origin tabs; automatic live synchronization of existing component data is not implemented.