JavaScript arrays

Arrays are an integral part of JavaScript programming (or programming in any language) and are probably one of the most useful things you can master. You should consider using an array whenever you are working with a list or a set of values that are related to each other. In this short blog I will be walking you through arrays and some of the methods that are most commonly used which I hope you will find helpful, so let’s dig deep!

An array is a special sort of variable that unlike a standard variable, stores more than one value. Imagine you have a list of items that you wanted to store in a variable, you could assign each item to it’s own variable but it would make more sense to store them all in one variable for easier access. Here is an example of how the basic syntax would look if we stored all our items in an array:

We would first assign it to a variable (you can either use the var keyword or for the later ES6 use const, like I have in the screenshot) and then the values would be in quotes (only if the values are strings data types) and comma separated. Because arrays are special kinds of objects, you can have other data types as well as strings stored in them, so we could also add booleans, numbers etc. We could also store an array inside of an array! Now that we have established what an array looks like, let’s look at some ways that we can access and edit an array.

Any of the items in the array can be accessed individually, we would achieve this by referring to it’s index number. The index number always starts at 0, so if you had 5 items in the array then the first item would be 0, second would be 1 and so on. The syntax would as follows in my screenshot below where I have targeted the first item and logged it to the console:

We can also add and delete items to our array, the most common ways to add items is to use a the push method. The push method adds an item to the end of an array and is very useful as it can be used for example, to add an item to a to-do-list. Another method is the unshift method which will add an item to the beginning of an array. An example of the push method is shown below, the output in the console once the new item is added would be ‘bike’, ‘phone’, ‘car’, ‘jacket’.

To delete items from the array we would use the pop() or shift() methods. The pop method removes the last item on the end of an array and the shift method removes the first array element and “shifts” all other elements to a lower index. Both of these methods are very useful but what if we wanted to find and remove a specific element from an array? We could use a method called indexOf() combined with another called splice().

The indexOf method finds the index number of the item that we want and then the splice method will remove that item from the array using the index number. Here is a screenshot example of how it would work, we will be removing bike from the list.

Another method that is very important is the ability to display our array data to a web page, so I will cover some ways we can do that and also how we can display data and format it. One of the best methods to loop through an array is by using forEach. Ordinarily a standard for loop would be used to loop through data but the forEach method calls a function (a callback function) once for each array element. I have added an example below of the forEach loop in it’s most basic form:

Another method that is very important is the ability to display our array data to a web page, so I wThe map() method is simliar to forEach but as well as looping through and displaying the data we also create a new array by performing a function on each array element. (Please note, the map method does not change the original array). For demonstrative purposes and ease I have set up a new array this time with some objects that include an item of a person’s first name and the last name. The map function is going to take both firstname and lastname and join them displaying each full name in a list.

There are many more array methods that can be used for different tasks and like with most things in programming (and web development as a whole), there is usually more than one method available to carry out a job.

I hope this blog has been helpful and easy to understand, one of the best ways to learn is to try and apply it real time so think of a way that you can use arrays on a real world project whether it be a web page displaying data or a simple to-do-list. One of the things I did a while ago was applied array methods to build a quiz app which can be viewed on my Github repository here.