IIT M FOUNDATION DIPLOMA FN EXAM - 01 Sep 2024

| | |
|---|---|
| 1. Webhooks | A. Real-time communication in chat applications |
| 2. Web Sockets | B. Fetching data periodically from an API endpoint |
| 3. API | C. Receiving notifications when a specific event occurs |
| 4. Polling | D. Exchanging data between client and server using HTTP requests |
| 5. Pub/Sub | E. Broadcasting messages to multiple subscribers simultaneously |

Consider the below javascript program.

```javascript
function parent() {
    var a = 1;
    function child() {
        console.log(a);
    }
    a = 2;
    return child;
}

var closure = parent();
closure();
```

What will be the output of the above program, if executed?

Consider the following JavaScript code snippet.

```javascript
// Code Snippet 1
sessionStorage.setItem('username', 'course_user');
let storedUsername = sessionStorage.getItem('username');

// Code Snippet 2
sessionStorage.removeItem('username');
let removedUsername = sessionStorage.getItem('username');

// Code Snippet 3
sessionStorage.clear();
let clearedStorage = sessionStorage.username;
```

What will be the values of 'storedUsername', 'removedUsername', and 'clearedStorage' after the execution of the above code snippets?

Consider the following javascript code

```javascript
const obj = {
  num: 40,
  regularFunction: function() {
    return this.value;
  },
  arrowFunction: () => {
    return this.value;
  }
};

const regularResult = obj.regularFunction();
const arrowResult = obj.arrowFunction();
```

What are the values of regularResult and arrowResult?

Consider the below 2 approaches:
Approach 1:

```html
<script>
    setInterval(() => document.title = "Title A", 2000)
    setInterval(() => document.title = "Title B", 1000)
</script>
```

Approach 2:

```html
<script>
    setInterval(() => document.title = "Title A", 1000)
    setInterval(() => document.title = "Title B", 2000)
</script>
```

Choose the correct statement:

Consider the below JavaScript program.

```html
<script>
    for (var i = 0; i <= 3; i++) {
        setTimeout(() => console.log(i), (i+1)*1500);
    }
</script>
```

What will be the output of the above program, if executed? Also, predict the minimum number of seconds the program will take to complete the execution?

```html
<div id="app">
  <input v-model="newItem" placeholder="Add an item" />
  <button @click="addItem">Add</button>

  <ul>
    <li v-for="(item, index) in items" :key="index">
      {{ index + 1 }}. {{ item }}
    </li>
  </ul>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      newItem: '',
      items: ['Apple', 'Banana']
    },
    methods: {
      addItem() {
        if (this.newItem) {
          this.items.push(this.newItem, this.newItem);
          this.newItem = '';
        }
      }
    }
  });
</script>
```

```javascript
localStorage.setItem('counter', '0');
sessionStorage.setItem('total', '5');

for (let i = 0; i < 3; i++) {
    let counter = localStorage.getItem('counter');
    let total = sessionStorage.getItem('total');

    counter += 2;
    total *= 2;

    localStorage.setItem('counter', counter);
    sessionStorage.setItem('total', total);
}

sessionStorage.clear();

console.log(localStorage.getItem('counter'));
console.log(sessionStorage.getItem('total'));
```

Consider the below JavaScript program.

```javascript
class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(`${this.name} makes a noise.`);
  }
}

class Dog extends Animal {
  speak() {
    console.log(`${this.name} barks`);
  }
}

const d = new Dog('Rex');
d.speak();
console.log(d.__proto__ === Dog.prototype);
console.log(d.__proto__.__proto__ === Animal.prototype);
```

What will be the output of the above program?

```python
from flask import Flask
from flask_caching import Cache
from time import sleep

config = {
    "CACHE_TYPE": "SimpleCache",
    "CACHE_DEFAULT_TIMEOUT": 180
}

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

@cache.memoize(timeout=180)
def get_data(param):
    sleep(5)
    return f"Data for {param}"

@app.route('/data/<param>')
def data(param):
    result = get_data(param)
    return f"Result: {result}"

if __name__ == '__main__':
    app.run(debug=True)
```
If the application is running on "http://127.0.0.1:5000" and the user visits the URL "http://127.0.0.1:5000/data/test" three times in the following sequence:

```javascript
new Promise((resolve, reject) => {
  const num = 0.6;
  if (num > 0.5) {
    resolve(num);
  } else {
    reject(num);
  }
})
  .then(data => {
    console.log("Step 1:", data);
    if (data > 0.75) {
      return data * 2;
    } else {
      return Promise.reject(new Error("Less than 0.75"));
    }
  })
  .then(data => {
    console.log("Step 2:", data);
    return data + 5;
  })
  .catch(error => {
    console.log("Step 3:", error.message);
    if (error.message === "Less than 0.75") {
      return 1;
    } else {
      throw error;
    }
  });
```
```javascript
})
.then(data => {
    console.log("Step 4:", data);
    if (data === 1) {
        throw new Error("Fallback value");
    } else {
        return data * 3;
    }
})
.catch(error => {
    console.log("Step 5:", error.message);
    return "Error handled";
})
.finally(() => {
    console.log("Step 6: Finally block executed");
})
```

src/store/index.js:
```javascript
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    value: "",
  },
  mutations: {
    setValue(state, payload) {
      state.value = payload;
    }
  },
  actions: {
    async fetchValue({ commit }) {
      // Simulate async API call
      const response = await new Promise(resolve => setTimeout(() => 
        resolve('API Value'), 500));
      commit('setValue', response);
    }
  }
});
```
src/App.vue:
```html
<template>
  <div>
    <p>{{ value }}</p>
    <button @click="updateValue">Update Value</button>
  </div>
</template>

<script>
export default {
  computed: {
    value() {
      return this.$store.state.value;
    },
  },
  methods: {
    async updateValue() {
      await this.$store.dispatch('fetchValue');
    },
  },
};
</script>
```
After running "npm run serve", if you click the "Update Value" button, what will be displayed in the `<p>` tag?

Consider the below JavaScript code.

```javascript
async function newFetch(url) {
  try {
    console.log(url)
    const res = await fetch(url)
    if (!res.ok) {
      throw new Error(`HTTP Error: ${res.status}`)
    }
    try {
      const data = await res.json()
      console.log(data)
    } catch {
      throw new Error('Error')
    }
  } catch {
    throw new Error('Data is not JSON serializable')
  }
}

newFetch('https://example.com/api/users/23').catch((err) => {
  console.error(err)
})
```

Suppose the API URL "https://example.com/api/users/23" returns a valid HTML output. What will be logged on to console?

Consider the following Flask application with Redis caching. Redis is running
normally on port 6379.

```python
from flask import Flask, jsonify
from flask_caching import Cache

app = Flask(__name__)
app.config['CACHE_TYPE'] = 'redis'
app.config['CACHE_REDIS_HOST'] = 'localhost'
app.config['CACHE_REDIS_PORT'] = 6379
cache = Cache(app)

def compute_value(x, y):
    result = x * y
    return result

@app.route('/compute/<int:x>/<int:y>')
@cache.cached(timeout=60, key_prefix='compute')
def compute(x, y):
    result = compute_value(x, y)
    return jsonify({'result': result})

if __name__ == '__main__':
    app.run(debug=True, port=5000)
```

Suppose the application is running on port 8080.

What will be rendered inside router-view for the URL
"http://127.0.0.1:8080/#/profile/1235"?

Suppose the application is running
on port 8080. What will be rendered
inside router-view for the URL
"http://127.0.0.1:8080/#/profile/Arnav"?