Array Visualizer

Instant Update

Select an action

[0]

[1]

[2]

Logs

No operations yet

Notes

Inputs accept integers only. Non-number input produces an error and is logged.

Insert Random inserts a random integer [0..99] at a random index, and animates traversal.

All indexed operations animate traversal (unless "instant update" is on).

The UI disables controls while animating for safety.

Get by Index animates traversal and keeps the found element highlighted for 3 seconds.

Implementation (TypeScript)

class MyArray {
  private data: number[] = [];
  add(value: number) { this.data.push(value); }
  addAtIndex(value: number, index: number) {
    if (index < 0 || index > this.data.length) throw new Error("Index out of bounds");
    this.data.splice(index, 0, value);
  }
  deleteLast() { this.data.pop(); }
  deleteByIndex(index: number) {
    if (index < 0 || index >= this.data.length) throw new Error("Index out of bounds");
    this.data.splice(index, 1);
  }
  getByIndex(index: number): number {
    if (index < 0 || index >= this.data.length) throw new Error("Index out of bounds");
    return this.data[index];
  }
}

About Arrays

An array is a contiguous block of memory where elements of the same type are stored sequentially. Arrays provide constant-time indexed access (O(1)) because the memory address of any element can be computed using the base address and the element size.

Common operations:

Access by index: O(1)
Append at end (amortized): O(1)
Insert/Delete at arbitrary index: O(n) due to shifting elements
Iteration: O(n)

Use arrays when you need fast indexed access and a fixed or moderately sized collection. For frequent middle insertions/deletions, consider linked lists or other data structures.