Home / Past papers / MAD2 Quiz 1 / this paper

```
{{ message }} for interpolation
```
```html v-bind:title="msg" ``` for binding attributes

```html v-on:@click="doSomething" ``` for click event binding

```html <input v-model="inputValue"></input> ``` for two-way binding

Consider the following JavaScript code:
```javascript
let employees = [
{ name: "Rahul", age: 28 },
{ name: "Priya", age: 24 },
{ name: "Amit", age: 32 }
];
employees.sort((a, b) => a.age - b.age);
console.log(employees.map(e => e.name).join(" - "));
```
What will be printed on the console?
Consider the following JavaScript code snippet.
```javascript
const users = [
{ name: "Amit", age: 25 },
{ name: "Bhavna", age: 20 },
{ name: "Chirag", age: 30 },
];
const names = users
.filter((u) => u.age >= 25)
.map((u) => u.name.toUpperCase())
.sort();
console.log(JSON.stringify(names));
```
What is logged on the console?
Consider the following JavaScript code snippet.
```javascript
let subject = "Dog";
function camera() {
let subject = "Deer";
function click() {
console.log(`clicked picture of ${subject}`);
}
subject = "Cat";
return click;
}
let cameraPicture = camera();
cameraPicture();
```
What is logged to the console?
Match the following Vue 2 directives in Column A with their correct functionality in Column B: | Column A | Column B | |---|---| | 1. v-bind | A. Creates two-way data binding between form inputs and Vue data properties | | 2. v-model | B. Conditionally shows or hides elements using CSS display property | | 3. v-on | C. Binds HTML attributes or component properties to Vue data expressions | | 4. v-show | D. Attaches event listeners to DOM elements for handling user interactions | | 5. v-cloak | E. Prevents the flash of un-compiled template content before Vue initializes |

Consider the following HTML, with the correct Vue 2 CDN links included
```html
<body>
<div id="app">
<p>Coffee</p>
<button @click="orderCoffee">Order</button>
<p>Total Cost: {{totalCost}}</p>
<p>Order Count: {{orderCount}}</p>
</div>
<script>
new Vue({
el: '#app',
data() {
return {
totalCost: '0',
unitPrice: 25,
orderCount: 0
}
},
methods: {
orderCoffee() {
this.totalCost += this.unitPrice;
this.orderCount++;
}
}
})
</script>
</body>
```
What will be displayed for "Total Cost" and "Order Count" when the Order button is clicked three times?
Total Cost: 75, Order Count: 3

Total Cost: 02525, Order Count: 3

Total Cost: 252525, Order Count: 3

Total Cost: 0252525, Order Count: 3

Consider this nested loop is written in JavaScript:
```javascript
let result = "";
for (let i = 0; i < 2; i++) {
for (var j = 0; j < 2; j++) {
result += i + j;
}
}
console.log(result);
```
Which of the following statements is/are true?
The output is "0011".

The inner loop runs 2 times for each outer loop iteration.

The output is "0123"

The values are concatenated into a **string**, not added as numbers.

Consider the following HTML and JavaScript code.
HTML file
```html
<button id="btn">Click Me</button>
<script>
const btn = document.getElementById('btn');
btn.addEventListener('click', () => console.log('A'));
btn.onclick = () => console.log('B');
btn.addEventListener('click', () => console.log('C'));
btn.click();
</script>
```
Among the following console log statements, which ones will be logged when the code executes?
(Select **all** that apply, irrespective of the order.)
Consider the following HTML and JavaScript, assume Vue 2 CDN link to be already included.
index.html:
```html
<div id="app">
<p v-for="n in numbers">{{ n }}</p>
</div>
<script src="app.js" ></script>
```
app.js:
```javascript
var app = new Vue({
el: "#app",
data: { numbers: [1, 2, 3] },
});
app.data.numbers.push(4);
```
How many `<p>` elements will be rendered?
Consider the following JavaScript code snippet:
```javascript
const products = [
{ name: 'Laptop', price: 1200, category: 'Electronics', inStock: true },
{ name: 'Book', price: 25, category: 'Education', inStock: false },
{ name: 'Phone', price: 800, category: 'Electronics', inStock: true },
{ name: 'Pen', price: 5, category: 'Stationery', inStock: true },
{ name: 'Tablet', price: 600, category: 'Electronics', inStock: false }
];
const result = products
.filter(item => item.category === 'Electronics' && item.inStock)
.map(item => ({ ...item, discountedPrice: item.price * 0.9 }))
.filter(item => item.discountedPrice > 500);
console.log(result.length);
console.log(result[0].name);
```
What will be the output of the above code on the browser's console?
``` 3 Laptop ```

2 Laptop

1 Phone

2 Phone

Consider the below JavaScript program:
```javascript
const globalVar = 50;
const object1 = {
globalVar: 100,
method1: function() {
console.log(globalVar, this.globalVar);
return () => {
console.log(globalVar, this.globalVar);
}
}
}
const object2 = {
globalVar: 200,
method2: () => {
console.log(globalVar, this.globalVar);
return function() {
console.log(globalVar, this.globalVar);
}
}
}
const fn1 = object1.method1();
fn1();
const fn2 = object2.method2();
fn2();
```
What will be the output of the above program on the browser's console, if executed?
``` 50 100 50 100 50 undefined 50 undefined ```

``` 50 100 50 100 50 undefined 50 200 ```

``` 100 50 100 50 200 50 200 50 ```

``` 50 100 50 100 50 undefined 50 this ```

Consider the following JavaScript code:
```javascript
class Region {
constructor(region) {
this.region = region;
}
describe() {
return `${this.region} is a region.`;
}
}
class Country extends Region {
constructor(region, name) {
super(region);
this.name = name;
}
describe() {
return `${this.name} is in ${this.region}.`;
}
}
let r = new Region("Asia");
let c = new Country("Europe", "Germany");
let f = c.describe;
```
Which of the following statements are **true**?
Calling r.describe() prints "Asia is a region."

Calling c.describe() prints "Germany is in Europe."

Calling f() directly will still print "Germany is in Europe."

The Country class overrides both the **constructor** and the **describe()** method from Region.

The call to super (region) inside Country's constructor is **not required** to initialize this.region.

Consider the following JavaScript function definitions. Which of the following will correctly return the product of three numbers and handle the case where any parameter is undefined by treating it as 1?

```javascript
let multiply = (a, b, c) => {
a = a || 1;
b = b || 1;
c = c || 1;
return a * b * c;
}
```
```javascript
function multiply(a = 1, b = 1, c = 1) {
return a * b * c;
}
```
```javascript
let multiply = (a, b, c) => {
return (a ?? 1) * (b ?? 1) * (c ?? 1);
}
```
```javascript
const multiply = function(a, b, c) {
if(a === undefined) a = 1;
if(b === undefined) b = 1;
if(c === undefined) c = 1;
a * b * c;
}
```

If the user types "hi" into the input box, what happens on the page, choose the closest to correct?

Only `<p>` updates to "hi", but `<h2>` remains "Hello Vue".

Both `<p>` and `<h2>` update and display "h1".

Only `<h3>` changes to "HI", but `<p>` and `<h2>` remain unchanged.

Nothing updates at all.

Which Vue.js features are shown in the code?

Two-way data binding using v-model.

Use of a named `slot` inside a child component.

Passing values from parent to child using props.

Use of lifecycle hooks.
Auto-generated summary from the source site. Handy as a checklist; the lessons above explain each idea from scratch.
Here’s a structured summary of core topics, concepts, and principles for the "Modern Application Development II" exam, along with a Mermaid knowledge graph to visualize relationships.
Template Syntax:
{{ message }}v-bind:title="msg"v-on:click="doSomething" (shorthand: @click)v-model="inputValue"Directives:
v-if (removes element from DOM if false)v-show (toggles display: none; no re-render)v-for (iterates over arrays/objects)v-bind (dynamically binds attributes/classes)v-on (attaches event listeners)v-model (two-way data binding for form inputs)v-cloak (hides uncompiled templates until Vue loads)Slots:
<slot name="header">) for component content distribution.Props & Data Flow:
props.$emit.Lifecycle Hooks (not tested in this paper but good to know):
created, mounted, updated, destroyed.Array Methods:
filter(): Returns a new array with elements that pass a test.map(): Transforms each element and returns a new array.sort(): Sorts elements (default: lexicographic; use comparator for numbers).join(): Combines array elements into a string.Closures & Scope:
click in Q6).let vs var: let is block-scoped; var is function-scoped.Arrow Functions:
this binding (inherits this from surrounding context).(a, b) => a + b.Default Parameters:
function foo(a = 1) { ... } (handles undefined values).Nullish Coalescing (??):
null or undefined.Class Inheritance:
extends, super(), method overriding.Event Listeners:
addEventListener vs onclick (multiple listeners vs single assignment).Event Loop:
Promises/Async-Await (not in this paper but related):
Event Propagation:
Dynamic Updates:
javascript arr.sort((a, b) => a - b); // Ascending ``filter → map → sort: ``javascript const result = arr .filter(item => item.age >= 25) .map(item => item.name.toUpperCase()) .sort(); ``javascript function multiply(a = 1, b = 1, c = 1) { return a * b * c; } ``html <p>{{ message }}</p> ``html <input v-model="message"> ``html <p v-if="isVisible">Visible</p> <p v-show="isVisible">Toggled via CSS</p> ``html <child-component> <template slot="header"><h1>Title</h1></template> </child-component> ``this Bindingthis: ``javascript const obj = { method: () => console.log(this) // this = outer scope (e.g., window) }; ``this: ``javascript const obj = { method() { console.log(this) } // this = obj }; ``Vue.js:
v-if (DOM removal) and v-show (CSS toggle).v-model is syntactic sugar for v-bind:value + v-on:input.JavaScript:
filter, map, sort) are chainable and return new arrays.this; they inherit it.Debugging:
this binding issues, check if the function is an arrow function or regular function.data().Common Pitfalls:
sort() without a comparator sorts lexicographically (e.g., [10, 2] → [10, 2]).var in loops creates function-scoped variables (use let for block scope).v-for requires a :key for efficient updates (not in this paper but important).