Application Development - 2 · Quiz 1 · Sep 2025

**1. Match each feature to its notation:** Double braces output a text expression; v-bind:title="msg" binds the title attribute; v-model="inputValue" binds an input’s value and input event to Vue data. These are the intended valid usages. **2. Check event shorthand:** A normal click listener is written v-on:click="doSomething" or @click="doSomething". Combining them as v-on:@click does not attach a normal click listener. **Answer: A, B, D — A, B and D — text interpolation, attribute binding and v-model.** **Convention note:** The question includes each snippet’s claimed purpose. Vue 2 can parse v-on:@click, but it creates an @click-named listener and does not perform the claimed ordinary click binding. Likewise, browsers/Vue ignore the unnecessary closing input tag; canonical HTML uses just the input start tag. A: **Correct:** Double braces are the standard text-interpolation syntax. B: **Correct:** v-bind:title evaluates msg and uses its value for the title attribute. C: **Incorrect:** This binds an event literally named @click, not the normal click event; use v-on:click or @click. D: **Correct:** v-model is valid for two-way input binding; input is a void HTML element, so its closing tag is redundant.

**1. Apply the comparator:** a.age-b.age orders employees by ascending numeric age. Priya is 24, Rahul 28 and Amit 32, giving that sequence. **2. Map and join:** map extracts their names without changing the sorted order. join(" - ") produces “Priya - Rahul - Amit”. **Answer: B — Priya - Rahul - Amit.** A: **Incorrect:** This is the original order, not ascending age. B: **Correct:** The ages increase as 24,28,32. C: **Incorrect:** This is descending age, opposite to the comparator. D: **Incorrect:** Amit is older than Rahul and must appear after him.

**1. Filter and transform:** age>=25 keeps Amit (25) and Chirag (30), excluding Bhavna (20). toUpperCase() transforms the surviving names to AMIT and CHIRAG. **2. Sort and serialize:** Default string sort places AMIT before CHIRAG. JSON.stringify logs ["AMIT","CHIRAG"]. **Answer: C — ['AMIT', 'CHIRAG'].** **Convention note:** The options use JavaScript-array-style single quotes for readability; the exact JSON.stringify output uses double quotes and no extra spaces. A: **Incorrect:** The filter is right, but the names should be uppercase. B: **Incorrect:** The names are uppercase but their sort order is reversed. C: **Correct:** Both filtering and uppercase alphabetical order match. D: **Incorrect:** Bhavna fails the age test and cannot appear.

**1. Resolve lexical scope:** click closes over the subject declared inside camera(), not the outer subject="Dog". The inner variable is initially Deer. **2. Follow the later assignment:** Before returning click, camera changes that same captured variable to Cat. Calling cameraPicture() later reads its current value and logs “clicked picture of Cat”. **Answer: C — clicked picture of Cat.** A: **Incorrect:** The inner subject shadows the outer Dog variable. B: **Incorrect:** The captured variable is updated from Deer to Cat before the callback runs. C: **Correct:** The closure reads the updated inner variable. D: **Incorrect:** The captured variable exists and holds Cat.

**1. Match binding and events:** v-bind binds attributes/props (C); v-model provides form-input two-way binding (A); v-on attaches event listeners (D). **2. Match visibility directives:** v-show toggles CSS display (B). v-cloak, used with a matching hiding CSS rule, conceals uncompiled template content until Vue initializes (E). Therefore 1-C,2-A,3-D,4-B,5-E. **Answer: C — 1-C, 2-A, 3-D, 4-B, 5-E.** **Convention note:** v-cloak needs a CSS rule such as [v-cloak]{display:none} to hide the element before compilation; the directive alone is not a CSS hiding declaration. A: **Incorrect:** This exchanges two-way binding, events, display toggling and cloak behavior. B: **Incorrect:** The attribute-binding directive is not the two-way input directive, and the other mappings also fail. C: **Correct:** Every directive is paired with its intended functionality. D: **Incorrect:** This incorrectly assigns cloak behavior to v-bind and event handling to v-show.

**1. Check the initial type:** totalCost is the string "0", whereas unitPrice is the number 25. JavaScript += uses string concatenation when the left value is a string. **2. Trace three clicks:** totalCost becomes "025", then "02525", then "0252525". orderCount begins as numeric 0 and increments to 3. **Answer: D — Total Cost: 0252525; Order Count: 3.** A: **Incorrect:** A numeric initial totalCost=0 would yield 75, but the shown initial value is a string. B: **Incorrect:** 02525 is the cost after only two clicks, not three. C: **Incorrect:** The initial zero character remains part of the string. D: **Correct:** Three concatenations preserve the initial zero and append 25 three times.

**1. Enumerate numeric additions:** The pairs (i,j) are (0,0),(0,1),(1,0),(1,1). The expression i+j is evaluated numerically first, giving 0,1,1,2. **2. Append to the string:** result starts as an empty string, so each sum is concatenated. The final output is "0112". Each inner loop executes twice for each of the two outer iterations. **Answer: B, D — B and D — two inner iterations per outer pass and string accumulation.** **Convention note:** The subexpression i+j itself is numeric addition; it is the += assignment into string result that concatenates its result. A: **Incorrect:** The numeric sums concatenate to 0112, not 0011. B: **Correct:** For each fixed i, j takes values 0 and 1. C: **Incorrect:** The sums are 0,1,1,2, not 0,1,2,3. D: **Correct:** Each computed sum is appended to string result; the accumulating result is not a numeric total.

**1. Register the handlers:** addEventListener attaches handlers printing A and C. Assigning btn.onclick attaches the separate event-handler-property callback printing B; it does not remove listeners registered through addEventListener. **2. Dispatch the click:** btn.click() dispatches the click event, so all three callbacks run. The requested set is A,B,C regardless of order. **Answer: A, B, C — A, B and C.** A: **Correct:** The first addEventListener callback remains registered. B: **Correct:** The onclick property holds a callback and is invoked by the click. C: **Correct:** The second addEventListener callback is also registered. D: **Incorrect:** Three callbacks are registered and the code dispatches the event.

**1. Render the initial data:** Vue mounts with numbers=[1,2,3]. v-for creates one paragraph per array entry, so there are initially three paragraphs. **2. Inspect the attempted mutation:** The instance data is available as app.numbers or app.$data.numbers, not app.data.numbers. app.data is undefined here, so the last statement throws TypeError before push can execute. The existing three paragraphs remain. **Answer: 3.** **Convention note:** The result 3 is due to an invalid data-access expression, not because push is nonreactive. Using app.numbers.push(4) would correctly trigger a fourth paragraph after Vue’s asynchronous DOM update. The external script element should also use an explicit closing script tag in ordinary HTML.

**1. Apply the first filter:** Electronics that are in stock are Laptop (1200) and Phone (800). Tablet is excluded because inStock is false, and Book/Pen fail the category test. **2. Discount and filter again:** Their discounted prices are \(1200\times0.9=1080\) and \(800\times0.9=720\), both above 500. map/filter preserve their relative order, so result.length is 2 and result[0].name is Laptop. **Answer: B — 2, then Laptop.** A: **Incorrect:** Tablet fails the in-stock test, so there are not three results. B: **Correct:** Two entries survive, with Laptop first. C: **Incorrect:** Laptop also survives; Phone is not the only result. D: **Incorrect:** The count is right, but Laptop precedes Phone in the preserved order.

**1. Trace object1:** method1 is called with object1 as receiver, so it prints lexical globalVar=50 and this.globalVar=100. Its returned arrow inherits that same receiver, so fn1() prints 50,100 again. **2. Trace object2:** method2 is an arrow created in the top-level script context, so calling it as object2.method2() does not bind this to object2. Top-level const globalVar does not create window.globalVar. It therefore prints 50,undefined; its returned ordinary function, called without a receiver in non-strict code, also reads the global object and prints 50,undefined. **Answer: A — Lines: 50 100; 50 100; 50 undefined; 50 undefined.** **Convention note:** Assume a classic non-strict browser script and no pre-existing window.globalVar, as intended. An ES module is strict and has top-level this=undefined; the third/fourth accesses can then throw rather than match these options. A: **Correct:** The lexical variable is always 50; receiver lookup gives 100 twice, then undefined twice. B: **Incorrect:** The detached ordinary fn2() call has no object2 receiver and cannot read 200. C: **Incorrect:** Unqualified globalVar resolves lexically to 50, not the object property values. D: **Incorrect:** Logging this.globalVar produces a property value, not the literal word this.

**1. Follow construction and normal calls:** new Region("Asia") sets region=Asia. new Country("Europe","Germany") calls super(region), then sets name=Germany. Normal describe() calls return “Asia is a region.” and “Germany is in Europe.” respectively. **2. Check overriding and receiver loss:** Country defines its own constructor and overrides describe(). Extracting c.describe into f does not bind c; class methods execute in strict mode, so f() has undefined this and throws when reading this.name. The derived constructor must call super before using this. **Answer: A, B, D — A, B and D under the question’s constructor wording.** **Convention note:** These methods return strings; they do not themselves console.log, so “prints” means observing/logging the returned value. More precisely, constructors are not ordinary polymorphically overridden methods: Country declares its own constructor and delegates to the parent with super. D uses “overrides the constructor” informally. A: **Correct:** r.describe() returns the stated region sentence. B: **Correct:** c.describe() returns the Country override’s sentence. C: **Incorrect:** A detached class method loses its receiver and throws TypeError instead of returning Germany’s description. D: **Correct:** Under the question’s loose wording, Country customizes construction and overrides describe(); this is the intended selection. E: **Incorrect:** super(region) is needed before this access in this derived constructor and performs the parent initialization.

**1. Preserve valid zero arguments:** Missing or undefined parameters should become 1, but numeric 0 must remain 0 so that a zero factor still produces a zero product. Default parameters in B implement this behavior. **2. Check fallback and return behavior:** C’s nullish-coalescing defaults also replace undefined and preserve zero. A’s || defaults incorrectly replace zero by 1; D computes the product but never returns it. **Answer: B, C — B and C — default parameters and nullish-coalescing fallbacks.** **Convention note:** The stated domain is numbers plus undefined. If null were also a permitted value requiring distinct treatment, B and C would differ: defaults leave null unchanged, while ?? replaces it. A: **Incorrect:** || replaces every falsy value, including valid numeric zero, so this changes the product. B: **Correct:** Default parameter values apply when an argument is omitted or undefined and preserve zero. C: **Correct:** ?? replaces undefined (and also null) while preserving zero, so it satisfies the stated numeric/undefined cases. D: **Incorrect:** A function body without return yields undefined despite evaluating the multiplication expression.

**1. Update the parent state:** The input’s v-model changes the parent message to "hi". The parent paragraph therefore displays hi, and the dynamic title prop passes hi to the child. **2. Update child and slot output:** The child’s h2 displays the prop hi. The named-slot content is evaluated in the parent scope and calls message.toUpperCase(), so its h3 displays HI. B is the closest correct option and does not claim that the h3 is unchanged. **Answer: B — Both parent paragraph and child h2 show hi; slot h3 shows HI.** A: **Incorrect:** The child title is dynamically bound, so its h2 updates too. B: **Correct:** Both the parent paragraph and child h2 display hi; the slot h3 additionally displays HI. C: **Incorrect:** The paragraph and h2 update along with the slot. D: **Incorrect:** v-model changes reactive state and all these dependent displays update.

**1. Identify input and prop bindings:** v-model links the text input to the parent’s reactive message, while :title="message" passes its current value down as a child prop. **2. Identify the slot:** The parent provides a header slot, and the child renders it using a slot outlet named header. No created, mounted, updated or other lifecycle hook is explicitly defined in the supplied component code. **Answer: A, B, C — A, B and C — v-model, named slot and props.** A: **Correct:** The input uses v-model for two-way form binding. B: **Correct:** The child has a header-named slot outlet supplied by the parent. C: **Correct:** The dynamic title binding passes parent data to the child prop. D: **Incorrect:** The code does not explicitly declare a lifecycle hook; framework initialization alone is not an example of a user-defined hook.