Simply put, arrays are collections. I think you know what an array is in real life. Think about in terms of a group of movies, music, art, books, etc. These are all arrays or collections. So, that’s all it is. Not scary!
In programming, arrays allow us to hold a lot of information and have only one variable. Think about that for a second. If I were to ask you to create 50 variables, how enthusiastic would you be? Think about your last homework. How many variables, methods, etc. did you have to make? Was it a struggle to keep things straight? If you answered yes to any of these questions, you were not alone.
Removing multiple variables is where arrays come in to make things easier. Remember, we want to reduce maintenance and increase reusability. Arrays help with that too!
So, how are they defined in code?
<html>
<head>
<title>Arrays</title>
<script>
function printArray()
{
var food = ["apple", "orange", "grape"];
var allFoods = "";
for(var i = 0; i < food.length; i++)
{
allFoods += food[i] + "<br>";
}
document.getElementById("myFoods").innerHTML = allFoods;
}
</script>
</head>
<body onload="printArray();">
<div id="myFoods"></div>
</body>
</html>
The previous code snipped is a classic example of creating an array by setting aside three memory locations, with three values containing all strings (because arrays can hold the same type). As you can see, though, there is one variable that allows us to access three different values instead of having three different variables. Cool huh?
We can also create arrays by creating an instance of the Array class. I know we haven’t formally talked about classes and objects; we have used one class already — the Math class. We just didn’t create instances of it.
What are classes and objects you ask? Simply put, a class is a generic template, and an object is a specific instance of that class. You can think of it like this. You can have a Person (the class). All people have some number of eyes, ears, arms, legs, the color of their hair, the color of their eyes, height, weight, etc. A specific person (the object) who has two eyes, two ears, two arms, one leg, brown hair, green eyes, 6 ft tall, 240 lbs. Does that make sense? If this doesn’t make complete sense, we will cover this in more detail later.
However, in code, it looks something like this.
<html>
<head>
<title>Arrays</title>
<script>
function printArray()
{
var food = new Array("apple", "orange", "grape");
var allFoods = "";
for(var i = 0; i < food.length; i++)
{
allFoods += food[i] + "<br>";
}
document.getElementById("myFoods").innerHTML = allFoods;
}
</script>
</head>
<body onload="printArray();">
<div id="myFoods"></div>
</body>
</html>
If you run the code, the result is the same. So, what is the difference you ask? Not a whole lot. It’s just two different ways to create arrays.
Now, there should be something I did that should be interesting to you. How did I get the information out of the array? I used the [] brackets.
var food1 = food[0];
The previous line of code says retrieve the first element in the array. Keep in mind all arrays start at zero and go up to the size of the array minus 1.
What if I want to make a change to an element in an array?
One interesting thing to note is that I can use the same syntax and just assign it. It looks like this.
food[0] = "peaches";
Now, instead of apples in the first element, it has peaches.
Another way to specify an element in an array is to call the index of the array.
There are a couple of unique properties and methods that go along with arrays. One property is called length. That returns how many items are in the array. Earlier, the for loop went up to but didn’t include the length of the array. That is because it started at zero and can only access the index that is one less than the total size. So, in this case, 2. It counts as three elements; it’s just that we start at zero.
Another special method is sort, which sorts arrays.
<html>
<head>
<title>Arrays</title>
<script>
function printArray()
{
var food = new Array("apple", "orange", "grape");
food.sort();
var allFoods = "";
for(var i = 0; i < food.length; i++)
{
allFoods += food[i] + "<br>";
}
document.getElementById("myFoods").innerHTML = allFoods;
}
</script>
</head>
<body onload="printArray();">
<div id="myFoods"></div>
</body>
</html>
At first glance, that might not seem like a big deal, but trust me, it’s a big deal to have this. Some University classes are spent trying to figure out the fastest way to sort information. So, to have one that is built-in. Be thankful!
You can also add to an array, but using the push method. It looks like this.
<html>
<head>
<title>Arrays</title>
<script>
function printArray()
{
var food = new Array("apple", "orange", "grape");
food.push("pear");
var allFoods = "";
for(var i = 0; i < food.length; i++)
{
allFoods += food[i] + "<br>";
}
document.getElementById("myFoods").innerHTML = allFoods;
}
</script>
</head>
<body onload="printArray();">
<div id="myFoods"></div>
</body>
</html>
The beautiful part was that I didn’t have to change my for loop because it uses the length property. Also, this makes our arrays dynamic, which means we can make them grow if more data comes along.
So, how can we create an array of unknown size? We will use one more special method called split. The string calls this method and sends in a delimiter as a parameter to the function. The delimiter is what separates the strings from one another. The split function returns an array. How does it work in practice?
<html>
<head>
<title>Arrays</title>
<script>
function printArray()
{
var friends = "George,Grace,Ella,John,Meghan,Ben";
var separateFriends = friends.split(",");
var allFriends = "";
for(var i = 0; i < separateFriends.length; i++)
{
allFriends += separateFriends[i] + "<br>";
}
document.getElementById("myFriends").innerHTML = allFriends;
}
</script>
</head>
<body onload="printArray();">
<div id="myFriends"></div>
</body>
</html>
Arrays are neat, and I hope you learn to love them. They are so valuable.
Be mindful that we can do a lot more with arrays, like adding objects, methods, and more, but this hopefully will serve as a bit of an introduction.