Earlier we looked at datatypes and variables. Arrays take the concept of a variable or binding one step further and allow us to form groups of values within a data structure, which we can then manage in our code. A good use for an array is a list of data. Arrays not only let you group data, but they offer a range of tools or methods to update and manipulate their contents. They are used commonly across different programming languages and have become a routine way of passing around data within applications.
- John Smith
- Michael Johnson
- Paula Sanford
- Jenny Carter
To create variables for these students, we would have previously done something like:
let student1 = "John Smith" let student2 = "Michael Johnson" let student3 = "Paula Sanford" let student4 = "Jenny Carter"
Instead of separate variables, we are going to use an array to store all four students.
→ Try it out
Create two files called index.html and script.js and enter the code below into each. Alternatively, if you followed along in the previous lesson, use the existing script.js file and replace its content with code below. Note, to initialize an array, the format expected is surrounding square brackets, followed by each data element separated by a comma.
To see the results: open index.html in your browser and open the console, Press Ctrl+Shift+J (Windows / Linux) or Cmd+Opt+J (Mac).
In your console, you should see the output of your array: (4) [“John Smith”, “Michael Johnson”, “Paula Sanford”, “Jenny Carter”]
The number in parenthesis let’s us know that there are four elements in our array. The contents of the array are also displayed. While it is nice to be able to recall our students directly by viewing the contents of an array, to make an array usable, we would need to be able to access and manipulate the individual elements contained within.
Accessing Array Elements
Arrays are zero-based, meaning that they count their elements starting from zero. In the example above, John Smith would be in the zero position, Michael Johnson 1, and so on. To access a specific element within an array, we simply specify the element number we are interested in. If we wanted to return Paula Sanford we would do so by entering the following command:
Note that Paula is represented by 2 and would be returned in the console.
Array Data Types and Array of Arrays
In addition to this, arrays can also contain complex data types such as other arrays or objects (which we will cover in a future lesson). Try adding the mixedArray and arrayOfArrays variables to your script as shown below and then inspect the results in your browsers console.
Working with Arrays
The Array Prototype
Think of a prototype as a bag of tools that comes with every new array.
To see these tools, let’s go back to our earlier script by refreshing the browser window and inspecting the console output.
Image Credits: Photo by fabio on Unsplash.