Array Basics in JavaScript

Now let's collect several of our budget app's amounts in a single structure: an array. This chapter covers basic operations – the powerful transformation methods (map, filter, reduce) follow in chapter 11.

Creating and indexing an array

const amounts = [2400, -850, -120, -60, 300];

console.log(amounts[0]);  // 2400 - first entry, index starts at 0!
console.log(amounts[4]);  // 300 - last entry
console.log(amounts[5]);  // undefined - index doesn't exist, NO error
console.log(amounts.length); // 5

Adding and removing elements

const amounts = [2400, -850];

amounts.push(-120);     // add at the END: [2400, -850, -120]
amounts.unshift(100);   // add at the START: [100, 2400, -850, -120]

const last = amounts.pop();    // REMOVE and return the last element: -120
const first = amounts.shift(); // REMOVE and return the first element: 100

console.log(amounts); // [2400, -850]

Achtung: push, pop, shift, unshift mutate the ORIGINAL array ("mutating"). unshift/shift are also slow on LARGE arrays, since EVERY subsequent element must be re-indexed – doesn't matter for our small budget app, but good to know.

Searching an array

const amounts = [2400, -850, -120, -60, 300];

console.log(amounts.includes(-850)); // true - is the value present?
console.log(amounts.indexOf(-120));   // 2 - at which index? -1 if not found
console.log(Array.isArray(amounts));  // true - is this even an array? (typeof only returns 'object')

Slicing with slice()

const amounts = [2400, -850, -120, -60, 300];

console.log(amounts.slice(1, 3)); // [-850, -120] - index 1 through EXCLUSIVE 3
console.log(amounts.slice(-2));   // [-60, 300] - the last two elements
console.log(amounts);             // unchanged: [2400, -850, -120, -60, 300] - slice() is NOT mutating!

Tipp: slice() (not to be confused with splice()!) always returns a NEW array and leaves the original untouched – the opposite of the mutating methods above. This mutating-vs-non-mutating distinction runs through the entire array API and becomes even more important in chapter 11.

Nested arrays

For our budget app: a list of months, each month itself an array of daily amounts:

const monthlyAmounts = [
  [50, -20, 100],   // January
  [-30, 200, -15],  // February
];

console.log(monthlyAmounts[0][1]); // -20 - January, second entry

Our budget app's first transaction list

With this, we have the tools for a real transaction list – still as simple number arrays; in chapter 12 these turn into objects with a description, category, and date:

src/index.js

const transactionAmounts = [2400, -850, -120, -60, 300, -45];

let incomeTotal = 0;
let expenseTotal = 0;

for (const amount of transactionAmounts) {
  if (amount > 0) {
    incomeTotal += amount;
  } else {
    expenseTotal += amount;
  }
}

console.log(`Income: ${incomeTotal}`); // Income: 2700
console.log(`Expenses: ${expenseTotal}`);   // Expenses: -1075
console.log(`Balance: ${incomeTotal + expenseTotal}`); // Balance: 1625

In chapter 11, we'll replace this manual loop with the far more elegant reduce() method.