Add JavaScript Zero to Hero course content

9 teaching modules: basics (variables, types, operators),
control flow, iteration, collections (arrays, objects, Map, Set),
functions (closures, higher-order, callbacks), OOP (classes,
inheritance, private fields), error handling, async (Promises,
async/await), and DOM manipulation. Part of the Zero to Hero
course family.

Author: Edrzapi

.gitignore

@@ -0,0 +1,7 @@
+node_modules/
+.env
+*.log
+.DS_Store
+Thumbs.db
+.idea/
+.vscode/

README.md

@@ -0,0 +1,148 @@
+# JavaScript Zero to Hero
+
+A structured teaching repository covering JavaScript from variables and types through to async/await, DOM manipulation, and ES6+ patterns. Each module is a standalone, runnable file with inline commentary. Part of the Zero to Hero course family.
+
+---
+
+## Who Is This For?
+
+- Developers learning JavaScript for the first time
+- Delegates on instructor-led web development courses
+- Self-learners who want a clear, progressive path through the language
+
+No prior JavaScript experience is assumed. Basic comfort with a command line is helpful.
+
+---
+
+## Prerequisites
+
+| Tool    | Minimum Version |
+|---------|----------------|
+| Node.js | 18+            |
+
+```bash
+node --version
+```
+
+Most modules run in Node.js. The `dom/` module is designed for browser use.
+
+---
+
+## Getting Started
+
+```bash
+# Clone the repository
+git clone git@github.com:Edrzapi/JavaScript_zero_hero.git
+cd JavaScript_zero_hero
+
+# Run any module directly
+node basics/01_variables_types.js
+node functions/01_functions.js
+node async/01_promises_async.js
+```
+
+No dependencies to install — the core modules use only the standard language.
+
+---
+
+## Repository Structure
+
+```
+├── basics/               # Variables, types, coercion, operators, destructuring
+├── control_flow/          # if/else, switch, ternary
+├── iteration/             # for, while, for...of, for...in, forEach
+├── collections/           # Arrays, objects, Map, Set
+├── functions/             # Declarations, arrows, closures, higher-order, callbacks
+├── oop/                   # Classes, inheritance, private fields, static, polymorphism
+├── exceptions/            # try/catch/finally, custom error classes
+├── async/                 # Callbacks, Promises, async/await, Promise.all
+├── dom/                   # Selectors, events, dynamic content (browser)
+├── testing/               # Testing patterns (in development)
+├── apis/                  # HTTP requests (in development)
+└── tasks/                 # Hands-on exercises (in development)
+```
+
+---
+
+## Topics Covered
+
+### Core Language
+
+- **Variables and Types** — `let`/`const`/`var`, primitives, template literals, type coercion, `===` vs `==`, truthy/falsy.
+- **Operators** — Arithmetic, comparison, logical, nullish coalescing (`??`), optional chaining (`?.`), destructuring, spread.
+- **Control Flow** — `if`/`else`, `switch`, ternary expressions.
+- **Iteration** — `for`, `while`, `do...while`, `for...of`, `for...in`, `break`/`continue`, `forEach`.
+
+### Data Structures
+
+- **Arrays** — `push`/`pop`, `map`/`filter`/`reduce`, `find`/`some`/`every`, sorting, spread copy.
+- **Objects** — Dot/bracket notation, `Object.keys`/`values`/`entries`, spread merge.
+- **Map and Set** — Keyed collections, unique values, deduplication.
+
+### Functions
+
+- **Declarations and Arrows** — Hoisting, concise syntax, default parameters, rest parameters.
+- **Higher-Order Functions** — Functions as arguments and return values, factory pattern.
+- **Closures** — Encapsulation via captured scope, counter pattern.
+- **Callbacks** — Async foundation, event-driven patterns.
+
+### Object-Oriented Programming
+
+- **Classes** — Constructors, methods, `toString()`.
+- **Inheritance** — `extends`, `super`, method overriding, `instanceof`.
+- **Encapsulation** — Private fields (`#`), getters/setters.
+- **Polymorphism** — Shape hierarchy, dynamic dispatch.
+- **Static Members** — Class-level methods and properties.
+
+### Error Handling
+
+- **try/catch/finally** — Exception flow, re-throwing, `instanceof` checks.
+- **Custom Errors** — Extending `Error`, typed error handling.
+
+### Async JavaScript
+
+- **Callbacks** — setTimeout, callback pattern, callback hell.
+- **Promises** — `new Promise`, `.then`/`.catch`, chaining.
+- **async/await** — Syntactic sugar, error handling with try/catch.
+- **Promise.all** — Parallel execution, `allSettled`, `race`, `any`.
+
+### DOM (Browser)
+
+- **Selectors** — `querySelector`, `querySelectorAll`, `getElementById`.
+- **Manipulation** — `textContent`, `innerHTML`, `classList`, attributes.
+- **Events** — `addEventListener`, event delegation, form handling.
+- **Dynamic Content** — `createElement`, `appendChild`, `remove`.
+
+---
+
+## Teaching Approach
+
+- Each file is standalone — run it directly with `node` or in a browser console
+- Concepts are explained in comments alongside working code
+- Topics progress from simple to complex within each module
+- No frameworks, no build tools — pure JavaScript throughout
+- DOM module is designed for browser use; all other modules run in Node.js
+
+---
+
+## Tech Stack
+
+| Technology    | Purpose |
+|---------------|---------|
+| JavaScript    | Language (ES2022+) |
+| Node.js 18+   | Runtime for non-browser modules |
+
+No React. No TypeScript. No bundlers. Pure JavaScript.
+
+---
+
+## What's Next?
+
+This course covers JavaScript fundamentals. For React, Express, and applied web development, see the related repositories on this profile.
+
+For the same structured approach in other languages, see the companion courses:
+
+- [Python Zero to Hero](https://github.com/Edrzapi/Python_zero_hero)
+- [Java Zero to Hero](https://github.com/Edrzapi/Java_zero_hero)
+- [C# Zero to Hero](https://github.com/Edrzapi/CS_zero_hero)
+- [SQL Zero to Hero](https://github.com/Edrzapi/SQL_zero_hero)

async/01_promises_async.js

@@ -0,0 +1,123 @@
+// ============================================================
+// Async JavaScript — Callbacks, Promises, async/await
+// ============================================================
+
+// ------------------------------------------------------------
+// Callbacks — the original async pattern
+// ------------------------------------------------------------
+
+console.log("=== Callbacks ===");
+
+function fetchUser(id, callback) {
+    setTimeout(() => {
+        callback({ id, name: "Alice" });
+    }, 100);
+}
+
+fetchUser(1, (user) => {
+    console.log("Callback result:", user);
+});
+
+// Problem: nested callbacks become unreadable ("callback hell")
+
+// ------------------------------------------------------------
+// Promises — cleaner async handling
+// ------------------------------------------------------------
+
+console.log("\n=== Promises ===");
+
+function fetchUserPromise(id) {
+    return new Promise((resolve, reject) => {
+        setTimeout(() => {
+            if (id > 0) {
+                resolve({ id, name: "Bob" });
+            } else {
+                reject(new Error("Invalid ID"));
+            }
+        }, 100);
+    });
+}
+
+// .then() / .catch() chain
+fetchUserPromise(1)
+    .then(user => console.log("Promise result:", user))
+    .catch(err => console.log("Error:", err.message));
+
+// Chaining — each .then() returns a new Promise
+fetchUserPromise(2)
+    .then(user => user.name.toUpperCase())
+    .then(name => console.log("Chained:", name))
+    .catch(err => console.log("Error:", err.message));
+
+// ------------------------------------------------------------
+// async / await — syntactic sugar over Promises
+// ------------------------------------------------------------
+
+console.log("\n=== async/await ===");
+
+async function getUser(id) {
+    try {
+        const user = await fetchUserPromise(id);
+        console.log("Async result:", user);
+        return user;
+    } catch (error) {
+        console.log("Async error:", error.message);
+    }
+}
+
+// Call async function
+getUser(1);
+
+// Error handling with async/await
+async function getUserOrFail() {
+    try {
+        const user = await fetchUserPromise(-1); // will reject
+        console.log(user);
+    } catch (error) {
+        console.log("Caught async error:", error.message);
+    }
+}
+
+getUserOrFail();
+
+// ------------------------------------------------------------
+// Promise.all — run multiple promises in parallel
+// ------------------------------------------------------------
+
+async function fetchAll() {
+    const [user1, user2, user3] = await Promise.all([
+        fetchUserPromise(1),
+        fetchUserPromise(2),
+        fetchUserPromise(3),
+    ]);
+    console.log("\nPromise.all results:", user1, user2, user3);
+}
+
+fetchAll();
+
+// Promise.allSettled — like all, but doesn't short-circuit on failure
+// Promise.race — resolves/rejects with the first settled promise
+// Promise.any — resolves with the first fulfilled promise
+
+// ------------------------------------------------------------
+// Fetch API (browser/Node 18+)
+// ------------------------------------------------------------
+
+// async function fetchPokemon() {
+//     const response = await fetch("https://pokeapi.co/api/v2/pokemon/pikachu");
+//     if (!response.ok) throw new Error(`HTTP ${response.status}`);
+//     const data = await response.json();
+//     console.log(data.name, data.height, data.weight);
+// }
+
+// Uncomment and run with Node 18+ or in a browser console.
+
+// ------------------------------------------------------------
+// Key Rules
+// ------------------------------------------------------------
+
+// 1. async functions always return a Promise
+// 2. await can only be used inside async functions (or top-level in modules)
+// 3. Use try/catch for error handling with await
+// 4. Use Promise.all for parallel operations
+// 5. Never mix callbacks and promises in the same flow

basics/01_variables_types.js

@@ -0,0 +1,114 @@
+// ============================================================
+// Variables, Data Types, and Type Coercion
+// ============================================================
+// JavaScript's type system, variable declarations, and the
+// difference between let, const, and var.
+// ============================================================
+
+// ------------------------------------------------------------
+// Variable Declarations — let, const, var
+// ------------------------------------------------------------
+
+// let: block-scoped, reassignable
+let count = 0;
+count = 1; // allowed
+
+// const: block-scoped, cannot be reassigned
+const PI = 3.14159;
+// PI = 3; // TypeError: Assignment to constant variable
+
+// var: function-scoped, hoisted — avoid in modern JS
+var legacy = "old style";
+
+// Rule: use const by default. Use let when you need to reassign.
+// Never use var in new code.
+
+// ------------------------------------------------------------
+// Primitive Types
+// ------------------------------------------------------------
+
+const num = 42;              // number (integer and float are the same type)
+const decimal = 3.14;        // number
+const text = "Hello";        // string
+const flag = true;           // boolean
+const empty = null;          // null (intentional absence)
+let notSet;                  // undefined (not yet assigned)
+const id = Symbol("id");     // symbol (unique identifier)
+const big = 9007199254740991n; // bigint (arbitrary precision)
+
+console.log("=== Primitive Types ===");
+console.log(typeof num);       // "number"
+console.log(typeof text);      // "string"
+console.log(typeof flag);      // "boolean"
+console.log(typeof empty);     // "object" — this is a known JS quirk
+console.log(typeof notSet);    // "undefined"
+console.log(typeof id);        // "symbol"
+console.log(typeof big);       // "bigint"
+
+// ------------------------------------------------------------
+// Strings — Template Literals
+// ------------------------------------------------------------
+
+const name = "Alice";
+const age = 30;
+
+// Concatenation (old way)
+console.log("Name: " + name + ", Age: " + age);
+
+// Template literal (preferred — backticks)
+console.log(`Name: ${name}, Age: ${age}`);
+console.log(`Next year: ${age + 1}`);
+
+// Multi-line strings
+const multiLine = `
+  This is line one.
+  This is line two.
+`;
+
+// Common string methods
+console.log("\n=== String Methods ===");
+console.log("hello".toUpperCase());          // "HELLO"
+console.log("Hello World".includes("World")); // true
+console.log("Hello".padStart(10, "-"));       // "-----Hello"
+console.log("  spaces  ".trim());             // "spaces"
+console.log("a,b,c".split(","));              // ["a", "b", "c"]
+
+// ------------------------------------------------------------
+// Type Coercion — Implicit Conversion
+// ------------------------------------------------------------
+
+console.log("\n=== Type Coercion ===");
+
+// == (loose equality) performs type coercion
+console.log(5 == "5");    // true — string coerced to number
+console.log(0 == false);  // true — false coerced to 0
+
+// === (strict equality) does NOT coerce — always use this
+console.log(5 === "5");   // false — different types
+console.log(0 === false); // false
+
+// String + number → string concatenation
+console.log("5" + 3);     // "53" (number converted to string)
+
+// Other operators → numeric conversion
+console.log("5" - 3);     // 2 (string converted to number)
+console.log("5" * 2);     // 10
+
+// Rule: always use === and !== to avoid coercion bugs.
+
+// ------------------------------------------------------------
+// Truthy and Falsy Values
+// ------------------------------------------------------------
+
+console.log("\n=== Falsy Values ===");
+// These are ALL the falsy values in JS:
+// false, 0, -0, 0n, "", null, undefined, NaN
+
+if (!"") console.log('Empty string is falsy');
+if (!0)  console.log('Zero is falsy');
+if (!null) console.log('null is falsy');
+
+// Everything else is truthy, including:
+// "0", " ", [], {}, -1
+if ("0")  console.log('"0" is truthy (non-empty string)');
+if ([])   console.log('[] is truthy (empty array)');