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 the core topics, concepts, and principles covered in the exam, along with a Mermaid knowledge graph to visualize relationships.
Template Syntax:
{{ message }}v-bind:title="msg"v-on:click="doSomething" (or @click)v-model="inputValue"Directives:
v-if: Removes elements from DOM when false.v-show: Toggles visibility via CSS (display: none).v-for: Iterates over arrays/objects.v-bind: Dynamically binds attributes/classes.v-on: Attaches event listeners.v-model: Two-way data binding (e.g., form inputs).v-cloak: Hides uncompiled templates until Vue initializes.Slots:
<slot name="header">) for component content distribution.Props:
:prop-name="data".v-cloak).Array Methods:
sort((a, b) => a.age - b.age): Sorts numerically.filter(item => condition): Returns a subset.map(item => transform): Transforms elements.join(separator): Concatenates strings.Closures & Scope:
click() in Question 6).var vs. let: var is function-scoped; let is block-scoped.Arrow Functions:
this from parent scope (e.g., () => console.log(this.globalVar)).Class Inheritance:
extends, super(), method overriding.Default Parameters:
function(a = 1, b = 1) { ... } or (a, b) => (a ?? 1) * (b ?? 1).Event Handling:
addEventListener vs. onclick: Multiple listeners vs. single assignment.Event Loop:
console.log calls).Vue’s Reactivity:
v-model).Vanilla JS:
document.getElementById(), click() programmatic triggering.javascript array.sort((a, b) => a.age - b.age); // Ascending numerical sort ``javascript array .filter(item => item.age >= 25) .map(item => item.name.toUpperCase()) .sort(); ``javascript function multiply(a = 1, b = 1, c = 1) { return a * b * c; } // OR (a, b, c) => (a ?? 1) * (b ?? 1) * (c ?? 1); ``javascript function outer() { let x = 10; return function inner() { console.log(x); }; // Remembers x } ``javascript class Child extends Parent { constructor() { super(); // Calls Parent's constructor } } ``html <input v-model="message"> ``html <p v-if="show">Visible</p> <p v-show="show">Hidden via CSS</p> ``html <child-component> <template slot="header"><h1>Title</h1></template> </child-component> ``Vue.js:
v-if vs. v-show, v-model, v-bind), slots, and props.v-model syncs data.JavaScript:
sort, filter, map, reduce).this binding, and arrow functions.DOM/Events:
addEventListener vs. onclick.element.click()).Debugging:
var vs. let in loops).Vue:
v-if (DOM removal) with v-show (CSS toggle).v-model is syntactic sugar for v-bind:value + v-on:input.JavaScript:
this in arrow functions vs. regular functions.