Application Development - 2 · Quiz 1 · May 2026

**1. Separate language engine from runtime APIs:** In a browser page, setTimeout is a host-provided function and document is the DOM Document object, so the two typeof results are “function” and “object.” **2. Identify the provider:** V8 executes JavaScript; the browser supplies the DOM. Another runtime can use the same engine while exposing a different set of APIs. **Answer: A, D — A and D.** A: **Correct:** typeof setTimeout is “function” in the stated browser environment. B: **Incorrect:** document exists in a browser page, so its typeof is “object,” not “undefined.” C: **Incorrect:** The browser supplies the DOM; V8 alone does not provide document. D: **Correct:** Runtime APIs can differ even when the underlying engine is the same.

**1. Use components as UI units:** Encapsulating rendering and behavior in components permits reuse, limits the scope of changes and makes a large interface easier to organize. **2. Separate frontend and database concerns:** These benefits do not automatically optimize SQL queries, which is a backend/database concern. **Answer: A, B, D — A, B and D.** A: **Correct:** A component can be reused in multiple interface locations. B: **Correct:** Encapsulation helps isolate changes and maintenance. C: **Incorrect:** A frontend component framework does not automatically optimize database queries. D: **Correct:** Breaking the interface into coherent components simplifies UI management.

**1. Identify a callback:** A function is used as a callback when it is supplied to another operation that invokes it, either immediately or later. **2. Inspect the calls:** forEach invokes the supplied arrow for each item; setTimeout later invokes showMessage; addEventListener invokes handleClick on a click. The direct showMessage() call instead executes the function immediately and stores its result. **Answer: A, B, D — A, B and D.** A: **Correct:** The arrow is passed to forEach as its per-item callback. B: **Correct:** The function reference is passed to the timer for later execution. C: **Incorrect:** This invokes showMessage directly rather than passing it as a callback. D: **Correct:** The listener function is passed for execution when a click occurs.

**1. Run synchronous statements first:** console.log("1") runs, the outer timer is scheduled, then console.log("4") runs. **2. Run timers afterward:** The first timer prints 2 and schedules the nested timer. That nested callback later prints 3. The output order is 1,4,2,3. **Answer: B — 1 4 2 3.** A: **Incorrect:** The timers cannot interrupt the currently executing script before 4. B: **Correct:** It places synchronous output first and the nested timers in their causal order. C: **Incorrect:** The first synchronous log must precede the timer callback. D: **Incorrect:** The first statement prints 1 before 4.

**1. Update a mounted child:** If the parent’s prop change is allowed to flush while the child is still displayed, the child can run beforeUpdate followed by updated. **2. Remove it through v-if:** Once show becomes false, Vue destroys that child, calling beforeDestroy and then destroyed. Thus the listed sequence can occur. **Answer: A — beforeUpdate → updated → beforeDestroy → destroyed.** **Convention note:** Vue batches synchronous updates. If both parent changes occur in the same tick, destruction may occur without an intervening completed child update. A is a possible sequence, not a guaranteed sequence for all timing arrangements. A: **Correct:** An update cycle can finish before the subsequent v-if removal destroys the child. B: **Incorrect:** A destroyed child does not subsequently update as the same instance. C: **Incorrect:** The child has already been created and mounted; these are not rerun for a simple update. D: **Incorrect:** It reverses lifecycle stages and mixes creation with teardown.

**1. Apply block scoping:** Inside the first block, the inner let var1=40 shadows the outer 20, so 40+10 prints 50. Outside it, var1 is still 20, so 20+10 prints 30. **2. Apply var scoping:** The second block’s var var2=50 refers to the same outer/function-scoped binding as the original var2. Both following sums are therefore 50+10=60. **Answer: C — 50, 30, 60, 60.** A: **Incorrect:** The outer let value remains 20, and var2 remains 50 after its block. B: **Incorrect:** It incorrectly lets the inner let assignment change the outer var1. C: **Correct:** It gives the correct four sums: 50,30,60,60. D: **Incorrect:** var2 is not block-local, so the final result is 60 rather than 40.

**1. Apply the first receiver:** func1.apply(obj1) sets this to obj1, so method1 reads prop2="Spain" and prop1="Germany". **2. Bind and invoke the second receiver:** func2.bind(obj2)(15) uses obj2.prop3="25". Multiplication converts this string to 25, giving 15+2×25=65. **3. Read both messages:** The output names Spain and Germany, followed by numerical value 65. **Answer: C — Spain and Germany; final numerical value 65.** A: **Incorrect:** The country names are correct, but 115 would use obj1’s prop3 rather than the bound obj2 value. B: **Incorrect:** The bound receiver applies only to the second function, not the first apply call. C: **Correct:** Both the first receiver and the second calculation are correct. D: **Incorrect:** It uses the wrong receiver for each calculation.

**1. Merge by property name:** Spreading obj2 and then obj1 retains propA="Argon" and adds prop2="Gold"; these property names do not collide. **2. Destructure with aliases:** prop2:element1 assigns Gold to element1; propA:element2 assigns Argon to element2. The message therefore selects Gold and Argon. **Answer: A — The selected elements are: Gold and Argon.** A: **Correct:** It reads the two named properties in the requested alias order. B: **Incorrect:** Those are other properties, not prop2 and propA. C: **Incorrect:** Neon belongs to propB, which is not destructured. D: **Incorrect:** The second selected property is propA=Argon rather than propB=Neon. E: **Incorrect:** It reverses the two destructured aliases.

**1. Match each directive to its role:** v-for renders a list repeatedly; v-bind sets dynamic attributes or props; v-show changes CSS visibility; v-model connects form values and input updates. Only the iteration pairing matches. **Answer: B — v-for → Iteration over lists.** A: **Incorrect:** v-show controls display rather than fetching data. B: **Correct:** v-for iterates over list items to render repeated content. C: **Incorrect:** v-bind binds values; v-if handles conditional insertion/removal. D: **Incorrect:** v-model combines value binding and input-change handling, not events alone.

**1. Follow data downward:** :message="parentMsg" evaluates the parent’s value and passes it as the child’s message prop. Parent changes can refresh that prop. **2. Follow notifications upward:** this.$emit("reply","ok") emits a child event caught by the parent’s @reply handler. The parent should update its own source data rather than requiring the child to mutate a prop. **Answer: A, B, D — A, B and D.** A: **Correct:** The bound message prop carries the parent’s value into the child. B: **Correct:** reply is the emitted custom event handled by the parent listener. C: **Incorrect:** Direct prop mutation violates the one-way parent-owned data flow and can be overwritten. D: **Correct:** Reactive parent updates can deliver a new prop value to the child.

**1. Identify the incorrect receiver:** changeMessage is defined with an arrow. Arrows capture this lexically rather than accepting the Vue instance as their receiver. **2. Repair the method:** Define changeMessage() { this.message="Updated" } or use an ordinary function so Vue can bind this to the component. @click itself is valid. **Answer: B — B — the arrow function does not bind Vue’s instance as this.** A: **Incorrect:** @click is valid shorthand for v-on:click; changing that syntax does not repair this. B: **Correct:** Lexical this in the arrow prevents the intended instance-property assignment. C: **Incorrect:** Vue 2 permits an object for root-instance data; reusable components require a data factory. D: **Incorrect:** Methods are supported; their function definition and receiver are the issue.

**1. Locate each method:** static add belongs to the MathUtils constructor, while multiply is an instance method available through the instance prototype. **2. Invoke on the proper receivers:** MathUtils.add(5,3) returns 8, and utils.multiply(5,3) returns 15. The opposite receiver lookups do not find those methods. **Answer: A, C — A and C.** A: **Correct:** The constructor owns the static add method, which returns 8. B: **Incorrect:** The instance does not have the static add method; calling it there throws TypeError. C: **Correct:** The instance inherits multiply, which returns 15. D: **Incorrect:** multiply is not a static constructor method, so this call throws TypeError.

**1. Resolve the bare identifier:** func1 logs var1 without this, so lexical name lookup reaches the outer var var1=25 rather than obj.var1=45. **2. Resolve the arrow’s this:** func2 is an arrow defined in the global classic-script context. It captures window as this, and global var var2=35 is a window property. Thus it reads 35, not obj.var2=55. **Answer: B — You are accessing: 25; You are accessing: 35.** **Convention note:** This follows a fresh browser classic-script context. ES-module top-level this is undefined and would change the second call’s behavior. A: **Incorrect:** The first function does not use this.var1, and the arrow does not bind obj. B: **Correct:** It gives the global lexical var1 value 25 and global-this var2 value 35. C: **Incorrect:** It incorrectly gives the arrow obj as its receiver. D: **Incorrect:** It incorrectly reads obj.var1 for the unqualified var1 identifier.

**1. Apply declaration initialization:** var z is created as undefined before execution, so the first log prints undefined. Assigning a="alpha" and b="beta" before their logs prints alpha and beta. **2. Call the hoisted declaration:** d is a function declaration, available before its written position, so d() prints delta. **3. Stop at the temporal dead zone:** console.log(c) occurs before const c is initialized, throwing ReferenceError. Execution stops before assigning the function expression to z. **Answer: A — undefined, alpha, beta, delta, ReferenceError.** A: **Correct:** It follows all logs until the uninitialized const access throws. B: **Incorrect:** z is only undefined at its first log; its later function is not executed there. C: **Incorrect:** b is initialized before its log, so no earlier ReferenceError occurs. D: **Incorrect:** It treats z as already assigned and lets execution continue after an uncaught error.

**1. Map and filter:** slice(2) produces nuary,rch,ril,gust,ptember,tober. Keeping lengths below 5 leaves rch,ril,gust. **2. Sort and index:** Default lexicographic sort gives [gust,rch,ril]. Index 1 selects the second element, rch; it does not print the entire array. **Answer: D — rch.** A: **Incorrect:** This is the sorted array, but the program prints only its index-1 element. B: **Incorrect:** It neither sorts correctly nor extracts the single requested element. C: **Incorrect:** ril is at index 2 after sorting. D: **Correct:** rch is the element at zero-based index 1.

**1. Complete synchronous execution:** The script prints Program start; first() prints First start and First end around scheduling its timer; second() prints Second start while scheduling its timer; then Program end prints. **2. Drain the timer tasks later:** The two callbacks run after the script, in scheduling order, printing First timeout and Second timeout. **3. Combine the order:** Program start → First start → First end → Second start → Program end → First timeout → Second timeout. **Answer: D — Program start → First start → First end → Second start → Program end → First timeout → Second timeout.** A: **Incorrect:** The first timer cannot interrupt first() before First end. B: **Incorrect:** The first timer does not run between the synchronous first() and second() calls. C: **Incorrect:** A callback cannot print before the function even schedules it. D: **Correct:** It places all synchronous output before the two scheduled callbacks.