JavaScript & Web Fundamentals

JAMStack
✓ An architecture consisting of JavaScript, APIs, and pre-rendered Markup.
✓ Decouples the frontend (UI) from the backend (data/logic), allowing them to be
developed and scaled independently.

Variable Declarations & Hoisting

✓ var : Function-scoped. Declarations are hoisted to the top of their function and
initialized with `undefined`.
✓ let / const : Block-scoped (within `{}`). Declarations are hoisted but not initialized,
creating a "Temporal Dead Zone" where they cannot be accessed before the declaration
line.
✓ Hoisting Example: Function declarations are fully hoisted (can be called before defined).
Arrow functions assigned to variables follow the variable's hoisting rules.

hoistedFunction(); // Works
// notHoistedFunction(); // TypeError: notHoistedFunction is not a funct

function hoistedFunction() {
console.log('I am hoisted!');
}

var notHoistedFunction = () => {

console.log('I am not fully hoisted.');
};

Execution Context & `this` Keyword

✓ Global Context: `this` refers to the global object (`window` in browsers).
✓ Function Context (Regular): `this` is determined by how the function is called. If called
as a method of an object (`obj.myMethod()`), `this` is the object. If called as a standalone
function, `this` is the global object (or `undefined` in strict mode).
✓ Function Context (Arrow): Arrow functions do not have their own `this` context. They
inherit `this` from their parent (lexical) scope at the time they are defined.

Explore our developer-friendly HTML to PDF API Printed using PDFCrowd HTML to PDF
Prototypes & Inheritance
✓ JavaScript uses prototype-based inheritance. Every object has a hidden `[[Prototype]]`
link (accessible via `__proto__`) to another object.
✓ When accessing a property, the engine first checks the object itself. If not found, it
checks its prototype, and so on, up the prototype chain.
✓ The `class` syntax is syntactic sugar over this prototype mechanism. `class Dog extends
Animal` sets `Animal.prototype` as the prototype of `Dog.prototype`.

Asynchronous JS
Promises
✓ An object representing the eventual completion (or failure) of an asynchronous
operation.
✓ States: `pending`, `fulfilled` (resolved), or `rejected`.
✓ Handled with `.then()` for success, `.catch()` for errors, and `.finally()` for cleanup code
that runs regardless of outcome.

Promise Chaining Example

✓ The value returned from a `.then()` block is passed as an argument to the next `.then()`.
✓ If a promise is rejected or an error is thrown, the chain jumps to the next `.catch()` block.
✓ A `.catch()` block can "handle" an error and return a normal value, allowing the chain to
continue into subsequent `.then()` blocks.

new Promise((resolve, reject) => {

resolve(10);
})
.then(val => {
console.log("Step 1:", val); // Logs: Step 1: 10
throw new Error("Something went wrong");
return val * 2; // This line is never reached
})
.then(val => {
console.log("Step 2:", val); // This block is skipped
})

Explore our developer-friendly HTML to PDF API Printed using PDFCrowd HTML to PDF
 .catch(err => {
console.log("Caught:", err.message); // Logs: Caught: Something went w
return 50; // Return a new value to continue the chain
})
.then(val => {
console.log("Step 3:", val); // Logs: Step 3: 50
});

`async/await`
✓ Provides a cleaner, more synchronous-looking syntax for working with promises.
✓ The `await` keyword can only be used inside an `async` function. It pauses the function
execution until the promise settles and returns its result.

Vue.js Concepts
Reactivity, Directives, and Data Binding
✓ Reactivity: Vue automatically tracks dependencies and updates the DOM when data
changes.
✓ `v-bind` (or `:`): One-way data binding. Binds an element's attribute to a data property.
✓ `v-model`: Two-way data binding, typically used on form inputs.
Components, Props, and Events
✓ Props: A way to pass data from a parent component down to a child component.
✓ Events (`$emit`): A way for a child component to send a message up to its parent
component.

Vue Lifecycle Hooks

✓ Functions that are executed at specific stages of a component's lifecycle.
✓ `created()`: Runs after the instance is created. Data is reactive, but the DOM has not
been mounted. Good for fetching initial data.
✓ `mounted()`: Runs after the component has been added to the DOM. Useful for DOM
manipulations.

Explore our developer-friendly HTML to PDF API Printed using PDFCrowd HTML to PDF
Vue Router
✓ Dynamic Routes: Defined with a colon (e.g., `path: '/user/:id'`). The dynamic part is
accessible in the component via `this.$route.params.id`.
✓ Nested Routes: A route can have a `children` array of other routes. The parent route's
component needs a `` to render the child component.

// In router configuration
const routes = [
{
path: '/user/:id',
component: User,
children: [
{ path: 'profile', component: UserProfile }, // Renders inside Use
]
}
]

Vuex: State Management

✓ Provides a centralized store for all components in an application.
✓ State: The single source of truth (the data).
✓ Mutations: The only way to change the state. They must be synchronous. Triggered with
`store.commit('mutationName')`.
✓ Actions: Used for asynchronous operations. They commit mutations instead of changing
the state directly. Triggered with `store.dispatch('actionName')`.
✓ Getters: Computed properties for the store. Used to derive state.

Servers, Caching & Communication

Communication Patterns
✓ Short Polling: Client repeatedly asks the server for updates at a fixed interval. Inefficient.
✓ Long Polling: Client asks the server for updates, and the server holds the connection
open until it has an update to send.

Explore our developer-friendly HTML to PDF API Printed using PDFCrowd HTML to PDF
✓ Webhooks: Server-to-server communication. A server sends an HTTP POST request to
a pre-configured URL on another server when an event occurs.
✓ Server-Sent Events (SSE): A one-way, persistent connection from server to client over
HTTP, allowing the server to push updates.
✓ WebSockets: A two-way, full-duplex, persistent connection between client and server.
Task Queues (Celery) & Message Brokers (Redis)
✓ Task Queue: Offloads long-running tasks (like sending emails or processing data) to
background "worker" processes, preventing the main application from blocking.
✓ Message Broker: An intermediary that enables different services to communicate
asynchronously. It decouples the sender (producer) from the receiver (consumer). Redis
is often used as a fast, in-memory message broker.

Caching with Flask-Caching

✓ `@cache.cached()`: Caches the entire response of a Flask view function. The cache key
is typically based on the request URL. Different URLs for the same endpoint will result in
separate cache entries.
✓ `@cache.memoize()`: Caches the return value of any function, not just a view. The
cache key is generated from the function's arguments. This is useful for caching the
results of computationally expensive helper functions.

# Caches the entire response for '/user/123'

@app.route('/user/')
@cache.cached(timeout=60)
def get_user_profile(user_id):
user = fetch_user_from_db(user_id)
return render_template('profile.html', user=user)

# Caches the result of this specific calculation

@cache.memoize(timeout=300)
def calculate_complex_report(user_id):
# ... very slow calculation ...
return report_data

Web Security Concepts

Explore our developer-friendly HTML to PDF API Printed using PDFCrowd HTML to PDF
CORS (Cross-Origin Resource Sharing)
✓ A browser security mechanism that restricts HTTP requests initiated from scripts to a
different origin (domain, protocol, or port) than the one that served the script.
✓ The server must include specific CORS headers (like `Access-Control-Allow-Origin: *`) to
permit cross-origin requests.

CSRF (Cross-Site Request Forgery)

✓ An attack that tricks an authenticated user into submitting a malicious request to a web
application they are logged into.
✓ Mitigation: Use anti-CSRF tokens. The server sends a unique, unpredictable token with
the form, which must be sent back with the request to be considered valid.

XSS (Cross-Site Scripting)

✓ An attack where malicious scripts are injected into otherwise trusted websites.
✓ Mitigation: Always validate and sanitize user input. Escape user-provided content before
rendering it in the HTML to prevent it from being executed as code.

Deeper Dive: Key PYQ Concepts with Examples

`v-if` vs. `v-show`
✓ `v-if` is "true" conditional rendering. It ensures that the element and its child components
are destroyed and re-created during toggles. It has higher toggle costs.
✓ `v-show` always keeps the element in the DOM and toggles its visibility using the CSS
`display` property. It has higher initial render costs but cheaper toggle costs.

REST API Idempotency

✓ An operation is idempotent if making the same request multiple times produces the
same result as making it once.
✓ `GET`, `PUT`, `DELETE` are idempotent. Getting a resource, replacing a resource, or
deleting a resource multiple times has the same effect as doing it once.
✓ `POST` is not idempotent. Making multiple `POST` requests will create multiple new
resources.

Explore our developer-friendly HTML to PDF API Printed using PDFCrowd HTML to PDF
Vue Lifecycle Hook Execution Order
✓ The hooks fire in a predictable sequence. For example, `beforeCreate` -> `created` ->
`beforeMount` -> `mounted`.
✓ In `beforeCreate`, you cannot access `data` or `methods`. In `created`, you can access
`data` but not the DOM element (`this.$el`). In `mounted`, you can access both.

new Vue({
el: '#app',
data: { message: 'Hello' },
beforeCreate() {
console.log('beforeCreate:', this.message); // undefined
},
created() {
console.log('created:', this.message); // 'Hello'
console.log('created $el:', this.$el); // undefined
},
mounted() {
console.log('mounted $el:', this.$el); // The actual DOM element
}
})

`this` Context with `.call()`, `.bind()`, and `.apply()`

✓ These methods allow you to explicitly set the `this` value for a function call, which is
crucial when a function needs to run in the context of a specific object.
✓ `.call(thisContext, arg1, arg2)`: Executes the function immediately with a given `this`
context and arguments provided individually.
✓ `.apply(thisContext, [arg1, arg2])`: Same as `.call()`, but arguments are provided as an
array.
✓ `.bind(thisContext)`: Creates a *new* function that, when called, will have its `this`
context permanently set to the provided value. It does not execute the function
immediately.

Message Broker Architecture

✓ In a system with many services (N), direct point-to-point communication requires up to
N*(N-1)/2 connections, which is complex to manage (O(N²)).

Explore our developer-friendly HTML to PDF API Printed using PDFCrowd HTML to PDF
✓ A central message broker simplifies this. Each service only needs one connection to the
broker. The number of connections grows linearly with the number of services (O(N)),
making the system more scalable and maintainable.

Vue Slots and Data Scope

✓ Content passed into a component's slot is compiled in the **parent's scope**, not the
child's. This means the data used inside the `

Explore our developer-friendly HTML to PDF API Printed using PDFCrowd HTML to PDF