DSA Arrays — Fundamentals Visualized
Learn array fundamentals for DSA — O(1) access, O(n) insert/delete, contiguous memory, code breakdown, and an interactive operations visualizer.
Introduction
Arrays are the foundation of most DSA problems — a contiguous block of memory where each element is accessed by index in O(1) time. Nearly every sorting and searching algorithm in this series operates on arrays.
This guide covers:
- Array structure — indices, length, contiguous storage
- Interactive visualizer — access, push, insert, delete
- Complexity — O(1) read vs O(n) shift operations
- Code patterns — traversal, two pointers, in-place swap
Quick index
| # | Section |
|---|---|
| 1 | How arrays work |
| 2 | Interactive visualizer |
| 3 | Full implementation |
| 4 | Complexity table |
| 5 | Common patterns |
| 6 | Real-life examples |
1. How arrays work
Index: 0 1 2 3 4
Value: [10, 20, 30, 40, 50]
↑
O(1) access — arr[0] → 10| Operation | Time | Why |
|---|---|---|
Access arr[i] | O(1) | Direct offset from base address |
| Push (end) | O(1)* | Amortized resize |
| Insert at index | O(n) | Shift trailing elements |
| Delete at index | O(n) | Shift to fill gap |
| Search (unsorted) | O(n) | Scan until found |
2. Interactive visualizer
Arrays — Operations Visualizer
See O(1) access vs O(n) insert/delete — contiguous indexed storage.
Structure
Contiguous memory — each index maps to O(1) access.
Array basics
const arr = [10, 20, 30, 40, 50] arr[2] // O(1) random access → 30 arr.length // 5
Fixed-size or dynamic contiguous collection indexed from 0.
Access
O(1)
Insert/delete
O(n)
Search
O(n)
3. Full implementation
class DynamicArray {
constructor() {
this.items = []
}
get(i) {
return this.items[i]
}
push(val) {
this.items.push(val)
return this.items.length
}
pop() {
return this.items.pop()
}
insertAt(index, val) {
this.items.splice(index, 0, val)
}
deleteAt(index) {
return this.items.splice(index, 1)[0]
}
indexOf(val) {
return this.items.indexOf(val)
}
length() {
return this.items.length
}
}Function calls with output
// ── Demo calls — output shown on the right ──
const arr = new DynamicArray()
arr.push(10) // → 1
arr.push(20) // → 2
arr.get(0) // → 10
arr.insertAt(1, 15) // → items: [10, 15, 20]
arr.deleteAt(1) // → 15
arr.indexOf(20) // → 1
arr.length() // → 24. Complexity table
// O(1) — random access
const x = arr[i]
// O(n) — insert at front (shift all)
arr.unshift(0)
// O(n) — find in unsorted array
arr.indexOf(target)5. Common patterns
| Pattern | Use case |
|---|---|
| Two pointers | Sorted pair sum, palindrome check |
| Sliding window | Subarray of fixed size k |
| Prefix sum | Range queries in O(1) after O(n) prep |
| In-place swap | Sorting without extra array |
6. Real-life examples
| Real-world use | Array operation | Why arrays win |
|---|---|---|
| Leaderboard scores | scores[i] by rank index | O(1) jump to any position |
| Image pixel buffer | pixels[row * width + col] | Contiguous memory — GPU/Canvas friendly |
| Calendar time slots | Fixed array of 24 hours | Index = hour, direct access |
| Shopping cart | cart.push(item) at end | O(1) append — most common pattern |
| Undo history (array stack) | history.pop() | Fast end access; bad if inserting at front |
E-commerce shopping cart
Arrays power carts, leaderboards, and pixel buffers — O(1) index access and O(1) append at end.
Empty cart — contiguous array ready for O(1) push.
Real-world implementation
class ShoppingCart {
constructor() { this.items = [] }
add(sku, qty) {
const idx = this.items.findIndex(i => i.sku === sku)
if (idx >= 0) this.items[idx].qty += qty
else this.items.push({ sku, qty })
return this.items
}
updateQty(index, qty) {
if (index < 0 || index >= this.items.length) return null
this.items[index].qty = qty
return this.items[index]
}
removeAt(index) {
if (index < 0 || index >= this.items.length) return null
return this.items.splice(index, 1)[0]
}
totalItems() {
return this.items.reduce((sum, i) => sum + i.qty, 0)
}
}Full working code for the scenario above.
Function calls with output
| // ── Function calls with output ── | |
| const cart = new ShoppingCart() | → items: [] |
Side output shows return value after each call — step through to trace execution.
Summary
Arrays give O(1) indexed access but O(n) insert/delete in the middle. Every sorting algorithm in this series builds on these trade-offs.
Next reads: Bubble Sort · Big O Notation
Subscribe to my newsletter
Stay up to date and get notified when I share new contents.
No spam ever, unsubscribe anytime