IIT M DIPLOMA FN EXAM QDD2 13 Apr 2025 - 13 Apr 2025

Consider the below JavaScript program.

```javascript
const promise = new Promise(((resolve, reject) => {
  resolve('Success!');
  reject('Failed!');
}));
promise.then(console.log).catch(console.log);
```

What will be the output of the above program?

Consider the below JavaScript program.

```javascript
let arr = [1, 2, 3];
let sum = arr.reduce((acc, val, idx, array) => acc + array[idx + 1], 0);
console.log(sum);
```

What will be the output of the above program?

Consider the below JavaScript program.

```javascript
const obj = {
    num: 5,
    multiply: function () {
        return this.num * 2;
    }
};
const multiply = obj.multiply;
console.log(multiply());
```

What will be the output of the above program?

Consider the below Vuex store configuration:

```javascript
const store = new Vuex.Store({
  state: {
    items: [],
  },
  mutations: {
    addItem(state, item) {
      state.items.push(item);
    },
  },
  actions: {
    addItemAsync({ commit }, item) {
      setTimeout(() => {
        commit('addItem', item);
      }, 1000);
    },
  },
});
```

If the addItemAsync action is dispatched with the item 'Vue.js', what will be the state of items after 2 seconds?

Consider the below Vue app.

```html
<div id="app">
  <router-link to="/foo">Go to Foo</router-link>
  <router-view></router-view>
</div>
<script>
  const Foo = { template: '<div>Foo</div>' };
  const Bar = { template: '<div>Bar</div>' };

  const routes = [
    { path: '/foo', component: Foo },
    { path: '/bar', component: Bar },
    { path: '/', component: Bar }
  ];

  const router = new VueRouter({ routes });

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

What happens when the user clicks "Go to Foo"?

Consider the following Vue component using slots:

```
Vue.component("alert-box", {
  template: `
    <div class="alert-box">
      <strong><slot name="title">Default title</slot></strong>
      <slot>Default content</slot>
    </div>
  `,
});
```

How would you use this component to provide custom title and content in the slots?

```javascript
Vue.component('user-list', {
  data() {
    return {
      users: [
        { id: 1, name: 'Arbok', role: 'Admin' },
        { id: 2, name: 'Bayleaf', role: 'User' },
        { id: 3, name: 'Charzard', role: 'Moderator' }
      ]
    }
  },
  template: `
    <div>
      <slot name="header"></slot>
      <ul>
        <li v-for="user in users" :key="user.id">
          <slot :user="user">
            {{ user.name }}
          </slot>
        </li>
      </ul>
    </div>
  `
})
```
Which of the following is the correct way to use this component with a scoped slot?

Consider the following JavaScript program, and predict the output, if executed.

```javascript
let propA = 10;

const obj1 = {
  propA: 20,
  propB: function() {
    console.log(propA, this.propA)
  }
}

const obj2 = {
  propA: 30,
  propB: function() {
    let func = () => console.log(propA, this.propA)

    func()
  }
}

obj2.propB.call(obj1);
```

Consider the following Flask application (server.py):

server.py
```python
from flask import Flask
from flask_caching import Cache
import time

config = {
    "DEBUG": True,
    "CACHE_TYPE": "RedisCache",
    "CACHE_REDIS_URL": "redis://localhost:6379/1",
    "CACHE_DEFAULT_TIMEOUT": 300
}

app = Flask(__name__)
app.config.from_mapping(config)
cache = Cache(app)

@app.route('/data/<item>')
@cache.cached(timeout=100)
def get_data(item):
    time.sleep(25)
    return f"Data for {item}"

if __name__ == '__main__':
    app.run()
```

The application runs on http://localhost:5000.
A client makes two consecutive requests to http://localhost:5000/data/apple within 50 seconds
What will be the approximate absolute difference between their latencies?

Consider the following JavaScript code.

```javascript
async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    if (!response.ok) throw new Error('HTTP error');
    const data = response.json();
    return data;
  } catch (error) {
    if (error.name === 'TypeError') {
      return {
        status: 'network error'
      };
    }
    return {
      status: 'http error'
    };
  }
}
```

When the function is called, what will be returned if the request gives a 200 OK?

Consider the following JavaScript code snippet. If the code is run on the browser,
what will be the output on the console?

```javascript
console.log("variable1")
setTimeout(() => {
    console.log("variable2")
    setTimeout(() => {
        console.log("variable3")
    }, 500);
}, 2000)
console.log("variable4")
```

Consider the below CORS enabled flask app.

```python
from flask import Flask
from flask_cors import CORS

app = Flask(__name__)
CORS(app, resources={r"/api/*": {"origins": "http://localhost:5000"}})

@app.route("/api/data")
def data():
    return {"message": "Hello from Flask"}
```

If a Vue.js frontend (simulation given below) at "http://localhost:3000" tries to fetch data, what will happen?

```javascript
fetch("http://localhost:5000/api/data")
    .then(response => response.json())
    .then(data => console.log(data));
```

```javascript
const store = new Vuex.Store({
  state: {
    value: 0
  },
  mutations: {
    setValue(state, payload) {
      state.value = payload;
    }
  },
  actions: {
    async updateValue({
      commit
    }) {
      const newValue = await fetchData();
      commit('setValue', newValue);
    }
  }
});

function fetchData() {
  return new Promise(resolve => {
    setTimeout(() => resolve(42), 2000);
  });
}

store.dispatch('updateValue');
console.log(store.state.value);
```

What will be logged to the console when the following JavaScript code runs?

```javascript
const alpha = [3, 5, 7, 9, 11, 13, 15, 17];
const beta = alpha.map(x => x ** 3);
const gamma = beta.filter(y => (y % 7 === 6) || (y % 5 === 4));
const delta = gamma.slice(0, 3);
console.log(delta);
```

Consider the following Flask application (server.py) and an HTML file named index.html:

server.py

```python
from flask import Flask
import time

app = Flask(__name__)

@app.route("/api/slow1")
def slow_api_1():
    time.sleep(15)
    return "Response from Slow API 1", 200, {'Access-Control-Allow-Origin': '*'}

@app.route("/api/slow2")
def slow_api_2():
    time.sleep(25)
    return "Response from Slow API 2", 200, {'Access-Control-Allow-Origin': '*'}

if __name__ == "__main__":
    app.run(threaded=False)
```

index.html

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Flask Fetch Example</title>
</head>
<body>
    <h1>Fetching API Data...</h1>

    <script>
        fetch("http://127.0.0.1:5000/api/slow1")
            .then(res => res.json())
            .then(data => console.log("API 1 Response:", data));

        fetch("http://127.0.0.1:5000/api/slow2")
            .then(res => res.json())
            .then(data => console.log("API 2 Response:", data));
    </script>
</body>
</html>
```

If you open index.html in a browser, approximately how long will it take for the second fetch call (http://127.0.0.1:5000/api/slow2) to complete and log the data to the console?

script.js
```javascript
const app1 = new Vue({
  el: '#app1',
  data: {
    value1: "VueJS",
    value2: "Frontend"
  }
})
const app2 = new Vue({
  el: '#app2',
  data: {
    value3: "JavaScript"
  }
})
```

index.html
```html
<div id="app2">
  {{value1}}
  <div id="app1">
    {{value2}}
  </div>
  {{value3}}
</div>
<script src="./script.js"></script>
```

index.html
```html
<div id="app">
    <my-comp>
        <slot>Hello Frontend</slot>
        <slot>Hello VueJS</slot>
    </my-comp>
</div>
<script src="script.js"></script>
```

script.js
```javascript
const myComp = {
    template: `
        <div>
            <slot></slot>
            <slot></slot>
        </div>
    `
}

const app = new Vue({
    components: {
        "my-comp": myComp
    }
}).$mount('#app')
```

Consider the below flask implementation with JWT based authentication.

```python
from flask import Flask, request, jsonify
import jwt
import datetime

app = Flask(__name__)
SECRET_KEY = "supersecret"

def generate_token(user):
    return jwt.encode(
        {"user": user, "exp": datetime.datetime.utcnow() +
         datetime.timedelta(seconds=10)},
        SECRET_KEY,
        algorithm="HS256"
    )

@app.route("/login", methods=["POST"])
def login():
    user = request.json.get("user")
    token = generate_token(user)
    return jsonify({"token": token})

@app.route("/protected", methods=["GET"])
def protected():
    token = request.headers.get("Authorization").split(" ")[1]
    try:
        payload = jwt.decode(token, SECRET_KEY, algorithms=["HS256"])
        return jsonify({"message": f"Hello {payload['user']}!"})
    except jwt.ExpiredSignatureError:
        return jsonify({"error": "Token expired"}), 401
    except jwt.InvalidTokenError:
        return jsonify({"error": "Invalid token"}), 403
```

If a Vue.js client sends this request 15 seconds after login, what response will it receive
(assume the token sent is the one, which was received from login)?

```javascript
fetch("http://localhost:5000/protected", {
    method: "GET",
    headers: { "Authorization": "Bearer <JWT_TOKEN>" }
})
.then(res => res.json())
.then(console.log);
```

Consider the below Vuex store configuration.

```javascript
const store = new Vuex.Store({
  state: {
    count: 0,
  },
  mutations: {
    increment(state) {
      state.count++;
    },
  },
});
```

And the below Vue component:

```html
<template>
  <div>
    <button @click="increment">Increment</button>
    <p>Count: {{ count }}</p>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex';

export default {
  computed: {
    ...mapState(['count']),
  },
  methods: {
    ...mapMutations(['increment']),
  },
};
</script>
```

What will be displayed in the placeholder "{{ count }}" on the browser after clicking the "Increment" button 3 times?

What will be the response
by the following fetch
request.

```javascript
fetch("http://127.0.0.1:5000/protected", {
    method: "GET"
})
.then(response => {
    return response.json();
})
.then(data => console.log("Protected Route Response:", data))
.catch(error => console.error("Error:", error));
```

What will be the result of the following fetch request.

```javascript
fetch("http://127.0.0.1:5000/protected", {
    method: "GET",
    headers: {
        "Authorization": "Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.."
    }
})
.then(response => {
    if (response.status === 403) {
        throw new Error("403 Forbidden: Insufficient permissions");
    }
    return response.json();
})
.then(data => console.log("Protected Route Response:", data))
.catch(error => console.error("Error:", error));
```

```
{
  token: 112,
  userRole: "manager"
}
```