Merge branch 'sudheerj:master' into master

Author: aryamohanan

.github/FUNDING.yml

@@ -0,0 +1,2 @@
+github: [sudheerj]
+custom: https://buymeacoffee.com/sudheerj

.github/workflows/gen-toc.yml

@@ -0,0 +1,36 @@
+name: Generate table of contents
+
+on:
+  pull_request:
+  push:
+    branches:
+      - master
+
+env:
+  BRANCH_NAME: ${{ github.head_ref || github.ref_name }}
+
+jobs:
+  gen-toc:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+        with:
+          ref: ${{ github.head_ref }}
+      - name: Install dependencies
+        run: npm install
+      - name: Generate table of contents
+        run: npm run gen
+      - name: 'Commit changes if required'
+        run: |
+          if ! git diff --quiet README.md; then
+            git config user.email "github-actions[bot]@users.noreply.github.com"
+            git config user.name "GitHub Actions"
+            git add README.md
+            git commit -m "[auto] regenerate table of contents"
+            git push
+            echo "[info] Table of contents updated and committed."
+          else
+            echo "[info] No changes to table of contents."
+          fi
+        working-directory: ${{ github.workspace }}

.gitignore

@@ -1,4 +1,134 @@
 # Cruft
 .DS_Store
-npm-debug.log
-.idea
+.idea
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+.pnpm-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional stylelint cache
+.stylelintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variable files
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+out
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# vuepress v2.x temp and cache directory
+.temp
+.cache
+
+# Docusaurus cache and generated files
+.docusaurus
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# yarn v2
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.*

README.md

@@ -1,8 +1,24 @@
 function foo() {
-    let x = y = 0;
-    x++;
-    y++;
-    return x;
+  let x = (y = 0);
+  x++;
+  y++;
+  return x;
 }
 
-console.log(foo(), typeof x, typeof y);
+console.log(foo(), typeof x, typeof y); //  1, undefined, number
+
+/**
+ * Here's the breakdown:
+    1. Inside the foo function, x is declared using let, which means it's scoped to the function. However, y is not declared with let or var, so it becomes a global variable.
+
+    2. When x = y = 0; is executed, it's interpreted as x = (y = 0);, which initializes y as a global variable with the value of 0, and x as a local variable within the function with the value of 0.
+
+    3. x++ increments the local variable x by 1, making it 1.
+
+    4. y++ increments the global variable y by 1, making it 1 as well.
+
+    5. The function returns the value of x, which is 1.
+    
+    However, x is scoped within the function, so typeof x outside of the function will result in undefined.
+    y is a global variable, so typeof y outside of the function will result in number.
+ */

coding-exercise/accidental-global.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/array-methods-chaining.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/async-await-error.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/closure-counter.js

@@ -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