JavaScript Arrays
Arrays are special variables that can hold more than one value. They are fundamental for storing and manipulating collections of data.
📚 What are Arrays?
An array is a special type of object used for storing multiple values in a single variable.
Array Characteristics:
- Ordered collection of values
- Zero-based indexing (first element at index 0)
- Can contain mixed data types
- Dynamic size (grow/shrink automatically)
- Have built-in methods for manipulation
💡 Array Creation Methods
// Array literal
let arr1 = [1, 2, 3];
// Array constructor
let arr2 = new Array(1, 2, 3);
// Array.of()
let arr3 = Array.of(1, 2, 3);
// Array.from()
let arr4 = Array.from("hello");Array Indices:
Arrays use numerical indices starting from 0.arr[0] - First elementarr[arr.length - 1] - Last element
🔧 Basic Array Operations
Let's explore basic array creation, access, and modification.
Access
arr[index]
Add End
arr.push(item)
Remove End
arr.pop()
Add Start
arr.unshift(item)
✨ Essential Array Methods
JavaScript provides powerful methods for array manipulation. Here are the most commonly used ones.
Transformation
map()- Transform eachflat()- Flatten nestedflatMap()- Map then flatten
Filtering
filter()- Select itemsfind()- Find first matchfindIndex()- Find index
Reduction
reduce()- AccumulatereduceRight()- Right to leftsome()- Any matchevery()- All match
🧮 Multidimensional Arrays
Arrays can contain other arrays, creating multidimensional structures.
📊 Common Uses:
- Matrices - 2D arrays for mathematical operations
- Game Boards - Chess, tic-tac-toe, sudoku
- Data Tables - Rows and columns of data
- Image Processing - Pixel data in 2D arrays
- 3D Graphics - 3D arrays for volumetric data
🌀 Spread and Rest Operators
The spread (...) syntax allows an iterable to be expanded, while rest parameters collect multiple elements.
Spread Operator Uses:
- Copy arrays:
[...arr] - Merge arrays:
[...arr1, ...arr2] - Pass array elements as arguments
- Convert iterables to arrays
Rest Parameter Uses:
- Collect remaining parameters
- Handle variable arguments
- Array destructuring
- Object destructuring
⚡ More Array Operations
Additional useful array methods for common operations.
Searching
indexOf(item) lastIndexOf(item) includes(item) find(callback) findIndex(callback)
Modification
splice(start, deleteCount, items) slice(start, end) concat(arrays) reverse() sort(callback)
Conversion
join(separator) toString() toLocaleString()
🎮 Array Practice Exercises
Implement the array manipulation functions below.
💪 Additional Challenges:
- Implement array chunking (split into smaller arrays)
- Create array intersection/union/difference functions
- Implement bubble sort or other sorting algorithms
- Create a function to rotate array elements
- Implement matrix multiplication for 2D arrays
📋 Quick Reference
Creation:
[]- Array literalnew Array()- ConstructorArray.from()- From iterableArray.of()- From arguments
Essential Methods:
push/pop- End operationsshift/unshift- Start operationsmap/filter/reduce- Functional methodsslice/splice- Subarray operations
