JavaScript Arrays 101

Imagine you are heading to the grocery store and you need to remember what to buy. You could write down each item on a separate, tiny piece of paper. You would have one piece of paper for apples, another for bread, and a third for milk.

In programming, doing this is exactly like creating separate variables for every single piece of data you want to store. It would look something like this:

let item1 = "Apple";
let item2 = "Bread";
let item3 = "Milk";
let item4 = "Eggs";
let item5 = "Cheese";

This works if you only have three or four items. But what if you have a grocery list of fifty items? Creating fifty separate variables is going to make your code messy, difficult to read, and incredibly hard to manage.

This is exactly where arrays come to the rescue.

An array is simply a collection of values stored in a specific order within a single variable. Instead of juggling dozens of individual pieces of paper, an array acts like a single notepad where your entire list is neatly written down line by line.

let groceryList = ["Apple", "Bread", "Milk", "Eggs", "Cheese"];

Now, all your items are grouped together in one logical place.

How to Create an Array

Creating an array is straightforward. In most programming languages, you use square brackets to tell the computer that you are making an array. You then place your items inside those brackets and separate each item with a comma.

Here is an example of creating an array to store a list of your favorite fruits:

let favoriteFruits = ["Mango", "Banana", "Strawberry", "Pineapple"];

You can store almost anything in an array. You can store numbers, text, or even a mix of different types of data depending on the language you are using.

Accessing Elements Using an Index

Once you have your data stored safely in an array, you need a way to get it back out. Every item in an array is assigned a specific position number. This position number is called an index.

There is one crucial rule you need to remember about how computers count. Humans naturally start counting at the number one. Computers, however, start counting at zero.

This means the very first item in your array is located at index 0. The second item is at index 1, the third is at index 2, and so on.

Let us look at our fruit array again:

• Index 0 is "Mango"

• Index 1 is "Banana"

• Index 2 is "Strawberry"

• Index 3 is "Pineapple"

To access a specific fruit, you write the name of the array followed by the index number in square brackets.

console.log(favoriteFruits[0]); // This will print "Mango"
console.log(favoriteFruits[2]); // This will print "Strawberry"

Updating Elements

Arrays are flexible. Just because you put a value into an array does not mean it has to stay there forever. You can easily update or change the value of any item by referring to its index.

Let us say you realize you actually prefer peaches over bananas. You can go to the exact slot where "Banana" is stored (which is index 1) and replace it with "Peach".

favoriteFruits[1] = "Peach";

// Now if we print that same index, the value has changed.
console.log(favoriteFruits[1]); // This will now print "Peach"

The rest of the array remains completely untouched. Only the item at index 1 was updated.

The Array Length Property

When you are working with data, you often need to know exactly how many items are currently sitting in your array. You do not have to count them manually. Arrays come with a built-in feature called the length property.

The length property tells you the total number of items inside the array. Unlike the index which starts at zero, the length counts just like a human does, starting at one.

let marks = [85, 92, 78, 90, 88];
console.log(marks.length); // This will print 5

This property is incredibly helpful because it allows your code to adapt dynamically. If you add or remove items later, the length property will automatically update to reflect the new total.

Basic Looping Over Arrays

The true power of an array becomes obvious when you need to perform the same action on every single item inside it. Instead of writing out a separate line of code for every index, you can use a loop.

A standard for loop is perfect for this. We can set up a loop to start at index 0 and keep going as long as the index is less than the total length of the array.

Here is how you would print out every single fruit in your list one by one:

let tasks = ["Wake up", "Drink water", "Write code", "Read a book"];

for (let i = 0; i < tasks.length; i = i + 1) {
    console.log(tasks[i]);
}

In this code block, the variable i acts as our index. It starts at 0, prints the task at index 0, and then increases by 1. It then prints the task at index 1, and so on, until it reaches the end of the array. This saves you an enormous amount of time and keeps your code remarkably clean.

---

Your Assignment Idea

Now it is time to put this knowledge into practice. Try completing the following exercise on your own to solidify what you just learned.

1. Create a new array that contains the titles of 5 of your favorite movies.

2. Write code to print exactly the first movie and exactly the last movie in your list.

3. Change the value of the third movie in your array to a completely different movie, then print the updated array to prove it changed.

4. Set up a basic loop to go through your array and print every movie title out one by one.