IIT M DIPLOMA AN EXAM QDD4 01 Dec 2024 - 01 Dec 2024

Consider the below JavaScript program.

```javascript
function main() {
    var count = 0;
    function increment(num = count++) {
        count += num;
    }
    increment();
    increment(2);
    increment();
    console.log(count);
}
main();
```

What will be the output of the above program?

Consider the below Vue component.

```html
<template>
  <div>
    <p>{{ message }}</p>
    <button @click="updateMessage">Change Message</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello'
    };
  },
  methods: {
    updateMessage() {
      this.message = this.message === 'Hello' ? 'World' : 'Hello';
    }
  }
};
</script>
```

What will be displayed in the `<p>` element, after the button with text "Change Message" is clicked?

Consider the below JavaScript program.

```javascript
async function asyncFunc() {
  try {
    const result1 = await Promise.resolve('Start');
    console.log(result1);

    const result2 = await new Promise((resolve, reject) => {
      setTimeout(() => reject('Error'), 100);
    });

    console.log(result2);
  } catch (error) {
    console.log('Caught:', error);
  }

  return 'End';
}

asyncFunc().then(result => console.log(result));
```

What will be the output of the program?

Consider the following HTML with Vue 2 CDN attached.

```html
<div id="app"></div>

<script>
  new Vue({
    el: '#app',
    data() {
      return {
        message: 'Hello'
      };
    },
    beforeCreate() {
      console.log('Before Create: ' + this.message);
      this.message = 'Before Create';
    },
    mounted() {
      this.message = 'Mounted';
      console.log('Mounted: ' + this.message);
    },
    template: `
      <div>
        <p>{{ message }}</p>
      </div>`
  });
</script>
```

What will be printed in the browser console ?

Consider the JavaScript code snippet below.

```javascript
const movies = [
  { title: 'Inception', rating: 8.8 },
  { title: 'Interstellar', rating: 8.6 },
  { title: 'Dunkirk', rating: 7.9 }
];

const summaries = movies.map(({ title, rating }) => `${title} has a rating of ${rating}`);

summaries.forEach((summary, index) => {
  const delay = 1000 - (index * 200);

  setTimeout(() => {
    console.log(summary);
  }, delay);
});
```

What will be logged to the console?

Consider the below JavaScript program.

```javascript
let a = 10;
let obj = {
  a: 20,
  fn: function() {
    let a = 30;
    return () => {
      let a = 40;
      return this.a;
    };
  }
};

console.log(obj.fn()());
```

What will be the output of the above program?

Consider the JavaScript code below.

```javascript
console.log('Start');

Promise.resolve().then(() => {
    console.log('Promise');
});

setTimeout(() => {
    console.log('Timeout');
}, 0);

console.log('End');
```

What will be the order of logs in the console?

Consider the below JavaScript program.

```javascript
const p1 = new Promise((resolve, reject) => {
  setTimeout(() => resolve('A'), 100);
});

const p2 = new Promise((resolve, reject) => {
  setTimeout(() => reject('B'), 50);
});

const p3 = new Promise((resolve, reject) => {
  setTimeout(() => resolve('C'), 150);
});

Promise.any([p1, p2, p3])
  .then(value => console.log(value))
  .catch(error => console.log(error));
```

What will be the output of the above program?

Consider the below Vuex implementation.

```javascript
const store = new Vuex.Store({
  state: {
    token: sessionStorage.getItem('authToken') || null
  },
  mutations: {
    setToken(state, token) {
      state.token = token;
      sessionStorage.setItem('authToken', token);
    },
    clearToken(state) {
      state.token = null;
      sessionStorage.removeItem('authToken');
    }
  },
  actions: {
    login({ commit }, token) {
      commit('setToken', token);
    },
    logout({ commit }) {
      commit('clearToken');
    }
  }
});
```

After the user logs in with a token and refreshes the page, what will happen to the Vuex state and the session storage?

Consider the following HTML, which includes Vue 2 and Vue Router 3 CDN links.

```html
<body>
  <div id="app"></div>
  <script>
    const Home = { template: `<h1>Home</h1>` }
    const NewestComments = { template: `<h3>Newest Comments</h3>` }
    const TopComments = { template: `<h3>Top Comments</h3>` }
    const SearchResults = { template: `<h3>Search Results</h3>` }
    const TopBar = { template: `<h3>Topbar</h3>` }
    const NavBar = { template: `<h3>Navbar</h3>` }
    const VideoDetail = { template: `<div>Video Details <router-view /></div>` }

    const routes = [
      { path: '/', component: Home },
      {
        path: '/video/:id',
        component: VideoDetail,
        props: true,
        children: [
          { path: 'comments/top', component: TopComments },
          { path: 'comments/newest', component: NewestComments }
        ]
      },
      { path: '/search/:query', component: SearchResults, props: true }
    ];

    new Vue({
      el: '#app',
      template: `
        <div>
          <TopBar />
          <NavBar />
          <router-view />
        </div>`,
      router: new VueRouter({ routes }),
      components: { TopBar, NavBar }
    })
  </script>
</body>
```

Given this router setup, which of the following will happen when a user navigates to `localhost:5000/#/video/5/comments/newest`, assuming the webpage is hosted on `localhost:5000`?

Consider the following HTML, which includes Vue 2 and Vue Router 3 CDN links.

```html
<div id="app">
  <player-card>
    <p>Rahul is a versatile player, skilled in defense and attack.</p>
    <template v-slot:extra>
      <p>Position: Captain</p>
      <p>Years on the team: 5</p>
    </template>
  </player-card>
</div>

<script>
  Vue.component('player-card', {
    props: {
      playerName: {
        type: String,
        default: 'Unknown Player'
      }
    },
    template: `
      <div class="card">
        <h2>{{ playerName }}</h2>
        <slot>
          <p>This player is an important part of the team.</p>
        </slot>
        <slot name="extra"></slot>
      </div>
    `
  });

  new Vue({
    el: '#app'
  });
</script>

What will be the final-rendered output in the browser?
```

Consider the below Vue component.

```html
<template>
  <div>
    <button @click="setDarkMode">Dark Mode</button>
    <button @click="setLightMode">Light Mode</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      theme: localStorage.getItem('theme') || 'light'
    };
  },
  methods: {
    setDarkMode() {
      this.theme = 'dark';
      localStorage.setItem('theme', 'dark');
    },
    setLightMode() {
      this.theme = 'light';
      localStorage.setItem('theme', 'light');
    }
  }
};
</script>
```

Which of the following statement(s) is/are correct about the behavior of the above component?