Curriculum
Module 07 // Core JavaScript
Arrays & Essential Methods
Module Objective
map, filter, reduce, forEach, find, some, every, includes, indexOf, slice, splice (mutation vs non-mutation)
Mental Model Realtime Simulation
INTERACTIVE_CANVASEditor_Pane
Loading...
Console_Output
Waiting for output...
Practical Code Examples
// Example 1
// 1. Map, Filter, Reduce
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(n => n * 2);
console.log(doubled); // [2, 4, 6, 8, 10]
const evens = numbers.filter(n => n % 2 === 0);
console.log(evens); // [2, 4]
const total = numbers.reduce((acc, curr) => acc + curr, 0);
console.log(total); // 15💡 `map` transforms every element. `filter` removes elements that don't match. `reduce` combines everything into one result.
// Example 2
// 2. Splice vs Slice
const arr = ['a', 'b', 'c', 'd'];
const slice = arr.slice(1, 3); // Copy from index 1 up to (not including) 3
console.log(slice); // ['b', 'c']
console.log(arr); // ['a', 'b', 'c', 'd'] (Original unchanged)
arr.splice(1, 2, 'X'); // Start at 1, remove 2, add 'X'
console.log(arr); // ['a', 'X', 'd'] (Original MUTATED)💡 `slice` is non-mutating (pure). `splice` modifies the original array. Use `slice` whenever possible to avoid side effects.
// Example 3
// 3. Array Destructuring & Spread
const [first, second, ...rest] = [10, 20, 30, 40];
console.log(first, second, rest); // 10, 20, [30, 40]
const copy = [...rest]; // Clone array
const combined = [...rest, 50, 60]; // [30, 40, 50, 60]💡 Spread operator `...` is the modern way to clone and combine arrays without mutation.
Engine & Memory Architecture
Arrays in Memory
1. Object Nature:
- Under the hood, JS arrays are objects where indices (0, 1, 2) are keys.
- They are stored in the Heap.
2. Dynamic Resizing:
- Unlike C++ or Java, JS arrays don't have a fixed size.
- The Engine automatically reallocates memory in the Heap as the array grows.
3. Performance:
- Push/Pop are fast (O(1)) because they happen at the end.
- Shift/Unshift are slow (O(n)) because they require re-indexing every single item in memory.
- Sparse Arrays: If you do
arr[100] = 5, the engine doesn't allocate 100 empty slots; it stores it efficiently using a "dictionary mode."