Arrays Are Just Lists (I Promise)

An array is a list. That's it. A list of things. It could be a list of names, a list of numbers, a list of pizza toppings — whatever. If you've ever made a grocery list, you already understand arrays.

Why Arrays Matter (They're Everywhere)

Arrays aren't just a textbook concept. Literally every app you use is powered by them:

Your Instagram feed: It's an array of posts. The app loops through the array and renders each one on screen. When you scroll, it loads more items into the array.
Search results: When you Google something, the results page is an array of results that gets filtered and sorted by relevance.
Spotify playlists: A playlist is an array of songs. Shuffle? Randomly reorder the array. Skip? Move to the next index. Add to queue? Push to the array.
Shopping carts: Every item in your cart is an element in an array. Remove an item? Filter it out. Calculate total? Use reduce to add up all the prices.
Your contacts list: Your phone's contact book is an array of objects, each with a name, number, and photo. Search filters the array. Sort by name rearranges it.
Chat messages: Every conversation in iMessage, WhatsApp, or Slack is an array of message objects rendered in order.

Once you understand arrays and their methods (map, filter, find), you can build any of these features. They're the single most important data structure in programming.

Making an Array

1// A list of your favorite shows
2const shows = ['Euphoria', 'Wednesday', 'The Bear'];
3
4// A list of numbers
5const scores = [98, 87, 100, 73, 95];
6
7// A list of anything, really
8const randomStuff = ['coffee', 42, true, 'vibes'];

Getting Items from the List

Every item in an array has a position number, starting at 0 (not 1, I know, it's weird):

1const shows = ['Euphoria', 'Wednesday', 'The Bear'];
2//               [0]         [1]          [2]
3
4shows[0];  // 'Euphoria'    (first item)
5shows[1];  // 'Wednesday'   (second item)
6shows[2];  // 'The Bear'    (third item)
7
8// How many items?
9shows.length;  // 3
10
11// Get the last item (no matter how long the list):
12shows[shows.length - 1];  // 'The Bear'

💡 Pro tip

Why does the index start at 0? Short answer: it's a leftover from how computers handle memory. Long answer: it doesn't matter, just remember the first item is at position 0 and you'll be fine.

Adding and Removing Items

1const playlist = ['Chill Vibes', 'Study Beats'];
2
3// Add to the END:
4playlist.push('Lo-fi Dreams');
5// ['Chill Vibes', 'Study Beats', 'Lo-fi Dreams']
6
7// Remove from the END:
8playlist.pop();
9// ['Chill Vibes', 'Study Beats']
10
11// Add to the BEGINNING:
12playlist.unshift('Morning Jazz');
13// ['Morning Jazz', 'Chill Vibes', 'Study Beats']
14
15// Remove from the BEGINNING:
16playlist.shift();
17// ['Chill Vibes', 'Study Beats']

The Big Four: map, filter, find, forEach

These four methods are what you'll use constantly. They're the reason arrays are so powerful.

.map() — Transform Every Item

1const prices = [10, 20, 30, 40];
2
3// Add tax to every price
4const withTax = prices.map(price => price * 1.08);
5// [10.8, 21.6, 32.4, 43.2]
6
7// Make every name uppercase
8const names = ['denise', 'sarah', 'maya'];
9const shouting = names.map(name => name.toUpperCase());
10// ['DENISE', 'SARAH', 'MAYA']
11
12// In React, map is how you render lists:
13// {names.map(name => <li>{name}</li>)}

.filter() — Keep Only What You Want

1const scores = [98, 45, 87, 100, 32, 73, 95];
2
3// Keep only passing scores (above 70)
4const passing = scores.filter(score => score > 70);
5// [98, 87, 100, 73, 95]
6
7// Find all the short names
8const names = ['Jo', 'Denise', 'Al', 'Samantha', 'Li'];
9const shortNames = names.filter(name => name.length <= 2);
10// ['Jo', 'Al', 'Li']

.find() — Get the First Match

1const users = [
2{ name: 'Denise', role: 'creator' },
3{ name: 'Sarah', role: 'designer' },
4{ name: 'Maya', role: 'developer' },
5];
6
7// Find the designer
8const designer = users.find(user => user.role === 'designer');
9// { name: 'Sarah', role: 'designer' }
10
11// Find returns the FIRST match, or undefined if nothing matches
12const ceo = users.find(user => user.role === 'ceo');
13// undefined (nobody has that role)

.forEach() — Do Something with Each Item

1const tasks = ['Learn arrays', 'Build a project', 'Celebrate'];
2
3// Print each task with a number
4tasks.forEach((task, index) => {
5console.log((index + 1) + '. ' + task);
6});
7// 1. Learn arrays
8// 2. Build a project
9// 3. Celebrate

Chaining Methods Together

The really cool thing is you can chain these together:

1const products = [
2{ name: 'Laptop', price: 999, inStock: true },
3{ name: 'Phone', price: 699, inStock: false },
4{ name: 'Tablet', price: 449, inStock: true },
5{ name: 'Watch', price: 299, inStock: true },
6];
7
8// Get names of affordable products that are in stock
9const affordable = products
10.filter(p => p.inStock)            // Only in-stock items
11.filter(p => p.price < 500)        // Only under $500
12.map(p => p.name);                  // Get just the names
13
14// ['Tablet', 'Watch']

⚠️ Heads up

map() and filter() return NEW arrays — they don't change the original. This is called being "immutable" and it's actually a good thing. Your original data stays safe and untouched.

Quick Recap

An array is a list of items: ['a', 'b', 'c']
Index starts at 0 (first item is [0])
.push() adds to end, .pop() removes from end
.map() — transform every item into something new
.filter() — keep only items that pass a test
.find() — get the first item that matches
.forEach() — do something with each item (no new array)
You can chain methods together for powerful pipelines

💬 Denise says

If you understand map and filter, you can work with data in JavaScript. Like, for real. These two methods are in basically every React codebase, every Node.js backend, every data processing script. You just learned the tools that professional developers use every single day. That grocery list knowledge really came in clutch.