Application Development - 2 · Quiz 1 · Jan 2025

**1. Compare DOM handling:** v-if creates or removes its conditional branch. v-show retains the element and changes its CSS display property. **2. Match the description:** Only A assigns these behaviors to the correct directives. **Answer: A — The “v-if” directive adds/removes elements from the DOM, while v-show only .** A: **Correct:** It correctly separates conditional DOM presence from CSS display toggling. B: **Incorrect:** It reverses the two directives. C: **Incorrect:** v-show does not remove the element merely because its condition is false. D: **Incorrect:** v-if changes branch presence rather than only CSS visibility.

**1. Apply lexical shadowing:** The IIFE declares its own let x. That local binding shadows the outer x=5 throughout the function body. **2. Access before initialization:** console.log(x) runs before the local let x=10 initializer. The local binding is in its temporal dead zone, so the read throws ReferenceError. **Answer: D — ReferenceError.** A: **Incorrect:** The outer value is shadowed by the local declaration. B: **Incorrect:** The local value 10 has not yet been initialized at the read. C: **Incorrect:** let does not provide an initialized undefined value during its temporal dead zone. D: **Correct:** Reading the uninitialized local binding throws ReferenceError. E: **Incorrect:** No expression initializes or returns null.

**1. Read the hoisted var binding:** myVar exists and is initialized to undefined before its later assignment to "hello", so its first log prints undefined. **2. Call the hoisted function declaration:** myFunc is available with its function body before its written declaration. It returns "world", which the second log prints. **Answer: B — undefined, world.** A: **Incorrect:** The assignment to hello occurs after the first log. B: **Correct:** The variable is undefined and the already-instantiated function returns world. C: **Incorrect:** Neither the var read nor the declared-function call causes a ReferenceError. D: **Incorrect:** The function declaration already has its callable value and returns world.

**1. Compare bindings:** var has function/script scope; let and const have block scope and remain uninitialized in their temporal dead zone until execution reaches their declaration. **2. Apply the const declaration rule:** An ordinary const declaration needs an initializer and cannot later be rebound. This makes B the intended correct statement. **Answer: B — const requires initialization in an ordinary declaration.** **Convention note:** The statement concerns ordinary declarations such as const x=1. A for-of/for-in loop head can declare const without an explicit initializer because each iteration supplies its binding value. A: **Incorrect:** It reverses the scope rules. B: **Correct:** An ordinary const declaration must supply its initial value. C: **Incorrect:** The bindings are not initialized to undefined before their declarations. D: **Incorrect:** Their scope and initialization rules differ.

**1. Create independent counters:** Each outer() call captures a separate count initialized to zero. **2. Apply prefix increment:** counter1() increments its count before returning, producing 1 then 2. counter2() uses its separate zero and returns 1 on its first call. **Answer: C — 1, 2, 1.** A: **Incorrect:** The second counter does not share counter1’s value. B: **Incorrect:** The second counter1 call advances its retained state to 2. C: **Correct:** It correctly gives the two first-counter results and independent second-counter result. D: **Incorrect:** This would be the corresponding postfix-increment output. E: **Incorrect:** The first call uses prefix increment and therefore returns 1.

**1. Check snippets 1 and 2:** const y without an initializer is a SyntaxError. Destructuring an object pattern from undefined in snippet 2 throws TypeError. **2. Check snippets 3 and 4:** Reassigning the const arr binding throws TypeError; modifying an array would be different, but the code rebinds it. The arrow IIFE in snippet 4 validly returns a+b=30. **3. Select all failing snippets:** Only 1,2,3 throw errors. **Answer: B — 1, 2 and 3.** **Convention note:** The four snippets are assessed separately; if concatenated into one script, the syntax error would prevent that combined script from executing at all. A: **Incorrect:** It omits snippet 3’s reassignment error. B: **Correct:** It includes all three failures and excludes the valid IIFE. C: **Incorrect:** It incorrectly includes valid snippet 4 and omits snippet 1. D: **Incorrect:** Snippet 4 is valid, so not all four fail.

**1. Read the update:** counter starts at 1, and each updateCounter call multiplies it by 2. **2. Apply three clicks:** \(1\to2\to4\to8\). After Vue flushes the reactive update, the paragraph displays 8. **Answer: C — 8.** A: **Incorrect:** This is the initial value before any clicks. B: **Incorrect:** This is the value after two clicks. C: **Correct:** Three doublings produce 8. D: **Incorrect:** 16 would require four clicks.

**1. Identify the receiver:** data[0]("Script") is a property-access call on the array data. Therefore the ordinary function’s this is that array. **2. Read the array length:** data contains three entries: the function, "Apple" and the number 5. this.length is 3, independent of the outer length binding or the argument string’s length. **Answer: D — 3.** A: **Incorrect:** The argument Script has six characters, but the function does not inspect its length. B: **Incorrect:** The outer let length=5 is not the property read through this. C: **Incorrect:** The array has three entries, not four. D: **Correct:** The receiver data is a three-element array.

**1. Apply call’s receiver:** Tree.description.call(willow,15) invokes the ordinary method with this=willow and local parameter size=15. **2. Read the properties actually used:** The template uses this.size, not the parameter size. willow has no size property, so undefined>10 is false and the word medium is chosen. this.name is Willow. **3. Form the string:** The result is A medium Willow tree. **Answer: D — A medium Willow tree.** A: **Incorrect:** The method uses willow as its receiver and has no size greater than 10 there. B: **Incorrect:** The receiver’s name is Willow, not Oak. C: **Incorrect:** The numeric argument does not supply a this.size property. D: **Correct:** It reflects willow’s name and the false undefined>10 test.

**1. Evaluate each conditional class:** Object-style class binding includes keys whose values are truthy. **2. Substitute the data:** isActive=true includes active, while hasError=false excludes text-danger. Only active is applied. **Answer: A — Only active.** A: **Correct:** It is the only class with a true condition. B: **Incorrect:** text-danger is excluded because hasError is false. C: **Incorrect:** The true isActive condition does include a class. D: **Incorrect:** It reverses the two conditions.

**1. Identify the arrow’s captured this:** The computed state getter is an arrow defined in the global script scope. Vue cannot rebind it to the component instance. **2. Evaluate the failing lookup:** In a fresh browser script, window.curr_status is undefined, so attempting this.curr_status[1] throws TypeError before a message can be constructed. **3. Interpret the listed choices:** No successful flight-message output occurs. E is the intended error choice, but it incorrectly names ReferenceError instead of TypeError. **Answer: E — TypeError during computed rendering — E is the intended error choice.** **Convention note:** No option names the exact exception correctly. Vue normally catches a render error, reports it to the console and renders an empty placeholder. An ordinary computed method would produce “The flight 103 has departed from terminal 1.” A: **Incorrect:** That would require reading the component’s arrays with a properly bound ordinary getter. B: **Incorrect:** It neither accesses the component correctly nor uses the specified array indices. C: **Incorrect:** It neither accesses the component correctly nor uses the specified array indices. D: **Incorrect:** The failed indexed access throws rather than silently generating this text. E: **Correct:** Closest intended choice: rendering errors, but the actual exception is TypeError, not ReferenceError.

**1. Resolve the complete slot:** The parent supplies no complete slot, so its fallback Learned DBMS is rendered first. **2. Resolve ongoing:** The template with v-slot:ongoing supplies Learning App Dev 2, rendered in the child’s second slot. **3. Resolve the default slot:** The ordinary parent heading Exploring Vue JS replaces the fallback Exploring Frontend and appears last. **Answer: D — Learned DBMS; Learning App Dev 2; Exploring Vue JS.** A: **Incorrect:** It omits the complete-slot fallback. B: **Incorrect:** It omits the complete-slot fallback and wrongly uses the default fallback. C: **Incorrect:** The parent provides default content, so Exploring Frontend is replaced. D: **Correct:** It follows the child’s slot-outlet order and all fallback rules.

**1. Keep the root instances separate:** vm1 controls app1 and its messageA; vm2 controls app2 and its messageB. Multiple Vue roots can coexist. **2. Apply the assignment:** Updating vm1.messageA changes only app1’s reactive text. After the update flush, app1 shows Updated App 1 while app2 still shows Hello from App 2. **Answer: A — Updated App 1; Hello from App 2.** **Convention note:** The final display is observed after Vue’s asynchronous DOM-update flush, not in the immediate synchronous instant following the assignment. A: **Correct:** It reflects the first instance’s update and preserves the independent second instance. B: **Incorrect:** It ignores the reactive assignment to messageA. C: **Incorrect:** The second instance is valid and remains mounted. D: **Incorrect:** Both instances mount and render their respective messages.

**1. Update numeric source values:** v-model.number stores price=20 and quantity=2 as numbers. **2. Apply the watchers:** The price watcher updates total and marks lastUpdatedBy="price"; the quantity watcher then assigns 20×2=40 and marks "quantity". If both changes share a tick, Vue’s watcher ordering still runs these declared price and quantity watchers in that order. **3. Read the final state:** total is 40 and lastUpdatedBy is quantity. **Answer: B — total: 40, lastUpdatedBy: quantity.** A: **Incorrect:** It omits the final quantity update. B: **Correct:** The final quantity watcher computes 40 and records its own source. C: **Incorrect:** It records the final source but not its correct product. D: **Incorrect:** The price watcher is not the last of these two updates.

**1. Locate the two methods:** greet is an instance method on Person.prototype. identify is static and belongs to the Person constructor. **2. Check each receiver:** john.greet() works; Person.identify() works; john.name exists. Person.greet() and john.identify() attempt to call missing methods and therefore throw TypeError. **Answer: B, C — B and C — Person.greet() and john.identify().** A: **Incorrect:** The instance inherits greet and can call it, so do not select this. B: **Correct:** The constructor has no static greet method, so this call throws. C: **Correct:** The instance does not inherit static identify, so this call throws. D: **Incorrect:** The constructor owns the static method, so this call works. E: **Incorrect:** The constructor initialized john.name, so reading and logging it works.