A JavaScript array is like a pocket folder

We call array to a variable that points to a list of data items. This list is like a pocket folder. In this pocket folder each location is numbered and it starts from zero. Inside of these pockets we have stuff.

Below we see the code script we will discuss in this article. This script contains an array and a for loop to search for the biggest number in the array. In our example, pocket zero has 4 as its stuff, pocket one has 5 as its stuff, etc.

// traversing an array in search of big num

var myArray = [4, 5, 6, 99, 68, 7, 24];
var biggestNum = 0;

for (var i = 0; i < myArray.length; i++) {
    if (myArray[i] > biggestNum) {
        biggestNum = myArray[i];
    }
}
console.log(biggestNum);

// displays 99

Ok, roll up your sleeves and let’s dig in. First we test the script above and then we discuss it line by line as we explain the array concept.

Fire up your Google Chrome JavaScript console by clicking on the key sequence CTRL+SHIFT+j on Windows or CMD+OPT+j on Mac. NOTE: If this is your first time using the console, click on the bottom left square button to detach the console from the browser and minimize the browser. Make sure you are not reading this blog using the same browser.

The above script is not the whole story. JavaScript has some hidden code in its library to help us search through Arrays.

When we need to search an array we grab this functionality by typing a macro, something like a shortcut, as seen on line 6, above. We will get to it soon but first let’s define .length:

.length (reads dot length) is a shortcut that calls a very complex program from the JavaScript library, to come and check the size of the Array, how many pockets it has.

.length is actually a property, instead of a method,  but we should not be concerned with semantics right now.

So, when I say arrayName.length, JavaScript gives me the numeric size of my Array.

The size of the array on our example is 7.

Another very important shortcut is this one: for (var i = 0; i < myArray.length; i++)

We call this shortcut a “for loop“. The name is just so that we know what the other person is talking about. Our for loop states the following:

for variable i starting at zero, as long as i is less than the length of myArray, keep incrementing i.

It is a good idea to read this statement aloud a coupe of times, because it will always be the same when traversing arrays, and by repeating it you will master it.

What this shortcut does is the following:

It calls the JavaScript library and activates a complex mechanism that takes the first variable we give it, (var i), and it uses it on some condition we write next, as a second parameter. In our case, we want the loop to keep going, as long as i is less than the length of our array: i < myArray.length).

To make sure that i reaches a value as high as the array.length, we increment i: i++

for (var i = 0; i < myArray.length; i++) {

JavaScript knows that this is actually a shortcut to go into the Array and step through each pocket to do something.

It also knows that whatever that something is, it is going to be stated below, in the body of the loop:

if (myArray[i] > biggestNum) {
        biggestNum = myArray[i];
    }

So, in the body on line 7, we program the machine to check if any of the array pockets at a position number coinciding with a certain momentary i, has a number which is larger than the number assigned to variable biggestNum. Remember that i is counting up until it matches a number equal the size of the array. For each count, JavaScript reads a location at the array and returns the resulted value.

On line 8, we tell JavaScritp that, if the pocket has a number bigger than biggestNum,  change the number in the variable biggestNum to the bigger number from the pocket. It is not a transfer, it is a copy. Here, myArray[i] means, the value of myArray at a location numbered coinciding with the current value of i.

In this way, by the time we end the loop, the variable biggestNum will have stored the biggest number from myArray.

The new JavaScript library has a method that will do this magic in fewer lines of code and it is much simpler to program. I explain about it on my latest eBook “JavaScript Objects Functions and Arrays Explained“.

If you love JavaScript like I do, you will enjoy reading it.
Use the free amazon “Kindle for PC” app to read it on your computer.

Advertisements

Author: tarau

technical writer, web technologies

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s