Table of Contents
Introduction
To start, I want to talk about what my goals are when it comes to writing these articles and if you need any prior knowledge to read them.
My goal is to provide information for free about what a Software Engineering degree covers and I'll try to make it as beginner-friendly as possible by providing diagrams, annotations, links and resources where needed.
Note: examples within this article are done in a programming language called JavaScript. I do not expect you to have any prior knowledge as I will be dissecting each section.
I am in no way a writer and nor will I pretend to be one. This will become a mini-series about Data Structures and in the future, I will be writing about topics like Linked Lists, Stacks, Queues, Hash Tables and more.
If you'd like to correct me or have found a useful resource you think others should know about please email me at: jordaohara.dev@gmail.com
Alright, enough of the introductions. Let's get started!
Definition
There’s no better to start than to pull up the definition. Arrays are an ordered collection of items that are typically stored in a sequence of computer memory locations that be accessed via an index or key.
Types
It's important to note, there are three main types of arrays called: indexed; multidimensional and associative;
Zero-Indexed
Below is a diagram of a zero-indexed array which I found on javatutorial.net/java-array. It’s to give you (the reader) a rough physical representation of what an array would look like.
Cool, you might be asking yourself. Why does this matter? Well, for beginners the idea of an array can be quite complex. I needed to provide something that would allow you (the reader) to visualize what an array is.
For this, we're going to use the box analogy. Each 'box' in the array can is referred to as an element.
It can help to imagine an array as a row of cells, each cell containing data. In the case of the diagram, it's a zero-indexed array (which means it starts from zero, however not all languages do follow this standard. You can find the list of programming languages with different default base indexes here if you want to have a look yourself!
Note: because the example starts from zero to access the 4th element in the array we'd need to do this:
let array = [1, 2, 3, 4, 5];
console.log(array[3]); // output: 4
I'd like to just take a moment to tear apart the current statement, to avoid confusion.
let array = []
// above is a blank array, which is assigned to a variable called "array".
// When numbers are provided these will be "slotted" into their indexes.
// okay, let's take a look at the example from above.
// Here I am just overriding the array
// with a new array that contains our values from the above example
array = [1, 2, 3, 4, 5];
// The array will now look something like this
/*
[0] = 1;
[1] = 2;
[2] = 3;
[3] = 4;
[4] = 5;
*/
// so if we want the 4th element we need to target the 3rd index
// from the example above, you can see the 3rd index = 4;
// hence, output = 4; */
Note: If you're still stuck about the indexing an easy way to remember is "I want the 4th element" so (4 - 1) = 3
Multi-Dimensional
So far we've only been dealing with one-dimensional arrays but sometimes you might need a multi-dimensional array. In this section, I hope to go over what a multi-dimensional array is and the uses.
So to answer the first question, what is a multi-dimensional array? The answer is simple. A multi-dimensional array is an array of arrays. Nothing more, nothing less.
Okay, so for our example we'll be looking at a common data type called a two-dimensional array which can be visualised as columns and rows.
Note: We are not limited to having only two dimensions as the term multi-dimensional implies, we have an unlimited amount of dimensions we can expand to.
Many games use two dimensional arrays to plot the visual environment of a game. Positions in a two dimensional array are referenced like a map using horizontal and vertical reference numbers. They are sometimes called matrices.
Continuing with the idea of a game, we'll plot a map with (X, Y) coordinates to find some treasure. We'll create a simple 3 x 3 grid with an element that contains the value "x" where our treasure is located.
const map = [
[1,2,3],
[4,5,6],
[7,"x", 9]
];
Note: previously I had used let instead of const. You do not need to worry yourself about what these mean. const here just means "constant" as it cannot be redeclared or assigned (if you want to read a bit about this here.
Task: before I tell you how to access the "x" value, can you figure it out?
Hint: As I mentioned previously in the section Zero-Indexed the arrays in JavaScript start with 0 (hence, zero-indexed).
Hopefully, you've at least attempted the previous task before continuing as I will be explaining the process to get there and the answer to the question.
Okay, let's break this two-dimensional array down. As mentioned at the start of this section. You can imagine a two-dimensional array to be rows and columns which I will demonstrate here.
// This is the example from above, so no need for scrolling!
const map = [
[1,2,3],
[4,5,6],
[7,"x", 9]
];
// This can be broken down into rows and columns.
// Each example below is separated into rows.
// As mentioned previously, the arrays in JavaScript start from zero.
/*
[0] = [1, 2, 3]
[1] = [4, 5, 6]
[2] = [7, "x", 9]
*/
// as we know, we're looking for "x" which happens to be in row 2
// this is a great start as we know the row number
// if we were to log row 2 to the console it would output this.
// [7, "x", 9]
// which can further be broken down again into 0, 1 and 2
// as there are only 3 elements in the array.
/*
[0] = 7
[1] = "x"
[2] = 9
*/
From the demonstration above we can now see the our "x" value is within row[2] column[1]
Below I have also printed the console log
Bingo! We have our treasure as "x" marks the spot.
Next up, Associative arrays.
Associative
Just like before, the best place to start is with the definition. The definition is as followed:
Associative arrays, also called maps or dictionaries, are an abstract data type that can hold data in (key, value) pairs.
That's great but what does it mean Jordan? Associative arrays are similar to numeric arrays ([0] = "some value") but the indexes are different.
Associative arrays have a string (a data type that represents text) for their index instead of a number.
Let's have a look at what this might look like in JavaScript:
const author = {
"firstName": "Jordan",
"lastName": "O'Hara"
}
the above demonstration contains a variable called author, within the author we have 2 keys, "firstName" and "lastName".
Task: can you print out the authors first name?
Answer
Version 1:
author.firstName
Version 2:
author["firstName"];
Okay, there isn't much to talk about when it comes to an associative array, so next up I'll be talking about the conclusion. If you have any comments on how I could improve this article feel free to mention them below.
Conclusion
In conclusion, We have gone over the three main types of arrays (zero-indexed, multi-dimensional and associative). I wanted to talk about dynamic and jagged arrays but I didn't want the article to drag on.
Below I have provided all the links used within this article and feel free to do your own research as well! I wish you all the best on your computer science journey.
Until Next Time, Peace!
Bibliography
bbc.co.uk/bitesize/guides/zy9thyc/revision/1
cs.bham.ac.uk/~jxb/DSA/dsa.pdf
en.wikipedia.org/wiki/Array_data_structure
bbc.co.uk/bitesize/guides/z4tf9j6/revision/3
bit.ly/2UBp9XZ (Comparison of programming languages (array) Wikipedia) (Sorry, the link wasn't rendering correctly and I couldn't allow you to not have a reference!)