const colors = ['red', 'green', 'blue'];

// Basic -- position-based (first variable gets first element, etc.)
const [first, second, third] = colors;
// first = 'red', second = 'green', third = 'blue'

// Skip elements with empty commas
const [, , lastColor] = colors; // 'blue'

// Rest operator (...) collects remaining elements into a new array
const [primary, ...others] = colors;
// primary = 'red', others = ['green', 'blue']
// Note: rest element must be LAST -- [...others, last] is a syntax error

// Default values kick in when the destructured value is undefined
const [a, b, c, d = 'yellow'] = colors;
// d = 'yellow' (default used because colors[3] is undefined)

// Swap variables -- no temporary variable needed!
let x = 1, y = 2;
[x, y] = [y, x]; // x = 2, y = 1
// This works because the right side is evaluated fully before assignment

const person = { name: 'Alice', age: 25, city: 'NYC' };

// Basic -- variable names must match property names
const { name, age } = person;

// Rename -- use colon syntax: { propertyName: newVariableName }
// This reads as "take 'name' and call it 'personName'"
const { name: personName, age: personAge } = person;

// Default values -- used when property is undefined (not when null!)
const { name, country = 'USA' } = person;

// Nested destructuring -- follow the shape of the object
const user = {
    id: 1,
    profile: { firstName: 'Alice', lastName: 'Smith' }
};
const { profile: { firstName } } = user; // 'Alice'
// CAUTION: 'profile' is NOT defined as a variable here -- only 'firstName' is.
// If you also need profile: const { profile, profile: { firstName } } = user;

// Rest -- collects all remaining properties into a new object
const { name: n, ...rest } = person;
// rest = { age: 25, city: 'NYC' }
// Useful for removing specific properties from an object

// Destructure in parameters -- eliminates "options object" boilerplate
function greet({ name, age }) {
    return `Hello ${name}, you are ${age}`;
}

greet({ name: 'Alice', age: 25 });

// With defaults -- the = {} at the end is critical!
// Without it, calling createUser() with no arguments throws a TypeError
// because you cannot destructure undefined.
function createUser({ name = 'Guest', role = 'user' } = {}) {
    return { name, role };
}

createUser();                  // { name: 'Guest', role: 'user' }
createUser({ name: 'Alice' }); // { name: 'Alice', role: 'user' }

// Edge case: destructuring null/undefined throws (unlike accessing a property)
const { a } = null;      // TypeError: Cannot destructure property 'a' of null
const { b } = undefined; // TypeError
// But property access on null/undefined can be guarded with optional chaining:
const val = null?.a;      // undefined (no error)

// Edge case: destructuring with computed keys
const key = 'name';
const { [key]: value } = { name: 'Alice' }; // value = 'Alice'

// Edge case: destructuring in for...of loops
const users = [{ name: 'Alice', age: 25 }, { name: 'Bob', age: 30 }];
for (const { name, age } of users) {
    console.log(`${name} is ${age}`); // Destructure each object in the array
}

// Edge case: mixing defaults and rename
const { name: userName = 'Anonymous', role: userRole = 'viewer' } = {};
// userName = 'Anonymous', userRole = 'viewer'

// Edge case: destructuring assignment to existing variables requires parentheses
let x, y;
({ x, y } = { x: 1, y: 2 }); // Without parens, { is treated as a block statement

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];

// Combine arrays
const combined = [...arr1, ...arr2]; // [1, 2, 3, 4, 5, 6]

// Copy array (shallow)
const copy = [...arr1];

// Convert iterable to array
const chars = [...'hello']; // ['h', 'e', 'l', 'l', 'o']

// Pass as function arguments
Math.max(...arr1); // 3

const defaults = { theme: 'dark', lang: 'en' };
const userPrefs = { theme: 'light' };

// Merge -- later properties override earlier ones (last writer wins)
const settings = { ...defaults, ...userPrefs };
// { theme: 'light', lang: 'en' }
// Order matters! { ...userPrefs, ...defaults } would keep theme: 'dark'

// Copy object (SHALLOW -- nested objects are shared by reference)
const copy = { ...defaults };

// Add/override properties -- a clean way to create modified copies
const updated = { ...defaults, debug: true };

const name = 'Alice';
const age = 25;

// Interpolation -- any expression inside ${} is evaluated and converted to string
const greeting = `Hello, ${name}!`;

// Expressions -- not just variables, any valid JavaScript expression works
const message = `You will be ${age + 10} in 10 years`;
const status = `User is ${age >= 18 ? 'adult' : 'minor'}`;

// Multi-line strings -- preserves line breaks and indentation as-is
const html = `
    <div class="card">
        <h1>${name}</h1>
        <p>Age: ${age}</p>
    </div>
`;
// Note: the indentation becomes part of the string.
// Use .trim() if you need to remove leading/trailing whitespace.

// Tagged templates (advanced) -- a function that processes template literal parts
function highlight(strings, ...values) {
    // strings = ['Hello ', ', you are ', ''] (the static parts)
    // values = ['Alice', 25] (the interpolated expressions)
    return strings.reduce((result, str, i) => {
        const value = values[i] ? `<mark>${values[i]}</mark>` : '';
        return result + str + value;
    }, '');
}

const highlighted = highlight`Hello ${name}, you are ${age}`;
// 'Hello <mark>Alice</mark>, you are <mark>25</mark>'
// Tagged templates power libraries like styled-components and GraphQL's gql tag.

// utils.js -- each export is named and must be imported by that exact name
export const PI = 3.14159;

export function add(a, b) {
    return a + b;
}

export class Calculator {
    // ...
}

// main.js
import { PI, add, Calculator } from './utils.js';  // Must match export names
import { add as sum } from './utils.js';            // Rename on import
import * as utils from './utils.js';                // Import all as namespace object
// utils.PI, utils.add(), utils.Calculator

// User.js -- one default export per file (the "main" thing the module provides)
export default class User {
    constructor(name) {
        this.name = name;
    }
}

// main.js
import User from './User.js';              // Any name works (no curly braces)
import MyUser from './User.js';            // Same class, different local name
import User, { helper } from './User.js'; // Default + named in one import

// Edge case: named exports are live bindings, not copies
// module.js
export let count = 0;
export function increment() { count++; }

// main.js
import { count, increment } from './module.js';
console.log(count); // 0
increment();
console.log(count); // 1 -- the value updated! It is a live binding.

// In CommonJS, this would NOT work -- require() copies the value:
// const { count } = require('./module'); // count is a snapshot, not a live binding

// Lazy load a heavy module only when the user actually needs it.
// The browser downloads heavy-module.js only when the button is clicked.
const button = document.getElementById('load');

button.addEventListener('click', async () => {
    const { heavyFunction } = await import('./heavy-module.js');
    heavyFunction();
});

// Practical example: loading a charting library only on the analytics page
if (window.location.pathname === '/analytics') {
    const { Chart } = await import('chart.js');
    new Chart(canvas, config);
}

class Animal {
    // Private field (ES2022)
    #heartRate = 60;
    
    // Static field
    static kingdom = 'Animalia';
    
    constructor(name) {
        this.name = name;
    }
    
    // Getter
    get info() {
        return `${this.name} (${Animal.kingdom})`;
    }
    
    // Method
    speak() {
        console.log(`${this.name} makes a sound`);
    }
    
    // Private method (ES2022)
    #checkVitals() {
        return this.#heartRate > 0;
    }
    
    // Static method
    static create(name) {
        return new Animal(name);
    }
}

class Dog extends Animal {
    constructor(name, breed) {
        super(name);
        this.breed = breed;
    }
    
    speak() {
        console.log(`${this.name} barks!`);
    }
}

const map = new Map();

// Any type as key -- this is the killer feature over plain objects
map.set('name', 'Alice');
map.set(1, 'one');           // Number key (objects would coerce to string '1')
map.set({ id: 1 }, 'object key'); // Object as key (compared by reference)

map.get('name');  // 'Alice'
map.has(1);       // true
map.size;         // 3 (unlike objects, Map tracks its own size)
map.delete('name');

// Iteration -- preserves insertion order (guaranteed, unlike objects before ES2015)
for (const [key, value] of map) {
    console.log(key, value);
}

// Edge case: numeric keys in objects are sorted first
const obj = { b: 2, 1: 'one', a: 1, 2: 'two' };
Object.keys(obj); // ['1', '2', 'b', 'a'] -- numeric keys first, then insertion order!

const map = new Map([['b', 2], [1, 'one'], ['a', 1], [2, 'two']]);
[...map.keys()]; // ['b', 1, 'a', 2] -- strict insertion order

// Edge case: Map keys use SameValueZero comparison (like === but NaN === NaN)
const map2 = new Map();
map2.set(NaN, 'not a number');
map2.get(NaN); // 'not a number' -- works! (NaN === NaN is false, but Map handles it)

const set = new Set([1, 2, 2, 3, 3, 3]);
// Set(3) {1, 2, 3} -- duplicates are silently ignored

set.add(4);
set.has(2);    // true -- O(1) lookup, much faster than Array.includes()
set.delete(1);
set.size;      // 3

// The classic one-liner: remove duplicates from an array
const unique = [...new Set([1, 2, 2, 3])]; // [1, 2, 3]

// Set operations (not built-in, but easy to implement):
const a = new Set([1, 2, 3, 4]);
const b = new Set([3, 4, 5, 6]);

// Union
const union = new Set([...a, ...b]); // {1, 2, 3, 4, 5, 6}

// Intersection
const intersection = new Set([...a].filter(x => b.has(x))); // {3, 4}

// Difference
const difference = new Set([...a].filter(x => !b.has(x))); // {1, 2}

// Edge case: Set uses SameValueZero (like Map), so NaN is handled correctly
const s = new Set([NaN, NaN]);
s.size; // 1 -- only one NaN (unlike array where indexOf(NaN) === -1)

const weakMap = new WeakMap();
let obj = { data: 'secret' };

weakMap.set(obj, 'metadata');  // Only objects can be keys (not strings or numbers)
weakMap.get(obj); // 'metadata'

obj = null; // No more references to the object -- it can be garbage collected,
            // and the WeakMap entry is automatically cleaned up.

// Practical use case: storing private data for DOM elements or class instances
// without preventing them from being garbage collected.
// WeakMaps are NOT iterable (no .forEach, no .size) -- by design,
// since entries can disappear at any time.

// Practical WeakMap use case: caching expensive computations per object
const cache = new WeakMap();

function expensiveCompute(obj) {
    if (cache.has(obj)) return cache.get(obj);
    const result = /* expensive operation on obj */;
    cache.set(obj, result);
    return result;
}
// When 'obj' is garbage collected, its cache entry disappears automatically.
// With a regular Map, the cache would grow forever (memory leak).

// Practical WeakMap use case: truly private class data (pre-ES2022 #private)
const privates = new WeakMap();

class User {
    constructor(name, ssn) {
        this.name = name;
        privates.set(this, { ssn }); // SSN stored externally, keyed by instance
    }
    getSSN() {
        return privates.get(this).ssn;
    }
}
// No way to access SSN from outside without the WeakMap reference.
// When the User instance is garbage collected, the private data goes with it.

// flat: Flatten nested arrays (depth argument controls how deep)
[[1, 2], [3, [4, 5]]].flat(2); // [1, 2, 3, 4, 5]
// flat(1) would give [1, 2, 3, [4, 5]] -- only one level deep

// flatMap: map then flat(1) in a single pass -- more efficient than .map().flat()
[1, 2].flatMap(x => [x, x * 2]); // [1, 2, 2, 4]

// at: Negative indexing -- finally, a clean way to get the last element!
const arr = [1, 2, 3, 4, 5];
arr.at(-1);  // 5 (last element) -- much cleaner than arr[arr.length - 1]
arr.at(-2);  // 4

// findLast / findLastIndex (ES2023) -- search from the end
arr.findLast(x => x % 2 === 0);      // 4 (last even number)
arr.findLastIndex(x => x % 2 === 0); // 3 (its index)

// toSorted, toReversed, toSpliced (ES2023) -- NON-MUTATING versions
// These return new arrays, leaving the original untouched.
// This is a big deal: .sort() and .reverse() mutate the original array,
// which is a classic source of bugs.
const sorted = arr.toSorted((a, b) => b - a); // [5, 4, 3, 2, 1]
const reversed = arr.toReversed();             // [5, 4, 3, 2, 1]
console.log(arr); // [1, 2, 3, 4, 5] -- original unchanged!

// The classic .sort() mutation bug:
const original = [3, 1, 2];
const sorted = original.sort();     // [1, 2, 3]
console.log(original);             // [1, 2, 3] -- MUTATED! original === sorted
console.log(sorted === original);  // true -- they are the SAME array reference!

// Fix with toSorted (ES2023):
const safe = original.toSorted();  // New array, original untouched

// Fix without ES2023 (spread + sort):
const safeLegacy = [...original].sort(); // Copy first, then sort the copy

// Edge case: .sort() without a comparator sorts as STRINGS
[10, 9, 80].sort();                // [10, 80, 9] -- string comparison!
[10, 9, 80].sort((a, b) => a - b); // [9, 10, 80] -- numeric comparison

const obj = { a: 1, b: 2, c: 3 };

// Object.entries / fromEntries
Object.entries(obj);              // [['a', 1], ['b', 2], ['c', 3]]
Object.fromEntries([['x', 10]]); // { x: 10 }

// Transform object
const doubled = Object.fromEntries(
    Object.entries(obj).map(([k, v]) => [k, v * 2])
);
// { a: 2, b: 4, c: 6 }

// Object.hasOwn (ES2022) — Safer than hasOwnProperty
Object.hasOwn(obj, 'a'); // true

const user = { profile: { name: 'Alice' } };

// Optional chaining
user?.profile?.name;      // 'Alice'
user?.address?.city;      // undefined (no error)
user?.getName?.();        // undefined (function doesn't exist)

// Nullish coalescing
const value = null ?? 'default';  // 'default'
const zero = 0 ?? 'default';      // 0 (0 is not nullish)

let a = null;
let b = 'hello';

a ??= 'default'; // a = 'default' (was null -- nullish coalescing + assignment)
b ??= 'default'; // b = 'hello' (unchanged -- b is not null/undefined)

let x = 0;
x ||= 10;        // x = 10 (0 is falsy, so the assignment happens)
x &&= 20;        // x = 20 (x was truthy after the previous line)

// Practical use: setting defaults on config objects
options.timeout ??= 3000;    // Only set if timeout is null/undefined
options.retries ??= 3;

const billion = 1_000_000_000;
const bytes = 0xFF_FF_FF_FF;
const binary = 0b1010_0001;

// Padding
'5'.padStart(3, '0');  // '005'
'5'.padEnd(3, '0');    // '500'

// Trim
'  hello  '.trim();      // 'hello'
'  hello  '.trimStart(); // 'hello  '
'  hello  '.trimEnd();   // '  hello'

// replaceAll (ES2021)
'aabbcc'.replaceAll('a', 'x'); // 'xxbbcc'

// at (ES2022)
'hello'.at(-1); // 'o'