Closure Mechanism and Practical Applications

A closure is a function that retains access to variables from its outer (enclosing) scope, even after the outer function has finished executing. Key characteristics include:

• Nested function declarations within another function.
• Inner functions can reference parameters and variables defined in the outer function.
• Variables in the outer scope are preserved and not garbage-collected unless no longer referenced.

Common use cases include data encapsulation, creating private variables, implementing modules, debouncing, and throttling logic.

Example: A counter function using closure for state persistence.

function createCounter(initialValue = 0) {
  let count = initialValue;
  return function() {
    return ++count;
  };
}
const counter = createCounter();
console.log(counter()); // Output: 1
console.log(counter()); // Output: 2

Variable and Function Hoisting in JavaScript

JavaScript performs hoisting, moving variable and function declarations to the top of their containing scope during compilation. Function declarations are hoisted before variable declarations. If a local var declaration exists with the same name as an outer variable, it shadows the outer one. Enonymous functions are not hoisted. Hoisting behavior is scoped to block-level contexts and does not interfere across different blocks.

Understanding the this Keyword

The value of this depends on how a function is called:

• In regular function calls, this refers to the global object (window in browsers).
• When used with new, this refers to the newly created instance.
• Enside event handlers, this points to the element triggering the event. Note: In older IE versions using attachEvent, this always refers to window.

Event Propagation Models

Two primary models govern event flow:

• Bubble Phase: Events propagate from the target elemant up through ancestors.
• Capture Phase: Events first trigger at the root and propagate down to the target. Use addEventListener(event, handler, useCapture) to specify phase.

Stack vs Heap Memory

• Stack: Stores primitive values and function call frames. Operates on LIFO (Last In, First Out) principle. Fast access due to short-lived variables.
• Heap: Holds complex data structures like objects and arrays. Memory allocation is dynamic; unreferenced objects become eligible for garbage collection but aren’t immediately freed.

Differences Between map() and forEach()

• forEach() iterates over array elements and executes a callback for each item. It does not return a new array.
• map() transforms each element via a callback and returns a new array. The callback must return a value; otherwise, undefined is inserted.

Array Deduplication Techniques

Several approaches exist to remove duplicate values:

const originalArray = [1, 2, 2, 3, 4, 4, 5];

// Using Set (most efficient)
const unique1 = [...new Set(originalArray)];

// Using filter + indexOf
const unique2 = originalArray.filter((val, idx, arr) => arr.indexOf(val) === idx);

// Using reduce
const unique3 = originalArray.reduce((acc, curr) => 
  acc.includes(curr) ? acc : [...acc, curr], []);

// Using object lookup for performance
const seen = {};
const unique4 = originalArray.filter(item => !seen[item] && (seen[item] = true));

Four Ways to Define Classes in JavaScript

1. Factory Pattern: Returns an object without using new.
2. Constructor Function: Uses new and this to initialize properties.
3. Prototype Pattern: Adds methods to the prototype chain.
4. Hybrid Approach: Combines constructor initialization with prototype method assignment.

Three Methods for Inheritance

1. Prototype Chain Inheritance: Objects inherit from parent via __proto__ or prototype links.
2. Constructor Stealing: Call parent constructor inside child constructor using call() or apply().
3. Combination Inheritance: Mixes constructor inheritance (for instance properties) and prototype inheritance (for shared methods).

Native JavaScript Proficiency Areas

Core knowledge spans:

• Data types, operators, control flow
• Object manipulation and function handling
• Scope, closures, prototype chain
• DOM/BOM interaction
• Asynchronous programming (AJAX, Promises, async/await)
• Memory management, cross-origin issues, module systems
• Canvas rendering, template engines, MVC architecture, routing
• ECMAScript standards and modern syntax

Functional Programming Principles

Functional programming emphasizes writing code using pure functions—functions without side effects—and avoiding mutable state. Key concepts include immutability, higher-order functions, function composition, and declarative style over imperative loops. It enhances predictability and testability.

Scope and Scope Chain

Scope determines which variables are accessible in a given context. JavaScript uses lexical scoping, where inner scopes can access variables from outer scopes but not vice versa. The scope chain resolves variable references upward until reaching the global scope (window). Accessing variables beyond the current scope is prohibited.

Event Delegation

Instead of attaching event listeners to every individual child element, attach one listener to a common ancestor. Use event bubbling to determine which child triggered the event by checking event.target. This improves performance and reduces memory usage, especially with dynamic content.

AJAX Implementation Overview

AJAX enables asynchronous communication between client and server using the XMLHttpRequest object or fetch() API. It sends requests without reloading the page, receives response data (typically JSON), and updates the DOM dynamically using JavaScript, providing a seamless user experience.

Cross-Origin Request Solutions

Cross-origin restrictions can be bypassed via:

• JSONP: Uses <script> tags to fetch data via callbacks.
• CORS: Server sets Access-Control-Allow-Origin headers.
• Proxy Servers: Backend or build-time proxies forward requests.
• postMessage & Message Event: Enables communication between iframes or windows.
• document.domain + iframe: Allows subdomains to share access when domain levels match.
• WebSocket: Full-duplex communication protocol supporting cross-origin.
• Nginx Reverse Proxy / Node.js Middleware: Handle requests transparently.
• Custom Headers: Backend configures appropriate CORS headers.