// var is function-scoped, not block-scoped
for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100);
}
// Prints: 3, 3, 3  (NOT 0, 1, 2 as you'd expect!)
// Because var "i" is shared across all iterations

// let is block-scoped — each loop iteration gets its own "i"
for (let i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100);
}
// Prints: 0, 1, 2  — correct!

// const for values that never get reassigned
const MAX_RECORDS = 50;
const apiEndpoint = '/services/apexrest/orders';

export default class OrderList extends LightningElement {
  orders = [];

  loadOrders() {
    fetchOrders().then(function(result) {
      // 'this' here is undefined or wrong context!
      this.orders = result; // 💥 ERROR
    });
  }
}

export default class OrderList extends LightningElement {
  orders = [];

  loadOrders() {
    fetchOrders().then((result) => {
      // 'this' correctly refers to the component!
      this.orders = result; // ✅ Works!
    });
  }

  // Arrow function syntax variations:
  double = (n) => n * 2;                    // implicit return
  greet = (name) => { return `Hi ${name}`; }; // explicit return
  logClick = () => console.log(this.orders.length);

const message = 'Hello ' + firstName + ', you have ' + orderCount + ' pending orders.';

// Dynamic CSS classes — painful
const cssClass = 'order-card' + (isUrgent ? ' order-card--urgent' : '');

const message = `Hello ${firstName}, you have ${orderCount} pending orders.`;

// Dynamic CSS classes — clean
get cardClass() {
  return `order-card ${this.isUrgent ? 'order-card--urgent' : ''}`;
}

// Building Apex parameters dynamically
const filter = `Status = '${this.selectedStatus}' AND Region = '${this.region}'`;

// Without destructuring
@wire(getRecord, { recordId: '$recordId', fields: FIELDS })
wiredAccount({ data, error }) {  // 👈 destructured params!
  if (data) {
    this.accountName = data.fields.Name.value;
  } else if (error) {
    this.errorMessage = error.body.message;
  }
}

// Destructuring with renaming + defaults
const { Name: accountName, Industry = 'Unknown' } = account;
// accountName = account.Name, Industry defaults to 'Unknown' if missing

// Grab first and rest of an array
const [firstOrder, ...remainingOrders] = this.orders;

// Swap variables (classic use case)
[a, b] = [b, a];

// Destructuring in function parameters — very common!
function renderOrderCard({ Id, Name, Amount, Status }) {
  return `${Name}: $${Amount} (${Status})`;
}

// Directly pushing to a tracked array — unreliable re-render
this.orders.push(newOrder);  // 🚫 same array reference

// Directly mutating an object property
this.account.Name = 'New Name';  // 🚫 same object reference

// Adding to an array immutably
this.orders = [...this.orders, newOrder];

// Removing an item immutably (combine with filter)
this.orders = this.orders.filter(o => o.Id !== orderIdToRemove);

// Updating one field in an object immutably
this.account = { ...this.account, Name: 'New Name' };

// Merging default config with user overrides
const config = { ...defaultConfig, ...userConfig };

// Copying an array before sorting (avoid mutating original)
const sortedOrders = [...this.orders].sort((a,b) => b.Amount - a.Amount);

// Rest in function parameters — collect remaining args into array
function logAll(first, ...others) {
  console.log('First:', first, 'Rest:', others);
}

// Rest in destructuring — separate one field from "everything else"
const { Id, ...otherFields } = accountRecord;
// Id = accountRecord.Id, otherFields = all remaining fields

import { LightningElement, api, track } from 'lwc';

export default class OrderCard extends LightningElement {

  // Class fields = reactive properties
  @api orderId;              // public property (parent can set this)
  @track isExpanded = false;  // private reactive property
  errorMessage = '';       // also reactive (primitives auto-track)

  // Getter = computed property, used in template as {statusLabel}
  get statusLabel() {
    return this.isExpanded ? 'Collapse' : 'Expand';
  }

  // Lifecycle hook (inherited from LightningElement)
  connectedCallback() {
    console.log(`Component connected: ${this.orderId}`);
  }

  // Regular method = event handler (arrow function field syntax)
  handleToggle = () => {
    this.isExpanded = !this.isExpanded;
  };
}

// baseListComponent.js — shared base class
export default class BaseListComponent extends LightningElement {
  isLoading = false;

  async fetchWithLoading(apexMethod) {
    this.isLoading = true;
    try {
      return await apexMethod();
    } finally {
      this.isLoading = false;
    }
  }
}

// orderList.js — extends the shared base
import BaseListComponent from 'c/baseListComponent';

export default class OrderList extends BaseListComponent {
  // inherits isLoading and fetchWithLoading() automatically!
}

// file: utils/formatters.js
export function formatCurrency(amount) {
  return new Intl.NumberFormat('en-IN', {
    style: 'currency', currency: 'INR'
  }).format(amount);
}

export const MAX_PAGE_SIZE = 50;

// file: orderList.js — import with curly braces, names must match
import { formatCurrency, MAX_PAGE_SIZE } from 'c/formatters';

// Every LWC component file has exactly ONE default export
export default class OrderList extends LightningElement {
  // ...
}

// Salesforce-specific module imports you'll use constantly:
import { LightningElement, api, track, wire } from 'lwc';
import getOrders from '@salesforce/apex/OrderController.getOrders';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import { NavigationMixin } from 'lightning/navigation';
import ORDER_STATUS_FIELD from '@salesforce/schema/Order__c.Status__c';
import companyLogo from '@salesforce/resourceUrl/companyLogo';