JavaScript Arrays 101

In my previous blog, I discussed about the very basic topic of variables, of how they store data. Arrays are another interesting way of storing data but in a different way.

But before discussing arrays seriously, let's go cherry picking! , Imagine we are in a garden full of strawberries, blueberries, raspberries etc. Now for picking them what's the most basic requirement for us to have?, Yeah you are right! , a basket. We can keep all the different berries in a basket , that makes it easier to carry them and later to find them.

Similar to this, is how arrays work. They are the basket for our berries or values. It is useful for grouping similar data together, sending a lot of information in compact form and most importantly accessing them later when required.

What Are Arrays?

Ok, so let's go back to cherry-picking, lets store all the berries in variables

let strawberry = "Strawberry"
let blueberry = "Blueberry"
let raspberry = "Raspberry"
let blackberry = "Blackberry"

Hold on a minute! , are we really going to store all the berries in their separate variables? Doesn't this sound odd?, like bringing small baskets for each kind of berries?, why don't we just have one big basket for all the berries? It's time to use an array,

An array is a way to store multiple values inside a single variable.

let berries = ["Strawberry", "Blueberry", "Raspberry", "Blackberry"]

That's how you define an array, the values are written inside square brackets [], separated by commas , and all of it can be stored in a variable.

Instead of creating many separate variables, we store everything in one structure. Just like how we keep all the berries in one big basket.

In simple terms:

An array is a collection of values stored in order.

How to Create an Array

In JavaScript, arrays are created using square brackets [].

Example:

let berries = ["Strawberry", "Blueberry", "Raspberry", "Blackberry"]

Here:

• berries → name of the array

• "Strawberry", "Blueberry", "Raspberry", "Blackberry" → values stored in the array

In JavaScript, arrays can store different types of values as well.

Example:

let data = ["name", 21, true]; //[string, number, bool]

But usually arrays store similar types of data.

Accessing Elements of an Array

Each value stored in an array has a position associated with it, called an index.

Important rule:

Array indexing starts from 0, not 1.

Example array:

let berries = ["Strawberry", "Blueberry", "Raspberry", "Blackberry"]

Here, the Index positions look like this:

Index:      0            1           2           3
Value: "Strawberry" "Blueberry" "Raspberry" "Blackberry"

To access an element we use:

arrayName[Index]

Example:

console.log(berries[0]); // Strawberry
console.log(berries[1]); // Blueberry
console.log(berries[2]); // Raspberry
console.log(berries[3]); // Blackberry

Updating Elements in an Array

We can also change values inside an array using the index.

By simply writing arrayName[Index] = new value , we can overwrite the past value at that index.

Example:

let berries = ["Strawberry", "Blueberry", "Raspberry", "Blackberry"]

berries[1] = "Cranberry";

console.log(fruits);

Output:

["Strawberry", "Cranberry", "Raspberry", "Blackberry"]

Here we replaced "Blueberry" with "Cranberry".

Array Length Property

JavaScript provides a built-in property called length that tells us how many elements are in an array.

Example:

let berries = ["Strawberry", "Blueberry", "Raspberry", "Blackberry"]

console.log(berries.length);

Output:

4

This is useful when we want to loop through all elements.

We can also find the last element using length.

We know that berries.length gives number of values in the array, so we can use that number as index of the same array to get the last element.

Note that we have to do berries.length-1 because array index starts with 0 so the index of last element would be one less than the length of the array.

Example:

let arrayLength = berries.length
//then
let lastIndex = arrayLength - 1; 

Now for the last element we can simply do:

let lastElement = berries[lastIndex];

console.log(lastElement) //Blackberry

We can also do all this in one go:

console.log(berries[berries.length-1]);

Looping Through an Array

Often we want to perform an action or run a check on every element in an array.

Like, multiplying each element by 2 or checking if the numbers in the array are even.

For that we use loops.

Example:

let berries = ["Strawberry", "Blueberry", "Raspberry", "Blackberry"];

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

Output:

Strawberry
Blueberry
Raspberry
Blackberry

Here the loop goes through each index and prints the value stored there.

But wait, doesn't that look too complex? like what's "for" and what are those "math equations" inside the parenthesis?

Let's understand it clearly,

So the Loop we used here is called the "for loop"

We start of by writing for followed by parenthesis: for(),

Now, inside the parenthesis, there are three components separated by semi colons ;

initialization ; condition ; increment

Let’s look at our example again:

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

Now let’s break this down step by step.

Initialization:

let i = 0

Here we create a variable i , this variable acts like a counter that keep tracks of our current index in the array.

Note that we can start this counter from any index, not necessarily 0.

Condition:

i < berries.length

This is the part where we define a condition , which when satisfied should stop the loop. In our example we used this condition because the last index of the array is berries.length-1 , so we want the counter to stop once it is equal to berries.length.

Increment:

i++ //same as i = i+1

This simply means increase the value of i by 1 after each loop.

So the value of i changes like this:

0 → 1 → 2 → 3 → 4

Each time the loop runs, i moves to the next index of the array.

Note that , we can increase or decrease the value of i however we want, i-- or i*=2 or i/=2 etc.

How the loop runs:

Let’s say our array looks like this:

["Strawberry", "Blueberry", "Raspberry", "Blackberry"]

The loop works like this:

i = 0 → berries[0] → Strawberry
i = 1 → berries[1] → Blueberry
i = 2 → berries[2] → Raspberry
i = 3 → berries[3] → Blackberry

Each time the loop runs, it prints the berry at that index.

So the output becomes:

Strawberry
Blueberry
Raspberry
Blackberry

In simple words, this for loop is just a way to say:

Start from the first element, move forward one by one, and do something with each item until the array ends.

Some Fun with Array

Let's use what we learned to work on an array.

So, my friend sent me a list of his favorite movies in order

Let's store them in an array:

let movies = ["Inception", "Interstellar", "Avengers", "Joker", "Tenet"];

There we go, all the movie stored in a variable.

Now, he wants us to print his best and the last movie from the list

Let us do that:

console.log(movies[0]); // First movie
console.log(movies[movies.length - 1]); // Last movie

Output

Inception
Tenet

There we go, his number one is Inception and he likes Tenet too just not as much as the others in the list.

So, I just had another chat with him and I asked his review on the Avengers movie.

His story didn't align with that of avengers, he was talking about a boy bitten by a radioactive spider, oh wait a minute! he probably mixed up Avengers and Spider-Man.

Now, we should fix the array, do you know how we can reassign the value at 2nd index?

movies[2] = "Spider-Man";

I think we are all done with the quick fix.

Now let's just loop through the array and print every element to make sure they are right:

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

Output:

Inception
Interstellar
Spider-Man
Joker
Tenet

Now we are all done, I promise. But looking back this was really fun!

Conclusion

Arrays are one of the most important data structures in Programming.

They allow us to store multiple values inside a single variable, making our code cleaner and easier to manage

In this article we learned:

• What arrays are

• How to create an array

• How indexing works in an array

• How to update elements of an array

• How to use the length property and,

• How to loop through arrays

Arrays become even more powerful when combined with other JavaScript features, but mastering these basics is the first step.