Working With Javascript Arrays

When I think of an array, I like to imagine it as a book shelf. You may wonder, what could a book shelf have in common with an array? Just think of a book shelf as a container (or, in javascript lingua, a variable) for holding multiple items. It could hold different kind books – like a bible, an academic textbook, a novel, a magazine, etc. If you were to place these items in the shelf, you would most likely place them one after the other, either vertically or horizontally. What do they all have in common? They are books. At any time, you could add a book to the book shelf, or remove a book from the book shelf. Now, an arrays work in a similar way.

An array is used to store a collection of related items in the same container or variable. While the simple variable is used to store a single data at a time, an array can be used to store multiple related items/data. Say, for example, you have 5 textbooks, instead of storing them differently with each variable containing the name of a single textbook till you get to 5, you could easily just create an array of textbooks to hold all 5 of them. This is the syntax for creating an array:

var a = [ ]; // this creates an empty array.

Following the above example of having 5 textbooks, you could then create an array of your textbooks like this:

var textbooks = [“Maths”, “English”, “Literature”, “Geography”, “Economics”];

If we want to retrieve a piece of data from the array, we would have to use the name of the array and specify the position of that piece of data using square brackets. Arrays work with numbers (that is, positions) rather than with names. Remember that computers are zero-based index, meaning they start counting from zero (0). We retrieve items from an array in the same way that we create arrays – by using square brackets. So, if we want to retrieve our “English” textbook from the array, we have to use the following syntax:

textbooks [1]; // we have merely retrieved it but then we are not doing anything with it.

However, we could save it to a variable for future purposes.

var englishTextbook = textbooks[1]; // save the value of “English” in this variable

This is because “Maths” is at position 0, “English” is at position 1, “Literature” is at position 2, and so on. Also, this is fairly easy because, given this example, we already know what position “English” is. However, there are times (or, perhaps, most times) when we do not know where an, or even if a particular, item is in an array list. In such a scenario, what do we do? This is where the array includes() function comes into play. You can use this function to find out if an array includes a particular item. Now, if we want to find out whether the textbooks array includes “English”, this is how we could do that:

var textbooks = [ ]; // the array is empty at this point

var textbooks = [“Maths”, “English”, “Literature”, “Geography”, “Economics”]; // a list of items (strings have been stored inside the array)

var englishCourse = "English"; // a string has been stored to this variable

if (textbooks.includes(englishCourse) ) {

    alert ("Yes, English is listed here.");

} else {

    alert ("Sorry, no textbook by that name.");

}

This outputs an alert saying “Yes, English is listed here.” because there is actually a string in the textbooks array matching the value of the variable englishCourse which we passed into the includes() function.

Speaking of arrays, there are lots of array functions which you need to know about. I won’t list all here but there are one or two worth mentioning. There is the push() function and the pop() function. The push() is used to add an item to an already existing array.

So, if we wanted to add another course to our textbooks[ ] array mentioned above, this would be the syntax:

textboooks.push(“Government”);

This adds the string “Government” to the array and the position of this added item would be after the last item in the array (in this case, after the string item “Economics”). Now, the last item in our array is “Government”. Always remember that the push() doesn’t work in a random manner, it always pushes the item to the end (or last position) of the array list.

The pop() is used to remove an item from an array, and it works just like the push function. In its default setup, it removes the last item on the array list. If you call on the bare array pop() function, it removes the last item on the list. The syntax for this, given our textbooks scenario above, is:

textbooks.pop();

However, if you want to be more specific about the item you wish to remove from the array list, then you have to pass in the particular item you wish to remove when calling the pop(). The syntax for this would, if we want to remove “English” from our example above be:

textbooks.pop(“English”);

Another way to do this is to pass in the name of the variable that holds the specific name, that’s if the name was stored in a variable before being added ( using the push() ) to the array list. An example of this, still on our textbooks scenario above, would be:

alert (textbooks); // outputs the list of items in the textbooks array

textbooks.push("CRS"); // adds another item, “Faridah”, to the list without storing it in a variable first

var favCourse = textbooks.push("Law"); // creates a variable favCourse  with a value of the string “Law” and equally adds the variable with its value to the list of items in the textbooks array.

console.log(textbooks); // outputs the list of items in the array again, just for confirmation that the items have been added to the array list

textbooks.pop(favCourse); // removes the variable from the array list

console.log(textbooks); // outputs the list of names again for confirmation that the variable favCourse has been removed from the array list