# 📚 JavaScript Tutorial - Part 10/10: Modern JavaScript & Beyond
#JavaScript #ES2023 #TypeScript #AdvancedPatterns #WebDev

Welcome to the final part of our comprehensive JavaScript series! This ultimate lesson explores cutting-edge JavaScript features, TypeScript fundamentals, advanced patterns, and pathways for continued learning.

---

## 🔹 Modern JavaScript Features (ES2023+)
### 1. Top-Level Await (ES2022)

// Module.js
const data = await fetch('https://api.example.com/data');
export { data };

// No need for async wrapper!

### 2. Array Find from Last (ES2023)

const numbers = [10, 20, 30, 20, 40];
numbers.findLast(n => n === 20); // 20 (last occurrence)
numbers.findLastIndex(n => n === 20); // 3

### 3. Hashbang Support (ES2023)

#!/usr/bin/env node
// Now executable directly via ./script.js
console.log('Hello from executable JS!');

### 4. WeakRef & FinalizationRegistry (ES2021)

const weakRef = new WeakRef(domElement);
const registry = new FinalizationRegistry(heldValue => {
  console.log(`${heldValue} was garbage collected`);
});

registry.register(domElement, "DOM Element");

### 5. Error Cause (ES2022)

try {
  await fetchData();
} catch (error) {
  throw new Error('Processing failed', { cause: error });
}

---

## 🔹 TypeScript Fundamentals
### 1. Basic Types

let username: string = "Ali";
let age: number = 25;
let isActive: boolean = true;
let scores: number[] = [90, 85, 95];
let user: { name: string; age?: number } = { name: "Ali" };

### 2. Interfaces & Types

interface User {
  id: number;
  name: string;
  email: string;
}

type Admin = User & { 
  permissions: string[];
};

function createUser(user: User): Admin {
  // ...
}

### 3. Generics

function identity<T>(arg: T): T {
  return arg;
}

const result = identity<string>("Hello");

### 4. Type Inference & Utility Types

const user = {
  name: "Ali",
  age: 25
}; // Type inferred as { name: string; age: number }

type PartialUser = Partial<typeof user>;
type ReadonlyUser = Readonly<typeof user>;

---

## 🔹 Advanced Patterns
### 1. Dependency Injection

class Database {
  constructor(private connection: Connection) {}
  
  query(sql: string) {
    return this.connection.execute(sql);
  }
}

const db = new Database(new MySQLConnection());

### 2. Proxy API

const validator = {
  set(target, property, value) {
    if (property === 'age' && typeof value !== 'number') {
      throw new TypeError('Age must be a number');
    }
    target[property] = value;
    return true;
  }
};

const user = new Proxy({}, validator);
user.age = 25; // OK
user.age = "25"; // Throws error

### 3. Observable Pattern

class Observable<T> {
  private subscribers: ((value: T) => void)[] = [];

  subscribe(callback: (value: T) => void) {
    this.subscribers.push(callback);
  }

  next(value: T) {
    this.subscribers.forEach(cb => cb(value));
  }
}

const clicks = new Observable<MouseEvent>();
clicks.subscribe(e => console.log(e.clientX));
document.addEventListener('click', e => clicks.next(e));

---

## 🔹 Web Components
### 1. Custom Elements

class PopupAlert extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        .alert { /* styles */ }
      </style>
      <div class="alert">
        <slot></slot>
      </div>
    `;
  }
}

customElements.define('popup-alert', PopupAlert);

### 2. Template Literals for HTML

function html(strings, ...values) {
  let str = '';
  strings.forEach((string, i) => {
    str += string + (values[i] || '');
  });
  const template = document.createElement('template');
  template.innerHTML = str;
  return template.content;
}

const fragment = html`<div>Hello ${name}</div>`;

---

## 🔹 Performance Patterns
### 1. Virtualization

function renderVirtualList(items, container, renderItem) {
  const visibleItems = getVisibleItems(items, container);
  container.replaceChildren(
    ...visibleItems.map(item => renderItem(item))
  );
}