Unit3 - Subjective Questions

The Execution Context is the environment in which JavaScript code is executed. It contains information about the variables, objects, and the this keyword available at a specific time.

There are three types: Global, Function, and Eval execution contexts.

The creation of an Execution Context happens in two phases:

1. Creation Phase (Memory Creation):
   • Window Object & this: The global object and this variable are created.
   • Hoisting: Memory is allocated for variables and functions. Variables declared with var are initialized to undefined, while function declarations are stored fully in memory.
2. Execution Phase (Code Execution):
   • The code is executed line by line.
   • Values are assigned to the variables allocated in the previous phase.
   • Function calls trigger the creation of new functional execution contexts.

Scope Chain is the mechanism JavaScript uses to resolve variable values in nested functions. It consists of the current function's variable object, the variable object of its parent (lexical) environment, and so on, up to the global scope.

How it works:

• Local Search: When a variable is accessed, the engine first looks in the Current Scope.
• Outer Scope: If not found, it moves up to the Outer (Parent) Scope.
• Global Scope: This continues until the Global Scope is reached.
• Reference Error: If the variable is not found in the global scope, a ReferenceError is thrown.

This behavior is determined by Lexical Scoping, meaning the scope is defined by the physical location of the code within the source file.

A Closure is a feature in JavaScript where an inner function has access to the outer (enclosing) function's variables—a scope chain. The closure has three scope chains: it has access to its own scope, the outer function's variables, and the global variables. Crucially, the inner function remembers the environment in which it was created, even after the outer function has finished executing.

Example: Data Privacy

javascript
function createCounter() {
let count = 0; // Private variable
return function() {
count++;
return count;
};
}

const counter = createCounter();
console.log(counter()); // Output: 1
console.log(counter()); // Output: 2
// 'count' cannot be accessed directly from here

In this example, count is hidden from the global scope but accessible to the anonymous returned function.

Comparison of Variable Declarations:

• var:

  • Scope: Function scoped. It ignores block scopes (like if or for).
  • Hoisting: Hoisted to the top of its scope and initialized with undefined. Accessing it before declaration results in undefined.
  • Re-declaration: Can be re-declared and updated.

• let:

  • Scope: Block scoped (valid only within {}).
  • Hoisting: Hoisted but stays in the Temporal Dead Zone (TDZ) until the declaration line is reached. Accessing it before declaration throws a ReferenceError.
  • Re-declaration: Cannot be re-declared in the same scope, but can be updated.

• const:

  • Scope: Block scoped.
  • Hoisting: Hoisted (in TDZ) like let.
  • Re-declaration/Update: Cannot be re-declared or reassigned (immutable reference). Note: Object properties inside a const can still be mutated.

Prototypal Inheritance is a feature where objects inherit properties and methods directly from other objects.

Prototype Chain:
Every JavaScript object has an internal property [[Prototype]] (accessible via __proto__) that points to another object. When a property is accessed:

1. JS checks the object itself.
2. If not found, it checks the object's prototype.
3. It continues up the chain until it reaches Object.prototype (whose prototype is null).

Comparison with Classical Inheritance:

• Classical: Classes are blueprints. Objects are instances of classes. Inheritance defines a taxonomy of types ().
• Prototypal: Objects serve as prototypes for other objects. There are no classes (historically), just objects linking to objects. It is more dynamic and allows properties to be added at runtime.

JavaScript is single-threaded, meaning it has one Call Stack. However, it handles concurrency using the Event Loop model, which involves the browser (or Node.js) runtime environment.

Components:

1. Call Stack: Executes synchronous code (LIFO - Last In, First Out).
2. Web APIs: Handles asynchronous operations (DOM events, setTimeout, fetch). When an async task finishes, the callback is sent to a queue.
3. Callback Queue (Task Queue): Holds callbacks from things like setTimeout ready for execution.
4. Microtask Queue: Holds callbacks from Promises and MutationObserver. Has higher priority than the Callback Queue.

The Event Loop Mechanism:
The Event Loop constantly monitors the Call Stack and the Queues.

• If the Call Stack is empty, the Event Loop checks the Microtask Queue first and executes all tasks there.
• Once the Microtask Queue is empty, it picks the first task from the Callback Queue and pushes it onto the Call Stack.

This cycle allows non-blocking I/O operations.

Both queues hold asynchronous callbacks, but they differ in priority.

• Macrotasks (Task Queue): setTimeout, setInterval, setImmediate, I/O, UI rendering.
• Microtasks: Promise.then, catch, finally, queueMicrotask, MutationObserver.

Execution Rule:
After every macrotask execution (or initially after the script runs), the engine executes all microtasks in the queue before moving to the next macrotask.

Example:
javascript
console.log('Start'); // 1. Sync

setTimeout(() => {
console.log('Macrotask: Timeout'); // 4. Macrotask
}, 0);

Promise.resolve().then(() => {
console.log('Microtask: Promise'); // 3. Microtask
});

console.log('End'); // 2. Sync

Output: Start End Microtask: Promise Macrotask: Timeout.

Callback Hell (or the Pyramid of Doom) occurs when multiple asynchronous operations depend on each other, leading to deeply nested callbacks that are hard to read and debug.

Example of Callback Hell:
javascript
getData(function(a) {
getMoreData(a, function(b) {
getMoreData(b, function(c) {
console.log(c);
});
});
});

Solution: Promises
Promises provide a cleaner way to handle async chains using .then() methods. They represent a value that may be available now, in the future, or never.

Using Promises:
javascript
getData()
.then(a => getMoreData(a))
.then(b => getMoreData(b))
.then(c => console.log(c))
.catch(error => console.error(error));

This results in a linear, readable chain of operations with a centralized error handling mechanism.

Three States of a Promise:

1. Pending: The initial state, neither fulfilled nor rejected.
2. Fulfilled (Resolved): The operation completed successfully.
3. Rejected: The operation failed.

Promise.all(iterable):
This method takes an iterable of promises as an input and returns a single Promise.

• Resolves: When all of the input's promises fulfill. It returns an array of the results.
• Rejects: Immediately if any of the input promises reject (fail-fast behavior).

Usage:
javascript
const p1 = Promise.resolve(3);
const p2 = 42;
const p3 = new Promise((resolve, reject) => {
setTimeout(resolve, 100, 'foo');
});

Promise.all([p1, p2, p3]).then(values => {
console.log(values); // [3, 42, "foo"]
});

Async/Await is syntactic sugar built on top of Promises. It allows asynchronous code to be written and look like synchronous code.

• async keyword: Placed before a function declaration, ensuring the function returns a Promise.
• await keyword: Can only be used inside async functions. It pauses the execution of the function until the Promise is resolved.

Improvement over Promises:

1. Readability: It eliminates the need for .then() chains, making the code look procedural.
2. Error Handling: It allows the use of standard try...catch blocks for async errors, which is more intuitive than .catch().
3. Debugging: Debugging await steps is often easier than stepping through promise callbacks in developer tools.

Arrow Functions provide a concise syntax for writing function expressions.
Syntax: const add = (a, b) => a + b;

Handling of this:

• Regular Functions: The value of this depends on how the function is called (dynamic scoping). If called as a method, this is the object; if called as a standalone function, this is global (or undefined in strict mode).
• Arrow Functions: They do not have their own this. They inherit this from the parent scope at the time they are defined (Lexical Scoping).

Implication: This makes Arrow Functions ideal for callbacks inside methods (like in setTimeout or event listeners) where you want to preserve the context of the outer method without using .bind(this).

Destructuring is a syntax that allows unpacking values from arrays or properties from objects into distinct variables.

1. Object Destructuring:
Extracts properties by name.
javascript
const user = { name: 'Alice', age: 25 };
const { name, age } = user;
// name = 'Alice', age = 25

2. Array Destructuring:
Extracts values by position.
javascript
const colors = ['red', 'green', 'blue'];
const [first, second] = colors;
// first = 'red', second = 'green'

Simplification:
It reduces boilerplate code. Instead of accessing obj.prop repeatedly or using temporary variables like var x = arr[0], you can declare and assign multiple variables in a single line.

Both use the ... syntax but in opposite contexts.

1. Spread Operator (Expands):
Expands an iterable (like an array) into individual elements.

• Use Case: Merging arrays or copying objects.
  javascript
  const arr1 = [1, 2];
  const arr2 = [...arr1, 3, 4]; // [1, 2, 3, 4]

2. Rest Parameter (Collects):
Collects multiple elements and condenses them into a single array element. It must be the last parameter in a function definition.

• Use Case: Handling an indefinite number of function arguments.
  javascript
  function sum(...numbers) {
  return numbers.reduce((acc, curr) => acc + curr, 0);
  }
  sum(1, 2, 3); // 6

Comparison:

Why ES Modules are preferred:

1. Tree Shaking: Because the structure is static, bundlers (like Webpack) can eliminate unused code during the build process.
2. Browser Support: Modern browsers support ES modules natively (<script type="module">).
3. Standardization: It is the official ECMAScript standard for JavaScript modules.

The Temporal Dead Zone (TDZ) is the time span between the entering of a scope (block) and the actual declaration of a variable within that scope.

Affected Declarations:

• let
• const
• class

Behavior:
Unlike var, which is hoisted and initialized to undefined, let and const are hoisted but uninitialized. Attempting to access them in the TDZ throws a ReferenceError.

Why?
It helps catch programming errors (accessing data before it exists) and enforces better coding practices. It also makes const work properly (it shouldn't change from undefined to a value).

Currying is a functional programming technique where a function with multiple arguments is transformed into a sequence of functions, each taking a single argument.

mathematically:

Implementation using Closures:
Since inner functions retain access to outer scopes, currying relies on closures to remember previous arguments.

Example:
javascript
// Normal function
function multiply(a, b) {
return a * b;
}

// Curried function
function curriedMultiply(a) {
return function(b) {
return a * b;
}
}

const double = curriedMultiply(2); // Closure remembers a = 2
console.log(double(5)); // Output: 10

Template Literals are string literals allowing embedded expressions, declared with backticks (`). They support multi-line strings and string interpolation ${variable}.

Tagged Templates:
A more advanced form where you parse a template literal with a function. The tag function receives the array of string parts and the interpolated values.

Example:
javascript
function highlight(strings, ...values) {
let str = '';
strings.forEach((string, i) => {
str += string + (values[i] ? <b>${values[i]}</b> : '');
});
return str;
}

const name = 'John';
const output = highlightHello ${name}, welcome!;
// Output: "Hello <b>John</b>, welcome!"

This is commonly used in libraries like Styled Components.

Output: 3, 3, 3

Reasoning:

1. var Scope: The variable i is declared with var, making it function-scoped (or global here). There is only one shared i variable for the loop.
2. Asynchronous Execution: The setTimeout callback is pushed to the Macrotask queue. The loop completes synchronously first. By the time the loop ends, i has incremented to 3.
3. Execution: When the callbacks run after 1 second, they reference the shared i, which is now 3.

Fix using let (Block Scope):
javascript
for (let i = 0; i < 3; i++) {
setTimeout(() => console.log(i), 1000);
}

Reason: let creates a new lexical scope for each iteration of the loop, so each callback captures a different value of i (0, 1, 2).

ES6 Classes provide a cleaner, more familiar syntax for creating objects and dealing with inheritance, similar to languages like Java or C#.

Syntax:
javascript
class Animal {
constructor(name) {
this.name = name;
}
speak() {
console.log(${this.name} speaks.);
}
}

Under the Hood:
Yes and No. Classes are primarily syntactic sugar over the existing Prototypal Inheritance model.

• The class keyword actually creates a function.
• Methods defined in the class are added to the function's prototype property.
• extends handles the prototype chain linking automatically.

However, there are minor differences: Classes are not hoisted, and code inside classes runs in strict mode automatically.

1. Promise.all(iterable):

• Behavior: Waits for all to fulfill. Rejects immediately if one rejects.
• Use Case: When tasks are dependent on each other, and you need all data to proceed (e.g., fetching User and Permissions).

2. Promise.allSettled(iterable):

• Behavior: Waits for all to finish, regardless of whether they fulfilled or rejected. Returns an array of objects describing the outcome of each.
• Use Case: When you want to see the result of all operations and handle errors individually without stopping the flow (e.g., batch notification sending).

3. Promise.race(iterable):

• Behavior: Settles as soon as the first promise settles (resolves or rejects).
• Use Case: Timeouts. Race a fetch request against a 5-second timeout promise.