JavaScript

Memory and Performance Characteristics:

// Primitives are immutable
let str = "hello";
str[0] = "H"; // This won't change the string
console.log(str); // Still "hello"

// Value comparison vs reference comparison
let a = "text";
let b = "text";
console.log(a === b); // true - primitives compared by value

// Memory efficiency
let n1 = 5;
let n2 = n1; // Creates a new copy in memory
n1 = 10;
console.log(n2); // Still 5, not affected by n1
        

Scope Implementation:

// var: Function-scoped (not block-scoped)
function scopeDemo() {
  var x = 1;
  
  if (true) {
    var x = 2;  // Same variable as above - redefined
    console.log(x);  // 2
  }
  
  console.log(x);  // 2 - the if block modified the outer x
}

// let and const: Block-scoped
function blockScopeDemo() {
  let x = 1;
  const y = 1;
  
  if (true) {
    let x = 2;  // Different variable from outer x (shadowing)
    const y = 2;  // Different variable from outer y (shadowing)
    console.log(x, y);  // 2, 2
  }
  
  console.log(x, y);  // 1, 1 - the if block didn't affect these
}
        

// var hoisting - declaration is hoisted and initialized with undefined
console.log(a); // undefined (doesn't throw error)
var a = 5;

// let/const hoisting - declaration is hoisted but not initialized
// console.log(b); // ReferenceError: Cannot access 'b' before initialization
let b = 5;

// This area between hoisting and declaration is the "Temporal Dead Zone" (TDZ)
function tdz() {
  // TDZ for x starts here
  const func = () => console.log(x); // x is in TDZ here
  // TDZ for x continues...
  let x = 'value'; // TDZ for x ends here
  func(); // Works now: 'value'
}
        

// Re-declaration
var x = 1;
var x = 2; // Valid

let y = 1;
// let y = 2; // SyntaxError: Identifier 'y' has already been declared

// Const with objects
const obj = { prop: 'value' };
obj.prop = 'new value'; // Valid - the binding is immutable, not the value
// obj = {}; // TypeError: Assignment to constant variable

// Object.freeze() for true immutability
const immutableObj = Object.freeze({ prop: 'value' });
immutableObj.prop = 'new value'; // No error but doesn't change (silent in non-strict mode)
console.log(immutableObj.prop); // 'value'
        

var globalVar = 'attached';
let globalLet = 'not attached';

console.log(window.globalVar); // 'attached'
console.log(window.globalLet); // undefined
        

// With var - single binding for the entire loop
var functions = [];
for (var i = 0; i < 3; i++) {
  functions.push(function() { console.log(i); });
}
functions.forEach(f => f()); // Logs: 3, 3, 3

// With let - new binding for each iteration
functions = [];
for (let i = 0; i < 3; i++) {
  functions.push(function() { console.log(i); });
}
functions.forEach(f => f()); // Logs: 0, 1, 2
        

Syntax:

function functionName(parameters) {
    // function body
}
        

Syntax:

// Anonymous function expression
const functionName = function(parameters) {
    // function body
};

// Named function expression
const functionName = function innerName(parameters) {
    // function body
    // innerName is only accessible within this function
};
        

How Execution Context Processes These Functions:

console.log(declaredFn); // [Function: declaredFn]
console.log(expressionFn); // undefined (only the variable is hoisted, not the function)

function declaredFn() { return "I'm hoisted completely"; }
const expressionFn = function() { return "I'm not hoisted"; };

// This is essentially what happens behind the scenes:
// CREATION PHASE:
// 1. declaredFn = function() { return "I'm hoisted completely"; }
// 2. expressionFn = undefined
// EXECUTION PHASE:
// 3. console.log(declaredFn) → [Function: declaredFn]
// 4. console.log(expressionFn) → undefined
// 5. expressionFn = function() { return "I'm not hoisted"; };
        

// Named function expression with recursion
const factorial = function calc(n) {
    return n <= 1 ? 1 : n * calc(n - 1); // Using internal name for recursion
};

console.log(factorial(5)); // 120
console.log(calc); // ReferenceError: calc is not defined
        

console.log(fnExpr); // ReferenceError: Cannot access 'fnExpr' before initialization
const fnExpr = function() {};

// With var (no TDZ, but still undefined):
console.log(oldFnExpr); // undefined (not a ReferenceError)
var oldFnExpr = function() {};
        

Conceptual Structure:

ExecutionContext = {
    LexicalEnvironment: {
        EnvironmentRecord: {/* variable and function declarations */},
        OuterReference: /* reference to parent lexical environment */
    },
    VariableEnvironment: { /* for var declarations */ },
    ThisBinding: /* value of 'this' */
}
        

// Global scope
var globalVar = "I'm global";
let globalLet = "I'm also global but not a property of window";
const globalConst = "I'm also global but not a property of window";

console.log(window.globalVar); // "I'm global"
console.log(window.globalLet); // undefined
console.log(window.globalConst); // undefined

// Implication: global variables created with var pollute the global object
        

// module.js
export const moduleVar = "I'm module scoped";
const privateVar = "I'm also module scoped but not exported";

// main.js
import { moduleVar } from './module.js';
console.log(moduleVar); // "I'm module scoped"
console.log(privateVar); // ReferenceError: privateVar is not defined
        

function outer() {
    var functionScoped = "I'm function scoped";
    let alsoFunctionScoped = "Me too";
    
    function inner() {
        // inner can access variables from its own scope and outer scopes
        console.log(functionScoped); // "I'm function scoped"
    }
    
    inner();
}

outer();
console.log(functionScoped); // ReferenceError: functionScoped is not defined
        

function blockScopeDemo() {
    // Function scope
    var functionScoped = "Available in the whole function";
    
    if (true) {
        // Block scope
        let blockScoped = "Only available in this block";
        const alsoBlockScoped = "Same here";
        var notBlockScoped = "Available throughout the function";
        
        console.log(blockScoped); // "Only available in this block"
        console.log(functionScoped); // "Available in the whole function"
    }
    
    console.log(functionScoped); // "Available in the whole function"
    console.log(notBlockScoped); // "Available throughout the function"
    console.log(blockScoped); // ReferenceError: blockScoped is not defined
}
        

const outerVar = "Outer";

function example() {
    const innerVar = "Inner";
    
    function innerFunction() {
        console.log(outerVar); // "Outer" - accessing from outer scope
        console.log(innerVar); // "Inner" - accessing from parent function scope
    }
    
    return innerFunction;
}

const closureFunction = example();
closureFunction();
// Even when called outside example(), innerFunction still has access 
// to variables from its lexical scope (where it was defined)
        

// What we write:
console.log(hoistedVar); // undefined (not an error!)
console.log(notHoisted); // ReferenceError: Cannot access before initialization
hoistedFunction(); // "I work!"
notHoistedFunction(); // TypeError: not a function

var hoistedVar = "I'm hoisted but not initialized";
let notHoisted = "I'm not hoisted";

function hoistedFunction() { console.log("I work!"); }
var notHoistedFunction = function() { console.log("I don't work before definition"); };

// How the engine interprets it:
/*
var hoistedVar;
function hoistedFunction() { console.log("I work!"); }
var notHoistedFunction;

console.log(hoistedVar);
console.log(notHoisted);
hoistedFunction();
notHoistedFunction();

hoistedVar = "I'm hoisted but not initialized";
let notHoisted = "I'm not hoisted";
notHoistedFunction = function() { console.log("I don't work before definition"); };
*/
        

// TDZ for x begins here
const func = () => console.log(x); // x is in TDZ
let y = 1; // y is defined, x still in TDZ
// TDZ for x ends at the next line
let x = 2; // x is now defined
func(); // Works now: logs 2
        

function createCounter() {
    let count = 0; // private variable
    
    return {
        increment: function() { return ++count; },
        decrement: function() { return --count; },
        getValue: function() { return count; }
    };
}

const counter = createCounter();
console.log(counter.getValue()); // 0
counter.increment();
console.log(counter.getValue()); // 1
console.log(counter.count); // undefined - private variable
        

const global = "I'm global";

function outer() {
    const outerVar = "I'm in outer";
    
    function middle() {
        const middleVar = "I'm in middle";
        
        function inner() {
            const innerVar = "I'm in inner";
            // Scope chain lookup:
            console.log(innerVar); // Found in current scope
            console.log(middleVar); // Found in parent scope
            console.log(outerVar);  // Found in grandparent scope
            console.log(global);    // Found in global scope
            console.log(undeclared); // Not found anywhere: ReferenceError
        }
        inner();
    }
    middle();
}
        

Performance optimization in hot loops:

// Less efficient - traverses scope chain each time
function inefficientSum(arr) {
    const length = arr.length;
    let sum = 0;
    for (let i = 0; i < length; i++) {
        sum += arr[i];
    }
    return sum;
}

// More efficient - caches values in registers
function efficientSum(arr) {
    let sum = 0;
    let length = arr.length;
    let i = 0;
    let value;
    
    while (i < length) {
        value = arr[i];
        sum += value;
        i++;
    }
    return sum;
}
        

// Array literal - most efficient
const arr1 = [1, 2, 3];

// Array constructor with elements
const arr2 = new Array(1, 2, 3);

// Array constructor with single number creates sparse array with length
const sparseArr = new Array(10000); // Creates array with length 10000 but no elements

// Array.from - creates from array-likes or iterables
const fromStr = Array.from("hello"); // ["h", "e", "l", "l", "o"]
const mapped = Array.from([1, 2, 3], x => x * 2); // [2, 4, 6]

// Array.of - fixes Array constructor confusion
const nums = Array.of(5); // [5] (not an empty array with length 5)
        

Efficient Array Manipulation

// Performance difference between methods:
const arr = [];
console.time("push");
for (let i = 0; i < 1000000; i++) {
  arr.push(i);
}
console.timeEnd("push");

const arr2 = [];
console.time("length assignment");
for (let i = 0; i < 1000000; i++) {
  arr2[arr2.length] = i;
}
console.timeEnd("length assignment");

// Preallocating arrays for performance
const prealloc = new Array(1000000);
console.time("preallocated fill");
for (let i = 0; i < prealloc.length; i++) {
  prealloc[i] = i;
}
console.timeEnd("preallocated fill");

// Batch operations with splice
const values = [0, 1, 2, 3, 4];
// Replace 3 items starting at index 1 with new values
values.splice(1, 3, "a", "b"); // [0, "a", "b", 4]
        

// Typed Arrays for performance-critical numerical operations
const int32Array = new Int32Array(10);
const float64Array = new Float64Array([1.1, 2.2, 3.3]);

// Operating on typed arrays
int32Array[0] = 42;
int32Array.set([1, 2, 3], 1); // Set multiple values starting at index 1
console.log(int32Array); // Int32Array [42, 1, 2, 3, 0, 0, 0, 0, 0, 0]
        

// DOM collection example (array-like)
const divs = document.querySelectorAll("div");

// Converting array-likes to arrays - performance comparison
console.time("slice");
const arr1 = Array.prototype.slice.call(divs);
console.timeEnd("slice");

console.time("from");
const arr2 = Array.from(divs);
console.timeEnd("from");

console.time("spread");
const arr3 = [...divs];
console.timeEnd("spread");

// Custom iterable that works with array operations
const range = {
  from: 1,
  to: 5,
  [Symbol.iterator]() {
    return {
      current: this.from,
      last: this.to,
      next() {
        if (this.current <= this.last) {
          return { done: false, value: this.current++ };
        } else {
          return { done: true };
        }
      }
    };
  }
};

// Works with array spread and iteration methods
const rangeArray = [...range]; // [1, 2, 3, 4, 5]
        

// Object literals - creates object with direct properties
const obj1 = { a: 1, b: 2 };

// Constructor functions - creates object with prototype
function Person(name) {
  this.name = name;
}
Person.prototype.greet = function() {
  return `Hello, I am ${this.name}`;
};
const person1 = new Person("Alex");

// Object.create - explicitly sets the prototype
const proto = { isHuman: true };
const obj2 = Object.create(proto);
obj2.name = "Sam"; // own property

// Classes (syntactic sugar over constructor functions)
class Vehicle {
  constructor(make) {
    this.make = make;
  }
  
  getMake() {
    return this.make;
  }
}
const car = new Vehicle("Toyota");

// Factory functions - produce objects without new keyword
function createUser(name, role) {
  // Private variables through closure
  const id = Math.random().toString(36).substr(2, 9);
  
  return {
    name,
    role,
    getId() { return id; }
  };
}
const user = createUser("Alice", "Admin");
        

const user = { name: "John" };

// Adding a property with custom descriptor
Object.defineProperty(user, "age", {
  value: 30,
  writable: true,       // can be changed
  enumerable: true,     // shows up in for...in loops
  configurable: true    // can be deleted and modified
});

// Adding multiple properties at once
Object.defineProperties(user, {
  "role": {
    value: "Admin",
    writable: false     // read-only property
  },
  "id": {
    value: "usr123",
    enumerable: false   // hidden in iterations
  }
});

// Creating non-extensible objects
const config = { apiKey: "abc123" };
Object.preventExtensions(config);  // Can't add new properties
// config.newProp = "test";  // Error in strict mode

// Sealing objects
const settings = { theme: "dark" };
Object.seal(settings);  // Can't add/delete properties, but can modify existing ones
settings.theme = "light";  // Works
// delete settings.theme;  // Error in strict mode

// Freezing objects
const constants = { PI: 3.14159 };
Object.freeze(constants);  // Completely immutable
// constants.PI = 3;  // Error in strict mode
        

// Understanding prototype chain
function Animal(type) {
  this.type = type;
}

Animal.prototype.getType = function() {
  return this.type;
};

function Dog(name) {
  Animal.call(this, "dog");
  this.name = name;
}

// Setting up prototype chain
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;  // Fix constructor reference

Dog.prototype.bark = function() {
  return `${this.name} says woof!`;
};

const myDog = new Dog("Rex");
console.log(myDog.getType());  // "dog" - found on Animal.prototype
console.log(myDog.bark());     // "Rex says woof!" - found on Dog.prototype

// Property lookup performance implications
console.time("own property");
for (let i = 0; i < 1000000; i++) {
  const x = myDog.name;  // Own property - fast
}
console.timeEnd("own property");

console.time("prototype property");
for (let i = 0; i < 1000000; i++) {
  const x = myDog.getType();  // Prototype chain lookup - slower
}
console.timeEnd("prototype property");
        

// Object merging and cloning
const defaults = { theme: "light", fontSize: 12 };
const userPrefs = { theme: "dark" };

// Shallow merge
const shallowMerged = Object.assign({}, defaults, userPrefs);

// Deep cloning (with nested objects)
function deepClone(obj) {
  if (obj === null || typeof obj !== "object") return obj;
  
  if (Array.isArray(obj)) {
    return obj.map(item => deepClone(item));
  }
  
  const cloned = {};
  for (const key in obj) {
    if (Object.prototype.hasOwnProperty.call(obj, key)) {
      cloned[key] = deepClone(obj[key]);
    }
  }
  return cloned;
}

// Object iteration techniques
const user = {
  name: "Alice",
  role: "Admin",
  permissions: ["read", "write", "delete"]
};

// Only direct properties (not from prototype)
console.log(Object.keys(user));         // ["name", "role", "permissions"]
console.log(Object.values(user));       // ["Alice", "Admin", ["read", "write", "delete"]]
console.log(Object.entries(user));      // [["name", "Alice"], ["role", "Admin"], ...]

// Direct vs prototype properties
for (const key in user) {
  const isOwn = Object.prototype.hasOwnProperty.call(user, key);
  console.log(`${key}: ${isOwn ? "own" : "inherited"}`);
}

// Proxies for advanced object behavior
const handler = {
  get(target, prop) {
    if (prop in target) {
      return target[prop];
    }
    return `Property "${prop}" doesn't exist`;
  },
  set(target, prop, value) {
    if (prop === "age" && typeof value !== "number") {
      throw new TypeError("Age must be a number");
    }
    target[prop] = value;
    return true;
  }
};

const userProxy = new Proxy({}, handler);
userProxy.name = "John";
userProxy.age = 30;
console.log(userProxy.name);       // "John"
console.log(userProxy.unknown);    // "Property "unknown" doesn't exist"
// userProxy.age = "thirty";       // TypeError: Age must be a number
        

// Hidden Classes in V8 engine
// Objects with same property sequence use same hidden class for optimization
function OptimizedPoint(x, y) {
  // Always initialize properties in same order for performance
  this.x = x;
  this.y = y;
}

// Avoiding property access via dynamic getter methods
class OptimizedCalculator {
  constructor(a, b) {
    this.a = a;
    this.b = b;
    // Cache result of expensive calculation
    this._sum = a + b;
  }
  
  // Avoid multiple calls to this method in tight loops
  getSum() {
    return this._sum;
  }
}

// Object pooling for high-performance applications
class ObjectPool {
  constructor(factory, reset) {
    this.factory = factory;
    this.reset = reset;
    this.pool = [];
  }
  
  acquire() {
    return this.pool.length > 0 
      ? this.pool.pop() 
      : this.factory();
  }
  
  release(obj) {
    this.reset(obj);
    this.pool.push(obj);
  }
}

// Example usage for particle system
const particlePool = new ObjectPool(
  () => ({ x: 0, y: 0, speed: 0 }),
  (particle) => {
    particle.x = 0;
    particle.y = 0;
    particle.speed = 0;
  }
);
        

Specialized Selection Techniques:

// Element relations (structural navigation)
const parent = element.parentNode;
const nextSibling = element.nextElementSibling;
const prevSibling = element.previousElementSibling;
const children = element.children; // HTMLCollection of child elements

// XPath selection (for complex document traversal)
const result = document.evaluate(
  "//div[@class='container']/p[position() < 3]", 
  document, 
  null, 
  XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, 
  null
);

// Using matches() to test if element matches selector
if (element.matches(".active.highlighted")) {
  // Element has both classes
}

// Finding closest ancestor matching selector
const form = element.closest("form.validated");
        

High-Performance Event Handling Techniques:

// Debouncing events (for resize, scroll, input)
function debounce(fn, delay) {
    let timeoutId;
    return function(...args) {
        clearTimeout(timeoutId);
        timeoutId = setTimeout(() => fn.apply(this, args), delay);
    };
}

// Throttling events (for mousemove, scroll)
function throttle(fn, interval) {
    let lastTime = 0;
    return function(...args) {
        const now = Date.now();
        if (now - lastTime >= interval) {
            lastTime = now;
            fn.apply(this, args);
        }
    };
}

// Using requestAnimationFrame for visual updates
function optimizedScroll() {
    let ticking = false;
    window.addEventListener("scroll", function() {
        if (!ticking) {
            requestAnimationFrame(function() {
                // Update visuals based on scroll position
                updateElements();
                ticking = false;
            });
            ticking = true;
        }
    });
}

// Example usage
window.addEventListener("resize", debounce(function() {
    recalculateLayout();
}, 250));

document.addEventListener("mousemove", throttle(function(event) {
    updateMouseFollower(event.clientX, event.clientY);
}, 16)); // ~60fps
    

Specialized Event Handling:

// IntersectionObserver for visibility events
const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            console.log("Element is visible");
            entry.target.classList.add("visible");
            
            // Optional: stop observing after first visibility
            observer.unobserve(entry.target);
        }
    });
}, {
    threshold: 0.1, // 10% visibility triggers callback
    rootMargin: "0px 0px 200px 0px" // Add 200px margin at bottom
});

// Observe multiple elements
document.querySelectorAll(".lazy-load").forEach(el => {
    observer.observe(el);
});

// Animation events
document.querySelector(".animated").addEventListener("animationend", function() {
    this.classList.remove("animated");
    this.classList.add("completed");
});

// Focus management with focusin/focusout (bubbling versions of focus/blur)
document.addEventListener("focusin", function(event) {
    if (event.target.matches("input[type=text]")) {
        event.target.closest(".form-group").classList.add("active");
    }
});

document.addEventListener("focusout", function(event) {
    if (event.target.matches("input[type=text]")) {
        event.target.closest(".form-group").classList.remove("active");
    }
});

// Media events
const video = document.querySelector("video");
video.addEventListener("timeupdate", updateProgressBar);
video.addEventListener("ended", showReplayButton);
    

1. if/else if/else

if (condition1) {
    // Executed when condition1 is truthy
} else if (condition2) {
    // Executed when condition1 is falsy and condition2 is truthy
} else {
    // Executed when all previous conditions are falsy
}
        

2. switch

switch (expression) {
    case value1:
        // Code block executed if expression === value1
        break;
    case value2:
        // Code block executed if expression === value2
        break;
    default:
        // Code block executed if no case matches
}
        

Optimization with Object Lookup

For multiple conditions with fixed responses, object lookups are more efficient than lengthy if/else chains:

// Instead of:
if (status === "pending") return "Waiting...";
else if (status === "approved") return "Success!";
else if (status === "rejected") return "Error!";
else return "Unknown status";

// Use:
const statusMessages = {
    pending: "Waiting...",
    approved: "Success!",
    rejected: "Error!"
};
return statusMessages[status] || "Unknown status";
        

for Loop

A classic imperative loop with explicit control over initialization, condition, and iteration steps:

for (let i = 0; i < array.length; i++) {
    // loop body
}
        

Performance considerations: For performance-critical code, caching the array length can avoid recalculating it on each iteration:

for (let i = 0, len = array.length; i < len; i++) {
    // Improved performance as length is cached
}
        

while Loop

Executes as long as the specified condition evaluates to true:

let i = 0;
while (i < array.length) {
    // Process array[i]
    i++;
}
        

Use case: Preferred when the number of iterations is not known beforehand and depends on a dynamic condition.

do...while Loop

Similar to while but guarantees at least one execution of the loop body:

let i = 0;
do {
    // Always executes at least once
    i++;
} while (i < array.length);
        

Use case: Appropriate when you need to ensure the loop body executes at least once regardless of the condition.

for...in Loop

Iterates over all enumerable properties of an object:

for (const key in object) {
    if (Object.prototype.hasOwnProperty.call(object, key)) {
        // Process object[key]
    }
}
        

Important caveats:

• Iterates over all enumerable properties, including those inherited from the prototype chain
• Order of iteration is not guaranteed
• Should typically include hasOwnProperty check to filter out inherited properties
• Not recommended for arrays due to non-integer properties and order guarantees

for...of Loop (ES6+)

Iterates over iterable objects such as arrays, strings, maps, sets:

for (const value of iterable) {
    // Process each value directly
}
        

Technical details:

• Works with any object implementing the iterable protocol (Symbol.iterator)
• Provides direct access to values without dealing with indexes
• Respects the custom iteration behavior defined by the object
• Cannot be used with plain objects unless they implement the iterable protocol

Array.prototype.forEach()

array.forEach((item, index, array) => {
    // Process each item
});
        

Characteristics:

• Cannot be terminated early (no break or continue)
• Returns undefined (doesn't create a new array)
• Cleaner syntax for simple iterations
• Has slightly worse performance than for loops

Other Array Methods

// map - transforms each element and returns a new array
const doubled = array.map(item => item * 2);

// filter - creates a new array with elements that pass a test
const evens = array.filter(item => item % 2 === 0);

// reduce - accumulates values into a single result
const sum = array.reduce((acc, curr) => acc + curr, 0);

// find - returns the first element that satisfies a condition
const firstBigNumber = array.find(item => item > 100);

// some/every - tests if some/all elements pass a condition
const hasNegative = array.some(item => item < 0);
const allPositive = array.every(item => item > 0);
        

Labels, break, and continue

outerLoop: for (let i = 0; i < 3; i++) {
    for (let j = 0; j < 3; j++) {
        if (i === 1 && j === 1) {
            break outerLoop; // Breaks out of both loops
        }
        console.log(`i=${i}, j=${j}`);
    }
}
        

Technical note: Labels allow break and continue to target specific loops in nested structures, providing finer control over complex loop execution flows.

Comprehensive Structure:

try {
  // Potentially error-generating code
} catch (error) {
  // Error handling logic
} finally {
  // Cleanup operations
}
        

1. Selective Catch Handling:

try {
  // Risky code
} catch (error) {
  if (error instanceof TypeError) {
    // Handle type errors
  } else if (error instanceof RangeError) {
    // Handle range errors
  } else {
    // Handle other errors or rethrow
    throw error;
  }
}
        

2. Async Error Handling with try-catch:

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    
    if (!response.ok) {
      throw new Error(`HTTP error: ${response.status}`);
    }
    
    const data = await response.json();
    return data;
  } catch (error) {
    if (error.name === 'AbortError') {
      console.log('Request was aborted');
    } else if (error instanceof SyntaxError) {
      console.log('JSON parsing error');
    } else if (error instanceof TypeError) {
      console.log('Network error');
    } else {
      console.log('Unknown error:', error.message);
    }
    
    // Return a fallback or rethrow
    return { error: true, message: error.message };
  } finally {
    // Clean up resources
  }
}
        

Global Error Handling:

// Browser
window.onerror = function(message, source, lineno, colno, error) {
  console.error('Uncaught error:', error);
  // Send to error monitoring service
  sendErrorToMonitoring(error);
  // Return true to prevent the firing of the default event handler
  return true;
};

// Node.js
process.on('uncaughtException', (error) => {
  console.error('Uncaught Exception:', error);
  // Log error and terminate process gracefully
  logErrorAndExit(error);
});
        

Performance-Optimized Pattern:

// Isolated error-prone operation
function parseConfig(configString) {
  try {
    return JSON.parse(configString);
  } catch (error) {
    logError('Config parsing failed', error);
    return DEFAULT_CONFIG;
  }
}

// Main function remains optimizable
function initializeApp() {
  const config = parseConfig(rawConfigData);
  // Continue with normal flow
}
        

Basic Implementation:

class CustomError extends Error {
  constructor(message) {
    super(message);
    this.name = this.constructor.name;
    
    // Capture stack trace, excluding constructor call from stack
    if (Error.captureStackTrace) {
      Error.captureStackTrace(this, this.constructor);
    }
  }
}
        

Advanced Implementation with Error Classification:

// Base application error
class AppError extends Error {
  constructor(message, options = {}) {
    super(message);
    this.name = this.constructor.name;
    this.code = options.code || 'UNKNOWN_ERROR';
    this.status = options.status || 500;
    this.isOperational = options.isOperational !== false; // Default to true
    this.details = options.details || {};
    
    // Preserve original cause if provided
    if (options.cause) {
      this.cause = options.cause;
    }
    
    if (Error.captureStackTrace) {
      Error.captureStackTrace(this, this.constructor);
    }
  }
}

// Domain-specific errors
class ValidationError extends AppError {
  constructor(message, details = {}, cause) {
    super(message, {
      code: 'VALIDATION_ERROR',
      status: 400,
      isOperational: true,
      details,
      cause
    });
  }
}

class DatabaseError extends AppError {
  constructor(message, operation, entity, cause) {
    super(message, {
      code: 'DB_ERROR',
      status: 500,
      isOperational: true,
      details: { operation, entity },
      cause
    });
  }
}

class AuthorizationError extends AppError {
  constructor(message, permission, userId) {
    super(message, {
      code: 'AUTH_ERROR',
      status: 403,
      isOperational: true,
      details: { permission, userId }
    });
  }
}
        

Central Error Handler:

class ErrorHandler {
  static handle(error, req, res, next) {
    // Log the error
    ErrorHandler.logError(error);
    
    // Determine if operational
    if (error instanceof AppError && error.isOperational) {
      // Send appropriate response for operational errors
      return res.status(error.status).json({
        success: false,
        message: error.message,
        code: error.code,
        ...(process.env.NODE_ENV === 'development' && { stack: error.stack })
      });
    }
    
    // For programming/unknown errors in production
    if (process.env.NODE_ENV === 'production') {
      return res.status(500).json({
        success: false,
        message: 'Internal server error'
      });
    }
    
    // Detailed error for development
    return res.status(500).json({
      success: false,
      message: error.message,
      stack: error.stack
    });
  }
  
  static logError(error) {
    console.error('Error details:', {
      name: error.name,
      message: error.message,
      code: error.code,
      isOperational: error.isOperational,
      stack: error.stack,
      cause: error.cause
    });
    
    // Here you might also log to external services
    // logToSentry(error);
  }
}
        

1. Error Chaining with Cause:

async function getUserData(userId) {
  try {
    const response = await fetch(`https://api.example.com/users/${userId}`);
    
    if (!response.ok) {
      const errorData = await response.json();
      throw new ApiError(
        `Failed to fetch user data: ${errorData.message}`,
        response.status,
        errorData
      );
    }
    
    return await response.json();
  } catch (error) {
    // Chain the error while preserving the original
    if (error instanceof ApiError) {
      throw error; // Pass through domain errors
    } else {
      // Wrap system errors in domain-specific ones
      throw new UserServiceError(
        'User data retrieval failed',
        { userId, operation: 'getUserData' },
        error // Preserve original error as cause
      );
    }
  }
}
        

2. Discriminating Between Error Types:

try {
  await processUserData(userData);
} catch (error) {
  if (error instanceof ValidationError) {
    // Handle validation errors (user input issues)
    showFormErrors(error.details);
  } else if (error instanceof DatabaseError) {
    // Handle database errors
    if (error.details.operation === 'insert') {
      retryOperation(() => processUserData(userData));
    } else {
      notifyAdmins(error);
    }
  } else if (error instanceof AuthorizationError) {
    // Handle authorization errors
    redirectToLogin();
  } else {
    // Unknown error
    reportToBugTracker(error);
    showGenericErrorMessage();
  }
}
        

Error Serialization Pattern:

// Serializing errors
function serializeError(error) {
  return {
    name: error.name,
    message: error.message,
    code: error.code,
    status: error.status,
    details: error.details,
    stack: process.env.NODE_ENV !== 'production' ? error.stack : undefined,
    cause: error.cause ? serializeError(error.cause) : undefined
  };
}

// Deserializing errors
function deserializeError(serializedError) {
  let error;
  
  // Reconstruct based on error name
  switch (serializedError.name) {
    case 'ValidationError':
      error = new ValidationError(
        serializedError.message,
        serializedError.details
      );
      break;
    case 'DatabaseError':
      error = new DatabaseError(
        serializedError.message,
        serializedError.details.operation,
        serializedError.details.entity
      );
      break;
    default:
      error = new AppError(serializedError.message, {
        code: serializedError.code,
        status: serializedError.status,
        details: serializedError.details
      });
  }
  
  // Reconstruct cause if present
  if (serializedError.cause) {
    error.cause = deserializeError(serializedError.cause);
  }
  
  return error;
}
        

Unit Testing Error Behavior:

describe('ValidationError', () => {
  it('should have correct properties', () => {
    const details = { field: 'email', problem: 'invalid format' };
    const error = new ValidationError('Invalid input', details);
    
    expect(error).toBeInstanceOf(ValidationError);
    expect(error).toBeInstanceOf(AppError);
    expect(error).toBeInstanceOf(Error);
    expect(error.name).toBe('ValidationError');
    expect(error.message).toBe('Invalid input');
    expect(error.code).toBe('VALIDATION_ERROR');
    expect(error.status).toBe(400);
    expect(error.isOperational).toBe(true);
    expect(error.details).toEqual(details);
    expect(error.stack).toBeDefined();
  });
  
  it('should preserve cause', () => {
    const originalError = new Error('Original problem');
    const error = new ValidationError('Validation failed', {}, originalError);
    
    expect(error.cause).toBe(originalError);
  });
});
        

Array Methods:

// map - transform each element
const doubled = [1, 2, 3].map(x => x * 2); // [2, 4, 6]

// filter - select elements that pass a test
const evens = [1, 2, 3, 4].filter(x => x % 2 === 0); // [2, 4]

// reduce - accumulate values
const sum = [1, 2, 3].reduce((acc, val) => acc + val, 0); // 6

// sort with custom comparator
[3, 1, 2].sort((a, b) => a - b); // [1, 2, 3]
        

Function Factories:

// Function that returns a specialized function
function multiplier(factor) {
  // Returns a new function that remembers the factor
  return function(number) {
    return number * factor;
  };
}

const double = multiplier(2);
const triple = multiplier(3);

double(5); // 10
triple(5); // 15
        

Function Composition:

// Creates a function that applies functions in sequence
const compose = (...fns) => x => fns.reduceRight((y, f) => f(y), x);

const addOne = x => x + 1;
const double = x => x * 2;
const square = x => x * x;

const pipeline = compose(square, double, addOne);
pipeline(3); // square(double(addOne(3))) = square(double(4)) = square(8) = 64
        

Partial Application:

function partial(fn, ...presetArgs) {
  return function(...laterArgs) {
    return fn(...presetArgs, ...laterArgs);
  };
}

function greet(greeting, name) {
  return `${greeting}, ${name}!`;
}

const sayHello = partial(greet, "Hello");
sayHello("John"); // "Hello, John!"
        

Currying:

// Transforms a function that takes multiple arguments into a sequence of functions
const curry = (fn) => {
  return function curried(...args) {
    if (args.length >= fn.length) {
      return fn.apply(this, args);
    }
    return function(...moreArgs) {
      return curried.apply(this, args.concat(moreArgs));
    };
  };
};

const sum = (a, b, c) => a + b + c;
const curriedSum = curry(sum);

curriedSum(1)(2)(3); // 6
curriedSum(1, 2)(3); // 6
curriedSum(1)(2, 3); // 6
        

Closure Anatomy:

function outerFunction(outerParam) {
  // This variable is part of the closure
  const outerVar = "I'm in the closure";
  
  // This function forms a closure
  function innerFunction(innerParam) {
    // Can access:
    console.log(outerParam);  // Parameter from parent scope
    console.log(outerVar);    // Variable from parent scope
    console.log(innerParam);  // Its own parameter
    console.log(globalVar);   // Global variable
  }
  
  return innerFunction;
}

const globalVar = "I'm global";
const closure = outerFunction("outer parameter");
closure("inner parameter");
        

Closure Variable Independence:

function createFunctions() {
  const funcs = [];
  
  for (let i = 0; i < 3; i++) {
    funcs.push(function() {
      console.log(i);
    });
  }
  
  return funcs;
}

const functions = createFunctions();
functions[0](); // 0
functions[1](); // 1
functions[2](); // 2

// Note: With "var" instead of "let", all would log 3 
// because "var" doesn't have block scope
        

1. Module Pattern (Encapsulation):

const bankAccount = (function() {
  // Private variables
  let balance = 0;
  const minimumBalance = 100;
  
  // Private function
  function validateWithdrawal(amount) {
    return balance - amount >= minimumBalance;
  }
  
  // Public interface
  return {
    deposit: function(amount) {
      balance += amount;
      return balance;
    },
    withdraw: function(amount) {
      if (validateWithdrawal(amount)) {
        balance -= amount;
        return { success: true, newBalance: balance };
      }
      return { success: false, message: "Insufficient funds" };
    },
    getBalance: function() {
      return balance;
    }
  };
})();

bankAccount.deposit(500);
bankAccount.withdraw(200); // { success: true, newBalance: 300 }
// Can't access: bankAccount.balance or bankAccount.validateWithdrawal
        

2. Curry and Partial Application:

// Currying with closures
function curry(fn) {
  return function curried(...args) {
    if (args.length >= fn.length) {
      return fn.apply(this, args);
    }
    
    return function(...moreArgs) {
      return curried.apply(this, [...args, ...moreArgs]);
    };
  };
}

const sum = (a, b, c) => a + b + c;
const curriedSum = curry(sum);

// Each call creates and returns a closure
console.log(curriedSum(1)(2)(3)); // 6
        

3. Memoization:

function memoize(fn) {
  // Cache is preserved in the closure
  const cache = new Map();
  
  return function(...args) {
    const key = JSON.stringify(args);
    
    if (cache.has(key)) {
      console.log("Cache hit!");
      return cache.get(key);
    }
    
    const result = fn.apply(this, args);
    cache.set(key, result);
    return result;
  };
}

const expensiveCalculation = (n) => {
  console.log("Computing...");
  return n * n;
};

const memoizedCalc = memoize(expensiveCalculation);

memoizedCalc(4); // Computing... (returns 16)
memoizedCalc(4); // Cache hit! (returns 16, no computation)
        

4. Asynchronous Execution with Preserved Context:

function fetchDataForUser(userId) {
  // userId is captured in the closure
  return function() {
    console.log(`Fetching data for user ${userId}...`);
    return fetch(`/api/users/${userId}`).then(r => r.json());
  };
}

const getUserData = fetchDataForUser(123);

// Later, possibly in a different context:
button.addEventListener("click", function() {
  getUserData().then(data => {
    // Process user data
    console.log(data);
  });
});
        

Callback Execution Context:

function performOperation(value, callback) {
  // The operation retains access to its lexical environment
  const result = value * 2;
  
  // The callback executes in its original context due to closure
  // but can access local variables from this scope
  callback(result);
}

const multiplier = 10;

performOperation(5, function(result) {
  // This callback maintains access to its lexical environment
  console.log(result * multiplier); // 100
});
        

Error-First Pattern Implementation:

function readFile(path, callback) {
  fs.readFile(path, 'utf8', function(err, data) {
    if (err) {
      // First parameter is the error
      return callback(err);
    }
    // First parameter is null (no error), second is the data
    callback(null, data);
  });
}

readFile('/path/to/file.txt', function(err, content) {
  if (err) {
    return console.error('Error reading file:', err);
  }
  console.log('File content:', content);
});
        

Controlling Execution Context with bind():

class DataProcessor {
  constructor() {
    this.prefix = "Processed: ";
    this.data = [];
  }

  process(items) {
    // Without bind, 'this' would reference the global object
    items.forEach(function(item) {
      this.data.push(this.prefix + item);
    }.bind(this)); // Explicitly bind 'this' to maintain context
    
    return this.data;
  }
  
  // Alternative using arrow functions which lexically bind 'this'
  processWithArrow(items) {
    items.forEach(item => {
      this.data.push(this.prefix + item);
    });
    
    return this.data;
  }
}
        

Throttling Callbacks for Performance:

function throttle(callback, delay) {
  let lastCall = 0;
  
  return function(...args) {
    const now = new Date().getTime();
    
    if (now - lastCall < delay) {
      return; // Ignore calls that come too quickly
    }
    
    lastCall = now;
    return callback(...args);
  };
}

// Usage: Only process scroll events every 100ms
window.addEventListener("scroll", throttle(function(event) {
  console.log("Scroll position:", window.scrollY);
}, 100));
        

Named Functions and Modularization:

// Instead of nesting anonymous functions:
getUserData(userId, function(user) {
  getPermissions(user.id, function(permissions) {
    getContent(permissions, function(content) {
      renderPage(content);
    });
  });
});

// Use named functions:
function handleContent(content) {
  renderPage(content);
}

function handlePermissions(permissions) {
  getContent(permissions, handleContent);
}

function handleUser(user) {
  getPermissions(user.id, handlePermissions);
}

getUserData(userId, handleUser);
        

Promise Constructor Implementation Pattern:

function readFileAsync(path) {
  return new Promise((resolve, reject) => {
    // The executor function runs synchronously
    fs.readFile(path, 'utf8', (err, data) => {
      if (err) {
        // Rejection handlers are triggered
        reject(err);
      } else {
        // Fulfillment handlers are triggered
        resolve(data);
      }
    });
    
    // Code here still runs before the Promise settles
  });
}

// The Promise allows composition
readFileAsync('config.json')
  .then(JSON.parse)
  .then(config => config.database)
  .catch(error => {
    console.error('Configuration error:', error);
    return defaultDatabaseConfig;
  });
        

Resolution Behavior:

const p1 = Promise.resolve(1);

// Returns a new Promise that resolves to 1
const p2 = p1.then(value => value);

// Returns a new Promise that resolves to the result of another Promise
const p3 = p1.then(value => Promise.resolve(value + 1));

// Rejections propagate automatically through chains
const p4 = p1.then(() => {
  throw new Error('Something went wrong');
}).then(() => {
  // This never executes
  console.log('Success!');
}).catch(error => {
  // Control flow transfers here
  console.error('Caught:', error.message);
  return 'Recovery value';
}).then(value => {
  // Executes with the recovery value
  console.log('Recovered with:', value);
});
        

Promise Combinators:

// Promise.all() - Waits for all promises to resolve or any to reject
const fetchAllData = Promise.all([
  fetch('/api/users').then(r => r.json()),
  fetch('/api/products').then(r => r.json()),
  fetch('/api/orders').then(r => r.json())
]);

// Promise.race() - Settles when the first promise settles
const timeoutFetch = (url, ms) => {
  const fetchPromise = fetch(url).then(r => r.json());
  const timeoutPromise = new Promise((_, reject) => {
    setTimeout(() => reject(new Error('Request timeout')), ms);
  });
  
  return Promise.race([fetchPromise, timeoutPromise]);
};

// Promise.allSettled() - Waits for all promises to settle regardless of state
const attemptAll = Promise.allSettled([
  fetch('/api/critical').then(r => r.json()),
  fetch('/api/optional').then(r => r.json())
]).then(results => {
  // Process both fulfilled and rejected results
  results.forEach(result => {
    if (result.status === 'fulfilled') {
      console.log('Success:', result.value);
    } else {
      console.log('Failed:', result.reason);
    }
  });
});

// Promise.any() - Resolves when any promise resolves, rejects only if all reject
const fetchFromMirrors = Promise.any([
  fetch('https://mirror1.example.com/api'),
  fetch('https://mirror2.example.com/api'),
  fetch('https://mirror3.example.com/api')
]).then(response => response.json())
  .catch(error => {
    // AggregateError contains all the individual errors
    console.error('All mirrors failed:', error.errors);
  });
        

Promise Queue for Controlled Concurrency:

class PromiseQueue {
  constructor(concurrency = 1) {
    this.concurrency = concurrency;
    this.running = 0;
    this.queue = [];
  }

  add(promiseFactory) {
    return new Promise((resolve, reject) => {
      // Store the task with its settlers
      this.queue.push({
        factory: promiseFactory,
        resolve,
        reject
      });
      
      this.processQueue();
    });
  }

  processQueue() {
    if (this.running >= this.concurrency || this.queue.length === 0) {
      return;
    }

    // Dequeue a task
    const { factory, resolve, reject } = this.queue.shift();
    this.running++;

    // Execute the promise factory
    try {
      Promise.resolve(factory())
        .then(value => {
          resolve(value);
          this.taskComplete();
        })
        .catch(error => {
          reject(error);
          this.taskComplete();
        });
    } catch (error) {
      reject(error);
      this.taskComplete();
    }
  }

  taskComplete() {
    this.running--;
    this.processQueue();
  }
}

// Usage example:
const queue = new PromiseQueue(2); // Only 2 concurrent requests

const urls = [
  'https://api.example.com/data/1',
  'https://api.example.com/data/2',
  'https://api.example.com/data/3',
  'https://api.example.com/data/4',
  'https://api.example.com/data/5',
];

const results = Promise.all(
  urls.map(url => queue.add(() => fetch(url).then(r => r.json())))
);
        

Promise Memory Optimization:

// Inefficient: Creates unnecessary Promise wrappers
function processItems(items) {
  return items.map(item => {
    return Promise.resolve(item).then(processItem);
  });
}

// Optimized: Avoids unnecessary Promise allocations
function processItemsOptimized(items) {
  // Process items first, only create Promises when needed
  const results = items.map(item => {
    try {
      const result = processItem(item);
      // Only wrap in Promise if result isn't already a Promise
      return result instanceof Promise ? result : Promise.resolve(result);
    } catch (err) {
      return Promise.reject(err);
    }
  });
  
  return results;
}
        

Simplified Promise Implementation:

class SimplePromise {
  constructor(executor) {
    this.state = 'pending';
    this.value = undefined;
    this.reason = undefined;
    this.onFulfilledCallbacks = [];
    this.onRejectedCallbacks = [];

    const resolve = value => {
      if (this.state === 'pending') {
        this.state = 'fulfilled';
        this.value = value;
        this.onFulfilledCallbacks.forEach(callback => callback(this.value));
      }
    };

    const reject = reason => {
      if (this.state === 'pending') {
        this.state = 'rejected';
        this.reason = reason;
        this.onRejectedCallbacks.forEach(callback => callback(this.reason));
      }
    };

    try {
      executor(resolve, reject);
    } catch (error) {
      reject(error);
    }
  }

  then(onFulfilled, onRejected) {
    return new SimplePromise((resolve, reject) => {
      // Handle already settled promises
      if (this.state === 'fulfilled') {
        queueMicrotask(() => {
          try {
            if (typeof onFulfilled !== 'function') {
              resolve(this.value);
            } else {
              const result = onFulfilled(this.value);
              resolvePromise(result, resolve, reject);
            }
          } catch (error) {
            reject(error);
          }
        });
      } else if (this.state === 'rejected') {
        queueMicrotask(() => {
          try {
            if (typeof onRejected !== 'function') {
              reject(this.reason);
            } else {
              const result = onRejected(this.reason);
              resolvePromise(result, resolve, reject);
            }
          } catch (error) {
            reject(error);
          }
        });
      } else {
        // Handle pending promises
        this.onFulfilledCallbacks.push(value => {
          queueMicrotask(() => {
            try {
              if (typeof onFulfilled !== 'function') {
                resolve(value);
              } else {
                const result = onFulfilled(value);
                resolvePromise(result, resolve, reject);
              }
            } catch (error) {
              reject(error);
            }
          });
        });

        this.onRejectedCallbacks.push(reason => {
          queueMicrotask(() => {
            try {
              if (typeof onRejected !== 'function') {
                reject(reason);
              } else {
                const result = onRejected(reason);
                resolvePromise(result, resolve, reject);
              }
            } catch (error) {
              reject(error);
            }
          });
        });
      }
    });
  }

  catch(onRejected) {
    return this.then(null, onRejected);
  }

  static resolve(value) {
    return new SimplePromise(resolve => resolve(value));
  }

  static reject(reason) {
    return new SimplePromise((_, reject) => reject(reason));
  }
}

// Helper function to handle promise resolution procedure
function resolvePromise(result, resolve, reject) {
  if (result instanceof SimplePromise) {
    result.then(resolve, reject);
  } else {
    resolve(result);
  }
}
        

Complete Syntax Comparison:

// Function declaration
function traditional(a, b) {
  return a + b;
}

// Function expression
const traditional2 = function(a, b) {
  return a + b;
};

// Arrow function - block body
const arrow1 = (a, b) => {
  return a + b;
};

// Arrow function - expression body (implicit return)
const arrow2 = (a, b) => a + b;

// Single parameter - parentheses optional
const square = x => x * x;

// No parameters require parentheses
const random = () => Math.random();
        

Lexical this - Deep Dive:

function Timer() {
  this.seconds = 0;
  
  // Regular function creates its own "this"
  setInterval(function() {
    this.seconds++; // "this" refers to the global object, not Timer
    console.log(this.seconds); // NaN or undefined
  }, 1000);
}

function TimerArrow() {
  this.seconds = 0;
  
  // Arrow function inherits "this" from TimerArrow
  setInterval(() => {
    this.seconds++; // "this" refers to TimerArrow instance
    console.log(this.seconds); // 1, 2, 3, etc.
  }, 1000);
}
        

const obj = {
  regularMethod: function() {
    console.log(this); // "this" is the object
    
    // Call-site binding with regular function
    function inner() {
      console.log(this); // "this" is global object (or undefined in strict mode)
    }
    inner();
    
    // Arrow function preserves "this"
    const innerArrow = () => {
      console.log(this); // "this" is still the object
    };
    innerArrow();
  },
  
  arrowMethod: () => {
    console.log(this); // "this" is NOT the object, but the outer scope
  }
};
        

Advanced Array Destructuring:

// Skipping elements
const [first, , third] = [1, 2, 3];

// Default values
const [a, b, c = 3] = [1, 2];

// Swap variables without temporary variable
let x = 1, y = 2;
[x, y] = [y, x];

// Nested destructuring
const [name, [innerValue1, innerValue2]] = ["main", [1, 2]];

// Mixed with rest
const [head, ...tail] = [1, 2, 3, 4];
console.log(head, tail);  // 1, [2, 3, 4]
        

Advanced Object Destructuring:

// Renaming properties
const { name: personName, age: personAge } = { name: "John", age: 30 };

// Default values
const { name, status = "Active" } = { name: "User" };

// Nested destructuring
const {
  name,
  address: { city, zip },
  family: { spouse }
} = {
  name: "Alice",
  address: { city: "Boston", zip: "02108" },
  family: { spouse: "Bob" }
};

// Computing property names dynamically
const prop = "title";
const { [prop]: jobTitle } = { title: "Developer" };
console.log(jobTitle);  // "Developer"
        

Rest Parameters in Functions:

// Rest parameters are real arrays (unlike arguments object)
function sum(...numbers) {
  // numbers is a proper Array with all array methods
  return numbers.reduce((total, num) => total + num, 0);
}

// Can be used after named parameters
function process(first, second, ...remaining) {
  // first and second are individual parameters
  // remaining is an array of all other arguments
}

// Cannot be used anywhere except at the end
// function invalid(first, ...middle, last) {} // SyntaxError

// Arrow functions with rest
const multiply = (multiplier, ...numbers) => 
  numbers.map(n => n * multiplier);
        

Rest in Destructuring Patterns:

// Object rest captures "own" enumerable properties
const { a, b, ...rest } = { a: 1, b: 2, c: 3, d: 4 };
console.log(rest);  // { c: 3, d: 4 }

// The rest object doesn't inherit properties from the original
const obj = Object.create({ inherited: "value" });
obj.own = "own value";
const { ...justOwn } = obj;
console.log(justOwn.inherited);  // undefined
console.log(justOwn.own);        // "own value"

// Nested destructuring with rest
const { users: [firstUser, ...otherUsers], ...siteInfo } = {
  users: [{ id: 1 }, { id: 2 }, { id: 3 }],
  site: "example.com",
  isActive: true
};
        

Array Spread Mechanics:

// Spread is more concise than concat and maintains a flat array
const merged = [...array1, ...array2];

// Better than apply for variadic functions
const numbers = [1, 2, 3];
Math.max(...numbers);  // Same as Math.max(1, 2, 3)

// Works with any iterable, not just arrays
const chars = [..."hello"];  // ['h', 'e', 'l', 'l', 'o']
const uniqueChars = [...new Set("hello")];  // ['h', 'e', 'l', 'o']

// Creates shallow copies (references are preserved)
const original = [{ id: 1 }, { id: 2 }];
const copy = [...original];
copy[0].id = 99;  // This affects original[0].id too
        

Object Spread Mechanics:

// Merging objects (later properties override earlier ones)
const merged = { ...obj1, ...obj2, overrideValue: "new" };

// Only copies own enumerable properties
const proto = { inherited: true };
const obj = Object.create(proto);
obj.own = "value";
const copy = { ...obj };  // { own: "value" } only

// With getters, the values are evaluated during spread
const withGetter = {
  get name() { return "dynamic"; }
};
const spread = { ...withGetter };  // { name: "dynamic" }

// Prototype handling with Object.assign vs spread
const withProto = Object.assign(Object.create({ proto: true }), { a: 1 });
const spreadObj = { ...Object.create({ proto: true }), a: 1 };
console.log(Object.getPrototypeOf(withProto).proto);  // true
console.log(Object.getPrototypeOf(spreadObj).proto);  // undefined
        

Prototype Chain Implementation:

// Constructor functions and prototype chain
function Vehicle() {
  this.hasEngine = true;
}

Vehicle.prototype.start = function() {
  return "Engine started!";
};

function Car() {
  // Call parent constructor
  Vehicle.call(this);
  this.wheels = 4;
}

// Set up inheritance
Car.prototype = Object.create(Vehicle.prototype);
Car.prototype.constructor = Car; // Fix the constructor property

// Add method to Car.prototype
Car.prototype.drive = function() {
  return "Car is driving!";
};

// Create instance
const myCar = new Car();

// Property lookup demonstration
console.log(myCar.hasEngine); // true - own property from Vehicle constructor
console.log(myCar.wheels); // 4 - own property
console.log(myCar.start()); // "Engine started!" - inherited from Vehicle.prototype
console.log(myCar.drive()); // "Car is driving!" - from Car.prototype
console.log(myCar.toString()); // "[object Object]" - inherited from Object.prototype

// Visualizing the prototype chain:
// myCar --[[Prototype]]--> Car.prototype --[[Prototype]]--> Vehicle.prototype --[[Prototype]]--> Object.prototype --[[Prototype]]--> null
        

Class Declaration and Its Prototype Equivalent:

// ES6 Class syntax
class Person {
  constructor(name) {
    this.name = name;
  }
  
  greet() {
    return `Hello, my name is ${this.name}`;
  }
  
  static isHuman() {
    return true;
  }
}

// What it compiles to (roughly) under the hood
function Person(name) {
  this.name = name;
}

Person.prototype.greet = function() {
  return `Hello, my name is ${this.name}`;
};

Person.isHuman = function() {
  return true;
};
        

Class Inheritance vs. Prototype Inheritance:

// Class inheritance syntax
class Animal {
  constructor(name) {
    this.name = name;
  }
  
  speak() {
    return `${this.name} makes a sound`;
  }
}

class Dog extends Animal {
  constructor(name, breed) {
    super(name);
    this.breed = breed;
  }
  
  speak() {
    return `${this.name} barks!`;
  }
}

// Equivalent prototype-based implementation
function Animal(name) {
  this.name = name;
}

Animal.prototype.speak = function() {
  return `${this.name} makes a sound`;
};

function Dog(name, breed) {
  // Call parent constructor with current instance as context
  Animal.call(this, name);
  this.breed = breed;
}

// Set up inheritance
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog; // Fix constructor reference

// Override method
Dog.prototype.speak = function() {
  return `${this.name} barks!`;
};