Arrays
An array is a type of list. It can hold a bunch of items in it. And those items can be any type of variable, object, function, or even other arrays. Arrays are immensely useful, as are the many methods that are predefined for them.
Declaring an Array
Use the let keyword and square brackets [] to declare an array.
Syntax:
- let myArray = [item1, item2, ...];
- //Empty array:
- let emptyArray = [];
Examples:
- let colors = ["blue", "red", "green"];
- let scores = [test1, test2, test3, test4];
- let numbers = [317, 12, -8402];
As Booleans
In JavaScript, arrays are always considered true, even if they they are empty, [].
Indexes
To use an array, you often need to use an index. This represents the location of an item inside an array. Use square brackets to access items by index.
Indexes start at zero. So the first item is index 0, not index 1.
let colors = ["blue", "red", "green"];
| Element in the colors array | "blue" | "red" | "green" | //empty |
| Index number | 0 | 1 | 2 | 3 |
| How to access the element | color[0] |
color[1] |
color[2] |
color[3] |
| Output | "blue" | "red" | "green" | undefined |
Examples:
- //these are based on the arrays created above
- colors[0]; //shows "blue"
- scores[3]; //shows value of the test4 variable
- numbers[5]; //shows undefined
There was no item in the numbers list as the fifth index, so it comes back as undefined.
That's better than it returning an error, but it pays to be careful not to overshoot your array's size.
Reassigning values inside of an array
You can also change an array item by reassigning the value at a given index. Let's say that test2
tripped up a lots of kids and you decide to give a new test. You can replace the test2 score with the
newTest2 score by using the following: scores[1] = newTest2;
Just set the array index you want to change to the new value!
Array length using .length
Sidenote:
Getting the length of an array is extremely useful. We can use it with a for loop in
order to access each element in the array, one at a time. This lets us do many possible things, like reformat each
element, do some math, display the value, and so on. There's another way to do that, too, by using another array
method, .forEach(). We'll get to that in a bit.
When you need to know how many elements are in your array, all you need to do is use the .length property. This returns the number of items in your array up to the last item
that is defined. This means that if you have any gaps in your array (undefined spots)
those are counted as well. This is just like the .length property of
strings.
Example 1:
- //the colors array is ["blue", "red", "green"]
- colors.length; //3
- //the scores array is [test1, test2, test3, test4]
- scores.length; //4
Example 2:
- //let's create an empty array and then add to it
- let testArray = [];
- //the test array is []
- testArray[4] = "testing";
- //now the test is [undefined, undefined, undefined, undefined, "testing"]
- testArray.length; //5!
The testArray example goes like this: We created an empty array [], then we set a value
at index 4. Remember that the array starts at index 0, so index 4 is actually
the fifth item. Indexes 0, 1, 2, and 3 were never given values,
so they're all undefined. But in counting the length of the array, the computer counts
all the way up to that fifth spot, which is holding "testing" inside. So it returns a length of
5.
Finding an index in an array using .indexOf(item)
This is similar to the .indexOf() method for strings. You attach this
method to an array and pass it something you're looking for. If it finds the item, it returns its index position. If
it can't find it, then it returns -1.
- //the colors array is ["blue", "red", "green"]
- colors.indexOf("green"); //2
- colors.indexOf("indigo"); //-1
Combining arrays into one
This process is called concatenation, like you can do with strings. This creates a new array with the lists joined together, and the original lists remain untouched.
Syntax:
- firstArray.concat(secondArray); //creates new array
- anotherArray.concat(array1, array2, array3); //adds all the arrays together
- //typically used by assigning to a new variable
- let joinedArray = firstArray.concat(secondArray);
Example:
Let's say two friends went Trick-or-Treating for Halloween. They decide to pour all their treats into a single pile. It would go something like this,
- let steve = ["Twix", "Nerds", "Peppermint patties"];
- let kevin = ["M&Ms", "Smarties"];
- let stash = steve.concat(kevin);
- //stash → ["Twix", "Nerds", "Peppermint patties", "M&Ms", "Smarties"]