Arrays: A Review

You worked with arrays in JavaScript Foundations. Before you learn the methods that transform and query them, it is worth pausing to review what arrays actually are and how JavaScript thinks about them.

What an array is

An array is an ordered list of values. The values can be anything — numbers, strings, booleans, objects, or other arrays.

const expenses = [
  { id: 1, description: 'Coffee', amount: 4.50, category: 'Food' },
  { id: 2, description: 'Bus pass', amount: 30.00, category: 'Transport' },
  { id: 3, description: 'Lunch', amount: 12.75, category: 'Food' },
];

Each item sits at a numbered position called an index, starting at 0. expenses[0] is the coffee entry. expenses[2] is lunch.

Array length

array.length tells you how many items are in the array.

console.log(expenses.length); // 3

This updates automatically as you add or remove items.

Reading and writing items

You can read any item by index:

console.log(expenses[1].description); // 'Bus pass'

And replace any item by assigning to its index:

expenses[1] = { id: 2, description: 'Monthly bus pass', amount: 55.00, category: 'Transport' };

In practice, you rarely mutate individual indexes directly — the array methods you are about to learn give you much cleaner ways to work with array contents.

Arrays are reference types

This trips up every JavaScript developer at some point. When you assign an array to a variable, the variable holds a reference to the array, not a copy of it.

const a = [1, 2, 3];
const b = a;
b.push(4);
console.log(a); // [1, 2, 3, 4] — both variables point to the same array

If you need an independent copy, you create one explicitly — the spread operator (covered in Module 04) is the modern way to do this:

const copy = [...a];

Mutating vs non-mutating methods

Some array methods mutate (change) the original array. Others return a new array and leave the original unchanged. This distinction matters — most of the methods in this module return new arrays rather than modifying the original, which makes your code safer and more predictable.

Mutates the original	Returns a new value
push, pop, splice, sort, reverse	map, filter, reduce, find

You already know push and pop. The goal of this module is to replace most manual loops with the declarative methods in the right column.

The for loop pattern you already know

Before the modern array methods existed, developers looped over arrays with for loops:

const totals = [];
for (let i = 0; i < expenses.length; i++) {
  totals.push(expenses[i].amount);
}

This works. But it requires you to manage an index variable (i), create a new array manually, and push into it — three things that are just bookkeeping, not logic. The array methods replace all of that with a single function call:

const totals = expenses.map(e => e.amount);

Same result. No index variable. No manual pushing. This module teaches you how.

The BudgetBuddy data shape

Throughout this module you will work with a consistent array of expense objects. Get familiar with the shape now — you will see it in every lesson:

const expenses = [
  { id: 1, description: 'Coffee', amount: 4.50, category: 'Food', date: '2024-01-15' },
  { id: 2, description: 'Bus pass', amount: 30.00, category: 'Transport', date: '2024-01-14' },
  { id: 3, description: 'Lunch', amount: 12.75, category: 'Food', date: '2024-01-15' },
  { id: 4, description: 'Gym membership', amount: 45.00, category: 'Health', date: '2024-01-10' },
  { id: 5, description: 'Dinner out', amount: 38.20, category: 'Food', date: '2024-01-16' },
];

Each expense has an id, description, amount, category, and date. By the end of this module, you will know how to extract amounts, find specific items, filter by category, and sum totals — all without writing a single for loop.

Exercise

Create a new file called expenses.js in a working folder. Paste in the expenses array above. Then answer these questions in code — use only what you already know (bracket notation, .length, and for loops if you need to):

1. How many expenses are in the array?
2. What is the description of the third expense?
3. What is the total of all amount values? (Add them manually or with a loop.)

Run the file in the browser console or Node.js. Record the answers — in the next few lessons you will get the same results with far less code.

Recap

• Arrays are ordered lists of values, indexed starting at 0.
• Arrays are reference types — assigning an array to a new variable copies the reference, not the values.
• Some methods mutate the original array; others return new values. Most of the methods in this module return new values.
• The modern array methods replace manual for loops with declarative, expressive function calls.
• The BudgetBuddy data shape — { id, description, amount, category, date } — appears throughout this module.