IIT M IMPROVEMENT AN EXAM QIC4 26 Oct - 26 Oct 2025

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?

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?

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?

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?

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**?

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?

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

Which Vue.js features are shown in the code?