Arrays / Lists
📚 What are Arrays in JavaScript? An array is an ordered list of values in a single variable. You access items by their index (starting at 0). JavaScript arrays are dynamic - they grow and shrink as needed. They can hold any mix of types and come with dozens of built-in methods.
Appy Says…
Arrays are the backbone of every app — a list of users, playlist of songs, feed of posts, shopping cart items. JavaScript gives you a rich set of methods to add, remove, search, and transform arrays. This is core knowledge.
What is an Array?
An array is an ordered list of values stored in a single variable. Arrays are zero-indexed (first item is at index 0) and can hold any mix of types.
- •Create:
const scores = [95, 87, 62]; - •Access:
scores[0]→95;scores[scores.length - 1]→ last item - •
.push(item)— add to end;.pop()— remove from end - •
.unshift(item)— add to start;.shift()— remove from start - •
.indexOf(item)— find index (-1 if not found);.includes(item)— boolean check - •
.slice(start, end)— extract portion (non-destructive) - •
.splice(index, deleteCount, ...items)— modify in place (destructive)
Think of it like a Spotify queue
A Spotify queue is an array of songs in order. You can push a new song to the end, shift the current song off the front, check if a song is already in the queue with .includes(), and splice a song into the middle. Same API, different data.
How It Works
- •1. Arrays are objects under the hood —
typeof []returns'object' - •2. Items are stored at numeric keys (0, 1, 2…) and
.lengthupdates automatically - •3.
.push()and.pop()modify the original array (mutating) - •4.
.slice()returns a new array without touching the original (non-mutating) - •5.
.splice(2, 1)removes 1 item at index 2 and returns it - •6. Loop with:
for...of,.forEach(), or classicfor (let i = 0; ...)
Real-World Examples
- •A shopping cart is an array;
.push(product)adds an item,.filter()removes it - •TikTok's For You page is an array of video objects rendered one by one
- •Spotify's shuffle calls
.sort(() => Math.random() - 0.5)on the playlist array - •A chat app stores messages in an array; new messages are pushed; old ones are sliced for pagination
- •YouTube search results are an array sorted by relevance score
Key Facts
- •Arrays are objects in JavaScript — you can add non-numeric properties (but don't)
- •
Array.isArray(value)is the reliable way to check if something is an array - •Modern array methods (
.map(),.filter(),.reduce()) return new arrays and are preferred over mutation - •Sparse arrays (with gaps:
[1, , 3]) are valid but confusing — avoid them
Watch Out!
Methods like .push(), .pop(), .splice(), and .sort() mutate the original array. If you pass an array to a function and mutate it there, the caller's array also changes. Use [...array] or .slice() to create a copy first.
Remember
Arrays are zero-indexed. Mutating methods change the original (.push, .pop, .splice, .sort). Non-mutating methods return a new array (.slice, .map, .filter).
What You Learned
- •Arrays store ordered lists; access by index, modify with push/pop/splice
- •Mutating vs non-mutating methods — know which is which
- •Unlocks: building lists, feeds, queues, search results, and every data-driven UI
Key Facts
- →Arrays are objects in JavaScript — you can add non-numeric properties (but don't)
- →
Array.isArray(value)is the reliable way to check if something is an array - →Modern array methods (
.map(),.filter(),.reduce()) return new arrays and are preferred over mutation - →Sparse arrays (with gaps:
[1, , 3]) are valid but confusing — avoid them
Real-World Examples
Remember
Arrays are zero-indexed. Mutating methods change the original (.push, .pop, .splice, .sort). Non-mutating methods return a new array (.slice, .map, .filter).
Quick Quiz
What is fruits[0] for ["a","b","c"]?