Arrays are data structures represented with square brackets like this: [], if you know Python, you will realize that it is similar to lists which is also a data structure represented with square brackets. If you have watched programming tutorials enough to know how to declare an empty array, store elements in an array, add elements to the front and end of an array and the most common, looping through an array, then you will benefit even more from this article. If however, you have never heard of arrays before (Which is very rare) This is a quick introduction: declaring an empty array:

let array = []

adding an element to an existing array:

array.push(element)

removing an element from an array:

array.pop()

adding elements to the front of an array:

array.unshift(element)

removing elements from the front of an array:

array.shift()

looping through an array:

for(i = 0; i<array.length; i++){
// code goes here
}

I hope you enjoyed that quick introduction. There are millions (if not billions) of coding challenges out there that requires the use of arrays thereby forcing most beginner programmers to master them, however if you are like me, you will probably ask what’s the point? Why push elements to an array? Why pop? Why loop through an array? You cannot get the answer unless you build real life products with JavaScript and use arrays to solve problems.

Example 1: Lets say you are building a game like Candy Crush but instead of candy, you are dealing with fruits, lets say there are five types of fruits in the game, e.g, pineapple, orange, banana, apple and mango. You want your players to match three or more similar fruits together and once three or more fruits of the same type are matched, those fruits would disappear from the board. You need arrays. First you want to declare an array that will store every occurrence of fruits on the board for that particular level i.e

let fruitArray = [“banana”, “banana”, “apple”, “banana”, “mango”, “apple”, “apple”, “mango”, “mango”, “orange”, “orange”, “orange”]

Now, another array you need is the array that stores all the matched fruits based on their type e.g. an array to store all bananas or all mangoes, then you need an array that will store all the matched fruits. You need this array because any operation you want to perform on these fruits e.g deleting them from the board needs to be performed in bulk. You do this by creating a function to loop through the fruitArray, in the function, you use a for loop to loop though all the fruits in the array, next, you use a conditional if statement to check for particular fruit instances. Here is an example code:

let matchedFruits = []
let matchedBanana = []
function checkFruit(){
for (i=0; i<fruitArray.length; i++){
if( i=== “banana”){
// code goes here
}

One of the major features of your function would be to add the matched fruits to the empty array created for that purpose i.e. matchedBanana, this can be done in the code snippet below:

if(i === “banana”){
   matchedBanana.push(i)
}

After the conditional statement has checked for all instances of banana, you would want to push the banana array into the matchedFruits array like this.

MatchedFruits.push(matchedBanana)

This demonstrates the fact that arrays can store anything including other arrays. Of course, I hope you know checking for matched fruits is more complicated than using a single if statement, but since this article is about arrays, I hope you get the gist.

If you want to really challenge yourself, you can build a full game in the browser with this knowledge. Let me know in the comments if you’ll be interested in building a game like this or if I should post a tutorial on building such a game.

Example 2 This time around, lets say you don’t want to build a game, let’s say you are building a browser extension that helps the user save the passwords they enter on every site they visit. In this case you also need an array. The simplest implementation of this would be to create a function that will be called anytime a user clicks a button. What this function does is to get the password that the user wants from the website and store it in an array. Obviously, you need to declare an empty array first e.g.

let passwords = []

By using an event listener on your button, you can make the button call a function that stores the password in an array. e.g.

button.addEventListener(“click”, function(){
    passwords.push(password)
})

Of course, it is obvious you will need to store the passwords in the local storage and you also need a function to retrieve the saved passwords. Also, you will need another array to store the names of the websites. An advanced way to do this would be to use a JavaScript object within an array to avoid creating two arrays, e.g.

let passwords = [ {“website”: "", “password”: ""}]

Again, let me know in the comments if you will want to work on a project like this. Or if I should post a detailed tutorial on such a project.

Example 3 Lets say this time you are building a color palette generator, assuming you are using the HTML color picker i.e.

<input type= “color” id = “picker”>

you want each color the user picks with the color picker to be stored in a custom color palette that they can use in their projects, you also need an array.

An event listener is used to detect whenever a new color is picked an a function is called to store each of the color in an array, just like in the previous examples, this array needs to be initialized as empty. e.g.

colorPalette = []

e.g.

const colorPicker = document.getElementById(“picker”)

colorPicker.addEventListener(“change”, function(){
  colorPalette.push(colorPicker.value)
})

This function will store the value of the color, in hexadecimal format in an array called color picker, it is up to you, the programmer to decide what next to do with the array.

In conclusion: The major point of learning programming concepts is to use them to build amazing products and solve real life problems, as a beginner, these three examples should get you started with using arrays for real life problems.