Application Development - 2 · Quiz 1 · Sep 2024

**1. Evaluate each class contribution:** The array-style class binding always contains the literal class box. The object entry adds active only when isActive is truthy. **2. Use the initial state:** isActive=false, so active is not included. Vue does not invent an inactive class; the final class attribute is just box. **Answer: A — box.** A: **Correct:** The unconditional class remains and the conditional class is absent. B: **Incorrect:** This drops the unconditional box and adds a class whose condition is false. C: **Incorrect:** active is added only for a truthy isActive. D: **Incorrect:** No inactive class is specified anywhere in the binding.

**1. Identify temporary UI state:** Ephemeral state is short-lived interaction state whose current value is normally only needed by the active view, such as an unsaved input draft while typing. **2. Compare persistence:** The other options explicitly retain authentication, favorites or a cart beyond the immediate interaction. The changing form input is the intended ephemeral example. **Answer: B — A form input value that changes as the user types.** **Convention note:** A product may choose to persist a form draft, but no such persistence is specified for B. A: **Incorrect:** The token is explicitly persisted in localStorage rather than merely held as temporary view state. B: **Correct:** The current unsaved input value is short-lived interaction state. C: **Incorrect:** Favorites saved to a user profile are persisted application data. D: **Incorrect:** A cart saved between sessions is deliberately persistent.

**1. Attach ranks from the mapping:** ID 1 grape receives rank 4; ID 2 apple rank 3; ID 3 orange rank 2; ID 4 banana rank 1. The rating field does not determine this sort. **2. Sort and print:** a.rank-b.rank sorts ascending rank, giving banana,orange,apple,grape. The final map calls console.log once per item in that order. **Answer: C — Lines: banana; orange; apple; grape.** **Convention note:** The listing assigns mapping without a declaration, so it assumes classic non-strict script execution. Strict mode or an ES module would require declaring that variable, for example const mapping=..., to avoid ReferenceError. A: **Incorrect:** This does not follow ascending mapped ranks. B: **Incorrect:** Grape has rank 4 and belongs last, not second. C: **Correct:** Ranks 1,2,3,4 correspond exactly to banana,orange,apple,grape. D: **Incorrect:** Each item has a name and is logged; map’s unused return array does not replace those console outputs.

**1. Determine the enclosing receiver:** person.talk() is a method call with this=person. It creates and returns an arrow function inside that invocation. **2. Invoke the returned arrow:** The arrow inherits that lexical this even when called through talkReturn(). It therefore reads person.name, Jeremy, and returns “Jeremy says Hello!”, which console.log prints. **Answer: B — Jeremy says Hello!.** A: **Incorrect:** The arrow retains a valid person receiver rather than losing this. B: **Correct:** The lexical receiver is person, whose name is Jeremy. C: **Incorrect:** The outer name variable Taylor is not the value of person.name. D: **Incorrect:** The method and returned arrow are defined and invoked legally.

**1. Follow synchronous updates:** createCounter() creates one count variable shared by the returned function and every timeout callback it creates. Three immediate calls increment that variable to 1,2,3 and schedule three callbacks. **2. Run the timers:** By the time any callback runs, the synchronous calls have finished and count is 3. Each callback reads the same current variable, so the output is three lines containing 3. **Answer: D — Lines: 3; 3; 3.** **Convention note:** setTimeout(...,1000) specifies a minimum scheduling delay, not a guarantee of execution at an exact real-time instant. The question refers to the callbacks when they run after approximately one second. A: **Incorrect:** Three callbacks are scheduled, not one, and the current value is 3. B: **Incorrect:** The callbacks do not capture separate snapshots of count=1. C: **Incorrect:** The callbacks read the shared variable later rather than freezing values 1,2,3. D: **Correct:** All three delayed callbacks read count after it reaches 3.

**1. Detach the ordinary method:** c=obj.b copies the function without its receiver. In a classic non-strict script, c() uses the global object as this; assuming no global a property, this.a is undefined. **2. Bind the second function:** obj.b.bind(obj) returns a function with obj as its normal-call receiver. d() reads obj.a=10. The two printed values are undefined and 10. **Answer: B — undefined 10.** **Convention note:** If this code executes in strict mode or an ES module, the detached call has this=undefined and throws TypeError before console.log completes. The keyed answer assumes classic non-strict script behavior and no pre-existing global a. A: **Incorrect:** The detached call is not automatically bound to obj. B: **Correct:** The detached call has no a value on its assumed global receiver, while the bound call reads 10. C: **Incorrect:** bind(obj) preserves access to obj.a, so d() is not undefined. D: **Incorrect:** The bound call returns 10. E: **Incorrect:** Under the intended non-strict script assumptions, the detached global-property read is undefined rather than an exception.

**1. Apply the method:** Clicking Update calls update(), which assigns message="Updated". This changes the reactive dependency read by computedMessage. **2. Re-evaluate the computed result:** The cached computed value is invalidated and yields this.message+" - Computed" when the view next renders. The paragraph displays “Updated - Computed”. **Answer: B — "Updated - Computed".** A: **Incorrect:** The dependency has changed, so the old computed value is invalidated. B: **Correct:** The new message is combined with the unchanged suffix. C: **Incorrect:** The method assigns a new message; it does not append Updated to the previous computed string. D: **Incorrect:** The template displays computedMessage, whose result includes the suffix.

**1. Check the initial type:** amount is the empty string "", and price is numeric 40. The first += converts the numeric value for string concatenation, producing "40". **2. Repeat the operation:** The second click appends another "40", producing "4040". This is a string display, not the numeric sum 80. **Answer: C — 4040.** A: **Incorrect:** 40 is the display after one click, not two. B: **Incorrect:** 80 would require amount to begin as numeric 0 rather than an empty string. C: **Correct:** Two string concatenations produce 4040. D: **Incorrect:** amount is initialized and remains a defined string.

**1. Pass the order down:** The child’s order prop receives the parent customerOrder="Burger". Clicking its button emits order-updated with payload this.order+" - Extra mayo", namely “Burger - Extra mayo”. **2. Handle the event in the parent:** The parent listener calls updateOrder(newOrder), which assigns only updatedOrder. customerOrder stays Burger. The paragraphs display “Original Order: Burger” and “Updated Order: Burger - Extra mayo”. **Answer: D — Original Order: Burger; Updated Order: Burger - Extra mayo.** A: **Incorrect:** The emitted event updates the parent updatedOrder, so it does not remain blank. B: **Incorrect:** customerOrder is not cleared, and the event supplies a nonempty updated order. C: **Incorrect:** The payload includes the original Burger value before the suffix. D: **Correct:** The original remains Burger while the emitted payload fills updatedOrder.

**1. Build modifiedNumbers:** All three inputs 10,20,30 are even, so reduce pushes their doubles into its accumulator: [20,40,60]. The odd-number branch is never used. **2. Apply the strict threshold:** filter keeps values strictly greater than 20, removing 20 and leaving [40,60]. **Answer: D — [40, 60].** A: **Incorrect:** Both 40 and 60 pass the final condition, so the result is not empty. B: **Incorrect:** The reduce step doubles each input rather than leaving it unchanged. C: **Incorrect:** This is the intermediate accumulator before the final filter removes 20. D: **Correct:** Only 40 and 60 satisfy the final >20 test. E: **Incorrect:** 60 also passes and cannot be omitted.

**1. Select the computed branch:** filterActive=true makes filteredItems return items.filter(item=>item.id!==2). Only the entry with ID 2 is removed. **2. Render the resulting array:** v-for iterates over the remaining objects with IDs 1 and 3, so the list displays Item 1 and Item 3. **Answer: A — Item 1, Item 3.** A: **Correct:** These are exactly the entries whose IDs differ from 2. B: **Incorrect:** The predicate removes ID 2 rather than selecting it. C: **Incorrect:** The true branch filters the list; it does not return all items. D: **Incorrect:** Two entries pass the predicate.

**1. Distinguish invocation and lexical binding:** A standalone ordinary function call uses the global object as this in non-strict code and undefined in strict code. An arrow instead captures this from its enclosing execution context. **2. Examine methods and explicit binding:** An ordinary object method’s this depends on how it is called; extracting it can lose the receiver. call/apply select a receiver for an invocation, and bind creates a receiver-bound function, so A,B,D are the intended true statements. **Answer: A, B, D — In a regular function call, “this” refers to the global object in non-strict mode ; In an arrow function, “this” is lexically inherited from the enclosing execution ; The value of “this” can be explicitly set using “call()”, apply(), or “bind()” .** **Convention note:** Explicit receiver rebinding does not override an arrow’s lexical this or an already bound function’s bound receiver. The question’s explicit-binding statement concerns ordinary methods. A: **Correct:** This is the ordinary standalone-call rule, with the function’s strictness determining the result. B: **Correct:** Arrows inherit this lexically and do not acquire a new receiver from a method-style call. C: **Incorrect:** A method is not automatically permanently bound to its original object. D: **Correct:** For ordinary unbound methods, call/apply/bind can specify the invocation receiver.

**1. Compare scope and initialization:** var is scoped to its function (or global script scope), can be reassigned, and is initialized to undefined during declaration setup. let and const create block-scoped bindings but remain uninitialized in the temporal dead zone until their declaration is evaluated. **2. Compare assignment rules:** let permits reassignment. An ordinary const declaration requires an initializer and forbids rebinding, while neither let nor const permits redeclaration in the same lexical scope. Thus A,B,C are correct with the stated meaning of hoisting. **Answer: A, B, C — “var” is function-scoped, hoisted, and allows reassignments.; “let” is block-scoped, hoisted, and allows reassignments.; “const” is block-scoped, hoisted, does not allow reassignments, and its value .** **Convention note:** “Hoisted” for let/const does not mean readable before declaration. const prevents rebinding, not mutation of an object it references. The initializer wording concerns ordinary declarations; for-of/for-in loop bindings are initialized by the loop mechanism. A: **Correct:** var has function/global scope, early undefined initialization and permits reassignment. B: **Correct:** let is block-scoped and reassignable; its binding exists before initialization but cannot be accessed during the temporal dead zone. C: **Correct:** A normal const declaration requires initialization and disallows later reassignment of the binding. D: **Incorrect:** let also cannot be redeclared in the same block; the stated distinction is false.

**1. Separate invocation from function creation:** call() invokes immediately with individually listed arguments; apply() invokes immediately with arguments supplied in an array or array-like object. bind() returns a new function without invoking the target. **2. Distinguish temporary and bound receivers:** For an ordinary unbound function, call/apply select this for that call only. The function returned by bind retains its selected receiver for normal calls, and must subsequently be invoked to execute the target. **Answer: A, B, C — call() and apply() immediately invoke the function, while bind() returns a new ; call() accepts arguments as a comma-separated list, whereas apply() accepts a ; bind() permanently sets the “this” context for a function, but the resulting .** **Convention note:** “Permanently” in C describes normal calls to the returned bound function, not mutation of the original. Constructor invocation with new is a special case, and arrows retain lexical this regardless of a requested binding. A: **Correct:** call and apply execute now, whereas bind creates a callable for later use. B: **Correct:** call lists arguments individually; apply accepts the argument collection as its second parameter. C: **Correct:** For ordinary normal calls, the bound receiver is retained, and creating the bound function does not itself run the target. D: **Incorrect:** call/apply do not permanently modify the original function’s this behavior.

**1. Identify current-view interaction state:** The current scroll position and whether a dropdown is open are normally temporary UI values used while interacting with the current page. **2. Separate explicit persistence:** The authentication token is explicitly saved in localStorage, which survives the immediate interaction. It is not the intended ephemeral example, so “All of these” is false. **Answer: A, C — The user's current scroll position on a webpage.; The temporary state of a dropdown menu..** **Convention note:** Applications can choose to persist scroll position or menu state, but no such persistence is specified in these options. A: **Correct:** The current scroll position is a typical temporary interaction state. B: **Incorrect:** The option explicitly stores the token persistently in localStorage. C: **Correct:** A dropdown’s temporary open/closed state is ephemeral UI state. D: **Incorrect:** B is not ephemeral under the option’s explicit persistence description.

**1. Compare evaluation behavior:** A computed property caches its result using reactive dependencies; repeated reads can reuse that value until a dependency changes. A method executes its body each time it is invoked. **2. Choose the appropriate tool:** Methods suit parameterized or uncached operations. A conventional computed getter does not accept call-site parameters, and a method does not independently rerun merely because some value it once read changes. **Answer: A, B — Computed properties are cached based on their reactive dependencies, ; Methods can be used to perform operations that do not need to be cached..** **Convention note:** A method used by a template is invoked again when that template re-renders, which is different from the method itself being an automatically rerunning computed effect. A computed getter can return a function, but that is not ordinary parameterized computed-result caching. A: **Correct:** Reactive dependency-based caching distinguishes computed properties from ordinary method calls. B: **Correct:** A method is appropriate when its operation should execute on demand without computed caching. C: **Incorrect:** A normal computed property is read as a property rather than called with parameters; use a method for a parameterized calculation. D: **Incorrect:** A method must be invoked; dependency changes do not automatically schedule it as a standalone reactive effect.