Question 1
Considering the following code snippet, which statements are true about components in Vue?
Parent can listen with @update
Parent receives payload via $event
Child can directly modify parent state
$emit triggers a DOM event

The IIT Madras BS Modern Application Development II (MAD 2) End Term paper sat on 21 Dec 2025, in the September 2025 term: 29 questions for 89 marks in 180 minutes. Every question is below with its answer. Take it as a timed mock test to be marked, or read it through first.
Considering the following code snippet, which statements are true about components in Vue?
Parent can listen with @update
Parent receives payload via $event
Child can directly modify parent state
$emit triggers a DOM event
Correct answers
Parent can listen with @update
Parent receives payload via $event
Consider the following JavaScript code snippet.
What will be printed on the console?
2
4
Undefined
Error
Correct answer
4
Which of the following is considered a good practice for securing user authentication in a web application?
Storing passwords as plain text in the database for quick lookup
Using hashing algorithms like "bcrypt" or "Argon2" to store passwords securely
Including user passwords directly in SQL queries for verification
All of these
Correct answer
Using hashing algorithms like "bcrypt" or "Argon2" to store passwords securely
In the following code snippet, which values should replace option1 and option2 so that the cookie is sent only over HTTPS and is restricted from cross-site requests?
secure=True and samesite='Strict'
secure=False and samesite='Strict'
secure=True and samesite='None'
secure=False and samesite='Lax'
Correct answer
secure=True and samesite='Strict'
When comparing Redis with a typical API data store (like a relational database accessed through REST APIs), which of the following statements is true?
Redis can only store strings, unlike API data stores which can handle complex structures.
Redis is an in-memory data structure store, often used as a cache or message broker to complement API-based data stores.
Redis is a relational database and queries data using SQL, just like an API data store.
Redis is slower than API-based databases because it stores everything in memory.
Correct answer
Redis is an in-memory data structure store, often used as a cache or message broker to complement API-based data stores.
How can you stop a Cross-Site Scripting (XSS) attack?
Backend validation of user input and make sure any user-provided text is not executed as code.
Store authentication token or jwt in cookies.
Use v-html to show user generated data.
Send cookies with every request to the backend.
Correct answer
Backend validation of user input and make sure any user-provided text is not executed as code.
Which of the following describe Redis features correctly?
In-memory database
Can support publish-subscribe (pub/sub)
Can be used as Celery result backend
Requires SQL to query
Correct answers
In-memory database
Can support publish-subscribe (pub/sub)
Can be used as Celery result backend
Which of the following is true about Vuex state?
It should be modified only through mutations
It should be modified only through actions
It cannot contain nested objects
It should be modified by getters
Correct answer
It should be modified only through mutations
What is the purpose of Redis in a Celery-based system?
To automatically retry failed tasks
To execute tasks in parallel
To return computed results in JSON format
To store scheduled tasks and serve as a message broker
Correct answer
To store scheduled tasks and serve as a message broker
What happens to the fetch call when it gets a 404 status code (page not found)?
Correct answer
Consider the following JavaScript snippet.
What will be printed on the browser's console?
[2, 4, 6]
[6]
[4, 6]
[1, 2, 3]
Correct answer
[6]
Consider the following JavaScript snippet:
What will be printed on the browsers' console?
50
undefined
Error
7
Correct answer
7
Consider the following Vue Router setup and HTML.
Suppose the webpage is served at http://127.0.0.1:5000. A user visits the URL http://127.0.0.1:5000/\#/user/10/orders. What will be rendered on the browser?
User Orders
User 10 User Overview
User 10 User Orders
Nothing is rendered because sibling routes overwrite the parent route.
Correct answer
User 10 User Orders
Consider the following JavaScript code snippet where a web application manages user preferences using localStorage. A user opens the application, sets their theme preference to "dark", refreshes the page once, closes the browser tab, and opens a new tab to reload the page. What will be the behavior of the theme preference?
The theme will be lost because closing the browser tab clears localStorage
The theme will be preserved as "dark" because localStorage persists across browser sessions
The theme will be undefined because localStorage is cleared on refresh
The theme will be reset to "light" when a new tab is opened
Correct answer
The theme will be preserved as "dark" because localStorage persists across browser sessions
A developer creates a Vue component using both v-if and v-show directives on different elements with initially false conditions. Later, the conditions are changed to true. What is the key difference in how these two directives handle the DOM?
v-if removes the element from DOM when false, v-show only changes CSS display property
v-show removes the element from DOM when false, v-if only changes CSS display property
Both v-if and v-show re-mount the element and re-run lifecycle hooks
Both directives are identical in their functionality; they just have different naming conventions
Correct answer
v-if removes the element from DOM when false, v-show only changes CSS display property
A Promise chain is created as follows. The first Promise resolves with a string, which is then processed through multiple .then() handlers. What will be logged to the console?
hello
hello WORLD
HELLO WORLD
An error will be thrown
Correct answer
HELLO WORLD
A JavaScript object is created and then assigned to another variable. Modifications are made through both variables. What will be the final state of the original object?
5000
3000
10000
undefined
Correct answer
10000
Which of the following statements about the "this" keyword in JavaScript are correct?
In a regular function, "this" is always bound to the global object (window in browsers)
In an arrow function, "this" is inherited from the enclosing lexical scope
The .call() method can be used to explicitly set the context of "this" in a function
In a method called on an object, "this" always refers to that object regardless of how the function is defined
Correct answers
In an arrow function, "this" is inherited from the enclosing lexical scope
The .call() method can be used to explicitly set the context of "this" in a function
A Vue Router application uses lazy-loaded route components. When a user navigates to a route with a dynamic parameter (e.g., /product/:id), and the computed property depends on this route parameter, what could be a potential issue if the component is not properly handling asynchronous operations?
The component will throw a critical error and crash the application
The computed property will return undefined because the component hasn't mounted yet
The route parameter will not be accessible in the computed property
The component will display data from the previously loaded route
Correct answer
The component will display data from the previously loaded route
A developer uses sessionStorage to store authentication tokens in a web application. The user logs in, the token is stored, and then they close the browser window completely. When they reopen the browser later, what will happen? Code:
The token will be preserved and available in the new browser session.
The token will be cleared because sessionStorage is cleared when the browser is closed.
The token will be partially available but require re-authentication.
The token will move to localStorage automatically.
Correct answer
The token will be cleared because sessionStorage is cleared when the browser is closed.
A developer creates a Vue component with prototype chain inspection. The component uses class-based inheritance with lifecycle hooks. Consider the following scenario. Code:
What will be the output on the browser's console?
true true true true
true false true true
false true true false
true true false false
Correct answer
true true true true
In a web application using webhooks and Redis for real-time data synchronization:
Scenario: An order management system where:
• When an order is created, a webhook is sent to a notification service
• Redis stores the current order cache
• Multiple concurrent requests update the cache
Which statements about this architecture are true?
Webhooks guarantee that the notification service will process events in the exact order they were triggered
Redis is suitable for this use case because it's an in-memory data structure store that provides fast access to cached data
The webhook will automatically retry if the notification service is temporarily unavailable
Webhooks use HTTP POST requests to communicate events asynchronously
Correct answers
Redis is suitable for this use case because it's an in-memory data structure store that provides fast access to cached data
Webhooks use HTTP POST requests to communicate events asynchronously
Consider the Vue application.
Based on the above data, answer the given subquestions.
What happens when the user clicks the calculate button?
expensive() runs again because the DOM updates
expensive() does NOT run again because its dependencies did not change
Vue recomputes all computed properties on any state change
Nothing is displayed
Correct answer
expensive() does NOT run again because its dependencies did not change
Consider the Vue application.
Based on the above data, answer the given subquestions.
Under which condition will the computed property expensive() re-run?
When this.time changes
The user clicks anywhere on the DOM
Either this.a or this.b changes
When Date.now() changes
Correct answer
Either this.a or this.b changes
Consider the Vue application.
Based on the above data, answer the given subquestions.
What are the benefits of computed caching in Vue?
Reduced CPU usage
Faster rendering
Avoids unnecessary recomputation
Makes all computations asynchronous
Correct answers
Reduced CPU usage
Faster rendering
Avoids unnecessary recomputation
Consider the following Vue 2 (CDN) code. html code:
script:
Based on the above data, answer the given subquestions.
What happens when the user clicks on "User 2" after initially opening "User 1"?
Correct answer
Consider the following Vue 2 (CDN) code. html code:
script:
Based on the above data, answer the given subquestions.
Why is the watcher on $route.params.id necessary in this code?
Without it, the userId in data would never change when the route changes.
It is required because Vue Router does not automatically update component data.
It prevents the component from being destroyed and recreated on every navigation.
Both Without it, the userId in data would never change when the route changes and It is required because Vue Router does not automatically update component data are correct.
Correct answer
Both Without it, the userId in data would never change when the route changes and It is required because Vue Router does not automatically update component data are correct.
Consider the following Vue.js application with two different route scenarios and a component that uses reactive data binding:
Scenario: An e-commerce application where:
• Product list component displays products filtered by category
• Category changes through router parameters: /products/:category
• When a user navigates from /products/electronics to /products/books, the product list should update
Based on the above data, answer the given subquestions.
What will be rendered when the user first navigates to /products/electronics?
An empty array because displayedProducts is initialized as null
All three products because the watch handler hasn't been triggered yet
Only the Laptop and Phone (both electronics)
The data will show an error because the category doesn't exist in the array
Correct answer
Only the Laptop and Phone (both electronics)
Consider the following Vue.js application with two different route scenarios and a component that uses reactive data binding:
Scenario: An e-commerce application where:
• Product list component displays products filtered by category
• Category changes through router parameters: /products/:category
• When a user navigates from /products/electronics to /products/books, the product list should update
Based on the above data, answer the given subquestions.
When the user navigates from /products/electronics to /products/books, what will happen and why?
The computed property will not update because it's being used in a watch handler
The computed property will automatically re-evaluate because the route parameter dependency changed
The displayedProducts variable will update, but the computed property will display stale data
Both the computed property and displayedProducts will update to show books
Correct answer
The computed property will automatically re-evaluate because the route parameter dependency changed