Skip to main content

Chapter 4: Spellbooks

Arrays for Collections​

You've learned to store single pieces of data in variables. But what if you have many items to keep track of? Enter arrays, the magical lists that can hold multiple values in a single variable. Think of an array as a spellbook – a collection of spells (or any items) kept together for easy use.

📚 What is an Array?​

An array in JavaScript is a list-like structure enclosed in square brackets [], where each item in the list is separated by a comma. For example, let's make an array of spells:

let spells = ["Accio", "Expelliarmus", "Expecto Patronum", "Lumos"];

Here, we created a variable spells that holds an array of four string items. These are like four spells written in one spellbook (one array).

Arrays can hold numbers, strings, or any type of data, and you can mix types too (though it's usually best to keep them consistent). For instance:

let mixedBag = [42, "house points", true, "Niffler"];

This array has a number 42, a string "house points", a boolean true, and another string "Niffler". It's like a wizard's bag with a random assortment of items. But typically, you'll use arrays for a collection of similar things (all spells, all creatures, etc.).

🔢 Positions and Indexes​

In a spellbook, spells are often numbered or ordered by pages. Similarly, items in an array have an order, starting from 0. Yes, zero. In programming, we count starting at 0 (it's a quirk that you'll get used to):

  • The first item is index 0.
  • The second item is index 1.
  • The third is index 2, and so on.

So in our spells array:

  • spells[0] is "Accio".
  • spells[1] is "Expelliarmus".
  • spells[2] is "Expecto Patronum".
  • spells[3] is "Lumos".

We use the bracket notation arrayName[index] to access an element. For example:

console.log(spells[1]);
// Output: Expelliarmus

This prints the second spell (because index 1 is the second item).

You can also assign new values using the same bracket notation:

spells[3] = "Lumos Maxima";
console.log(spells);
// Output: ["Accio", "Expelliarmus", "Expecto Patronum", "Lumos Maxima"]

We just updated the spell at index 3 (the 4th item) to a stronger version of Lumos. The array spells now reflects that change.

➕ Length of an Array and Adding Items​

Every array has a property called length which tells how many items are in it:

console.log(spells.length);
// Output: 4 (since our spells array has 4 items)

If we want to add a new item to the array, one simple way is to use the push method:

spells.push("Wingardium Leviosa");
console.log(spells);
// Output: ["Accio", "Expelliarmus", "Expecto Patronum", "Lumos Maxima", "Wingardium Leviosa"]
console.log(spells.length);
// Output: 5

We used spells.push("Wingardium Leviosa") to add a new spell to the end of the array. Now the array has 5 spells, and length is 5.

Alternatively, if you know the exact position to put something (and that position is next in line), you could assign it directly by index:

spells[5] = "Avada Kedavra";

However, be careful: if you jump to an index that's not immediately after the last, you might create empty slots. Using push is safer to add to the end without skipping indexes.

🔄 Changing and Retrieving Items​

We saw how to change an item by assigning to its index (like updating Lumos to Lumos Maxima). Retrieving is just reading `