JS Arrays

JavaScript Arrays: Structure, Indexing, & Manipulation

Arrays are ordered list-like objects used to store multiple values in a single variable. In JavaScript, arrays are dynamic, zero-indexed, heterogeneous (can store mixed data types), and powered by prototype methods.

Array Memory & Indexing Model

flowchart LR
    Arr["Array: ['HTML', 'CSS', 'JS']"] --> Idx0["[0]: 'HTML'"]
    Arr --> Idx1["[1]: 'CSS'"]
    Arr --> Idx2["[2]: 'JS'"]
    Arr --> Length["length: 3"]

Array Properties & Fundamentals

Practical Code Example

// Demonstrating Array creation, access, mutation, and inspection

// 1. Creating Arrays
const techStack = ["JavaScript", "TypeScript", "React", "Node.js"];
console.log(`Initial Array Length: ${techStack.length}`);

// 2. Accessing Elements
console.log(`First Element: ${techStack[0]}`);
console.log(`Last Element (at method): ${techStack.at(-1)}`); // ES2022 negative index access

// 3. Mutating Array Elements
techStack[2] = "Next.js"; // Replace "React" with "Next.js"
console.log("Updated Stack:", techStack);

// 4. Array.isArray Validation
console.log(`Is techStack an array? ${Array.isArray(techStack)}`); // true
console.log(`Is plain object an array? ${Array.isArray({ a: 1 })}`); // false

// 5. Destructuring Arrays
const [firstLanguage, secondLanguage, ...remainingStack] = techStack;
console.log(`Destructured First: ${firstLanguage}, Second: ${secondLanguage}`);
console.log("Remaining Stack:", remainingStack);

Best Practices & Gotchas

• Use arr.at(-1) for Last Element: Modern ES2022 arr.at(-1) is cleaner than arr[arr.length - 1].
• Avoid Sparse Arrays: Never assign values to arbitrary distant indices like arr[100] = "x", as it creates empty slots that degrade V8 optimization.
• Use Array.isArray(): typeof [] returns "object". Always use Array.isArray(val) to check if a value is an array.

Self-Check Challenge

What is the value of arr.length after running const arr = [10, 20]; arr[5] = 60;?