Coding Excerise

Author: learning-zone

coding-exercise/accidental-global.js

@@ -0,0 +1,32 @@
+function foo() {
+  let x = (y = 0); // ⚠️ y becomes a global variable
+  x++;
+  y++;
+  return x;
+}
+
+console.log(foo(), typeof x, typeof y);
+// Output: 1, "undefined", "number"
+
+/**
+ * Explanation:
+ *
+ * 1. `x` is declared using `let`, so it is scoped to the `foo` function.
+ *
+ * 2. `y` is NOT declared using `let`, `var`, or `const`.
+ *    This causes `y` to become a global variable.
+ *
+ * 3. The expression `x = (y = 0)` is evaluated right to left:
+ *    - `y` is assigned `0` (global)
+ *    - `x` is assigned the value of `y` (local)
+ *
+ * 4. `x++` increments the local variable `x` → 1
+ *
+ * 5. `y++` increments the global variable `y` → 1
+ *
+ * 6. The function returns `x`, which is `1`.
+ *
+ * Outside the function:
+ * - `typeof x === "undefined"` (x is function-scoped)
+ * - `typeof y === "number"` (y is global)
+ */

coding-exercise/array-methods-chaining.js

@@ -0,0 +1,30 @@
+const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
+
+const result = numbers
+    .filter(num => num % 2 === 0)  // [2, 4, 6, 8, 10]
+    .map(num => num * 2)            // [4, 8, 12, 16, 20]
+    .reduce((sum, num) => sum + num, 0); // 60
+
+console.log(result); // 60
+
+/**
+ * Explanation:
+ * 
+ * This demonstrates method chaining with array methods in JavaScript.
+ * 
+ * 1. filter() creates a new array with elements that pass the test.
+ *    Here, it keeps only even numbers: [2, 4, 6, 8, 10]
+ * 
+ * 2. map() creates a new array by transforming each element.
+ *    Here, it doubles each number: [4, 8, 12, 16, 20]
+ * 
+ * 3. reduce() reduces the array to a single value.
+ *    Here, it sums all numbers: 4 + 8 + 12 + 16 + 20 = 60
+ * 
+ * 4. Each method returns a new array (except reduce), allowing chaining.
+ * 
+ * 5. This functional programming style is concise and readable.
+ * 
+ * Note: Each method creates a new array, so for large datasets, consider
+ * performance implications. A single loop might be more efficient.
+ */

coding-exercise/async-await-error.js

@@ -0,0 +1,41 @@
+async function fetchData() {
+    throw new Error('Network error');
+}
+
+async function getData() {
+    try {
+        const data = await fetchData();
+        console.log(data);
+        return data;
+    } catch (error) {
+        console.log('Caught:', error.message);
+        return null;
+    }
+}
+
+getData().then(result => {
+    console.log('Result:', result);
+});
+
+// Output:
+// Caught: Network error
+// Result: null
+
+/**
+ * Explanation:
+ * 
+ * This demonstrates error handling with async/await in JavaScript.
+ * 
+ * 1. fetchData() is an async function that throws an error.
+ * 
+ * 2. In getData(), we use try/catch to handle errors from await fetchData().
+ * 
+ * 3. When fetchData() throws an error, it's caught by the catch block,
+ *    which logs the error message and returns null.
+ * 
+ * 4. The .then() receives the return value from getData(), which is null
+ *    because the error was caught and handled.
+ * 
+ * 5. Without try/catch, the error would propagate and could be caught
+ *    with .catch() on the promise chain.
+ */

coding-exercise/class-multiple-constructors.js

@@ -0,0 +1,22 @@
+class Rectangle {
+    constructor(height, width) {
+        this.height = height;
+        this.width = width;
+    }
+
+    constructor(width) {
+        this.width = width;
+    }
+    // Getter
+    get area() {
+        return this.calcArea();
+    }
+    // Method
+    calcArea() {
+        return this.height * this.width;
+    }
+}
+
+const square = new Rectangle(20, 30);
+
+console.log(square.area); // Uncaught SyntaxError: A class may only have one constructor

coding-exercise/closure-counter.js

@@ -0,0 +1,32 @@
+function createCounter() {
+    let count = 0;
+    return function() {
+        count++;
+        return count;
+    };
+}
+
+const counter1 = createCounter();
+const counter2 = createCounter();
+
+console.log(counter1()); // 1
+console.log(counter1()); // 2
+console.log(counter2()); // 1
+console.log(counter1()); // 3
+
+/**
+ * Explanation:
+ * 
+ * This demonstrates closure behavior in JavaScript.
+ * 
+ * 1. createCounter() returns a function that has access to the 'count' variable
+ *    from its outer scope, even after createCounter() has finished executing.
+ * 
+ * 2. Each call to createCounter() creates a new closure with its own 'count' variable.
+ *    So counter1 and counter2 maintain separate counts.
+ * 
+ * 3. counter1() increments its own count: 1, 2, 3
+ *    counter2() has its own separate count: 1
+ * 
+ * This is a classic example of how closures can be used to create private variables.
+ */

coding-exercise/debounce-function/README.md

@@ -0,0 +1,58 @@
+# Debounce Function
+
+## Challenge
+Implement a debounce function that delays the execution of a callback until after a specified delay period has elapsed since the last time it was invoked.
+
+## Problem Description
+Debouncing is a programming practice used to ensure that time-consuming tasks do not fire so often. It limits the rate at which a function can fire.
+
+### Real-World Use Cases
+- **Search Input**: Wait for the user to stop typing before making an API call
+- **Window Resize**: Wait for resize to finish before recalculating layout
+- **Scroll Events**: Reduce the number of scroll event handlers fired
+- **Button Clicks**: Prevent multiple form submissions
+
+## Example
+
+### Input
+```js
+function handleSearch(query) {
+    console.log(`Searching for: ${query}`);
+}
+
+const debouncedSearch = debounce(handleSearch, 500);
+
+// User types rapidly
+debouncedSearch('J');
+debouncedSearch('Ja');
+debouncedSearch('Jav');
+debouncedSearch('JavaScript');
+```
+
+### Output
+```
+// Only executes once after 500ms of the last call
+Searching for: JavaScript
+```
+
+## Requirements
+1. The debounce function should accept a function and a delay time
+2. It should return a new function that delays invoking the original function
+3. Each new call should reset the delay timer
+4. Only the last call should execute after the delay period
+5. The function should preserve the correct `this` context and arguments
+
+## Key Concepts
+- **Closures**: Maintaining state (timeoutId) across function calls
+- **Higher-Order Functions**: Returning a function from a function
+- **setTimeout/clearTimeout**: Managing asynchronous delays
+- **Function Context**: Using `apply()` to preserve `this` binding
+
+## Difference from Throttling
+- **Debounce**: Executes the function only after the calls have stopped for a specified period
+- **Throttle**: Executes the function at most once per specified time interval
+
+## Benefits
+- Improves performance by reducing unnecessary function calls
+- Reduces API calls and server load
+- Provides better user experience by preventing excessive updates

coding-exercise/debounce-function/debounce.js

@@ -0,0 +1,114 @@
+/**
+ * Creates a debounced version of a function that delays its execution
+ * until after a specified delay has elapsed since the last time it was invoked.
+ * 
+ * @param {Function} func - The function to debounce
+ * @param {number} delay - The delay in milliseconds to wait before executing the function
+ * @returns {Function} A debounced version of the original function
+ * 
+ * @example
+ * const debouncedFn = debounce(() => console.log('Hello'), 300);
+ * debouncedFn(); // Won't execute immediately
+ * debouncedFn(); // Resets the timer
+ * debouncedFn(); // Only this call will execute after 300ms
+ */
+function debounce(func, delay) {
+    // Store the timeout ID in closure scope
+    // This variable persists across multiple calls to the returned function
+    let timeoutId;
+    
+    // Return a new function that wraps the original function
+    // ...args collects all arguments passed to this function
+    return function(...args) {
+        // Clear the previous timeout if it exists
+        // This prevents the previous scheduled execution from running
+        // Each new call "resets the timer"
+        clearTimeout(timeoutId);
+        
+        // Schedule a new timeout to execute the function after the delay
+        // This creates a new timer that will execute after 'delay' milliseconds
+        timeoutId = setTimeout(() => {
+            // Execute the original function with the correct context and arguments
+            // func.apply(this, args) ensures:
+            // 1. 'this' context is preserved (important for object methods)
+            // 2. All arguments are passed to the original function
+            func.apply(this, args);
+        }, delay);
+    };
+}
+
+// ============================================
+// EXAMPLE USAGE: Search Input Handler
+// ============================================
+
+/**
+ * Simulates a search API call handler
+ * In a real application, this would make an HTTP request to a search API
+ * 
+ * @param {string} query - The search query string
+ */
+function handleSearch(query) {
+    console.log(`Searching for: ${query}`);
+    // In production, this would be something like:
+    // fetch(`/api/search?q=${query}`).then(...)
+}
+
+// Create a debounced version of handleSearch with 500ms delay
+// This means the actual search will only execute 500ms after the user stops typing
+const debouncedSearch = debounce(handleSearch, 500);
+
+// ============================================
+// DEMONSTRATION: Simulating Rapid User Input
+// ============================================
+
+console.log('User types rapidly...');
+
+// Each call below happens almost instantly (simulating fast typing)
+// But only the LAST call will actually execute after 500ms
+debouncedSearch('J');        // Timer starts, will be cancelled
+debouncedSearch('Ja');       // Previous timer cancelled, new timer starts
+debouncedSearch('Jav');      // Previous timer cancelled, new timer starts
+debouncedSearch('Java');     // Previous timer cancelled, new timer starts
+debouncedSearch('JavaS');    // Previous timer cancelled, new timer starts
+debouncedSearch('JavaSc');   // Previous timer cancelled, new timer starts
+debouncedSearch('JavaScr');  // Previous timer cancelled, new timer starts
+debouncedSearch('JavaScript'); // Previous timer cancelled, final timer starts
+
+console.log('Waiting 500ms...');
+// Only the last call will execute after 500ms delay
+// Expected output after 500ms: "Searching for: JavaScript"
+// 
+// Without debouncing, handleSearch would have been called 8 times!
+// With debouncing, it's called only once - saving 7 unnecessary API calls
+
+/**
+ * Explanation:
+ * 
+ * This demonstrates the debounce pattern in JavaScript.
+ * 
+ * 1. Debouncing delays the execution of a function until after a certain
+ *    amount of time has passed since it was last called.
+ * 
+ * 2. When debouncedSearch is called multiple times in quick succession,
+ *    only the LAST call will execute after the delay period.
+ * 
+ * 3. Each new call clears the previous timeout and sets a new one.
+ * 
+ * 4. Common use cases:
+ *    - Search input: Wait for user to stop typing before making API call
+ *    - Window resize: Wait for resize to finish before recalculating layout
+ *    - Scroll events: Reduce the number of scroll event handlers fired
+ * 
+ * 5. Benefits:
+ *    - Reduces unnecessary function calls
+ *    - Improves performance
+ *    - Reduces API calls and server load
+ * 
+ * 6. The function uses closures to maintain the timeoutId across calls.
+ * 
+ * 7. func.apply(this, args) ensures the original function is called with
+ *    the correct context and arguments.
+ * 
+ * Note: This is different from throttling, which executes the function
+ * at regular intervals regardless of how many times it's called.
+ */