CodeX
Published in

CodeX

A Creative Guide to Data Structures (Part 1) — Array, the Fairest of Them All

Photo by Cathryn Lavery on Unsplash

Introduction

Let’s be honest. Programming is hard. Really hard.

But it can also be fun. Building a web app that lets you chat with friends from all over the world, a shopping cart that carries all the items you want to purchase, or a video game, gives us a sense of accomplishment and satisfaction. It’s what we as developers always thrive for in our career.

But the most difficult part about programming is learning the foundations. The data structures that allow us to organize and structure the data we need to make our program properly function. A weak foundation of data structure is like a house built on top of a sandhill. Once the earthquake or the flood hits (we call them bugs), that house is a goner.

This article aims at introducing Data Structures and all of the algorithms that come with it, in the simplest and fun way possible. I will be attempting to use definitions and terminologies that the layman, or those who are not tech savvy, can fully understand.

I’ll start with the most commonly used data structure in programming — The Fairest of Them all — Arrays.

Why do you call an Array, the Fairest of Them All? It’s not Snow White!

Well, it’s a play on words. And an array is a linear data structure used to store a collection of data, or rather a collection of variables of the same type. With an exception in JavaScript. I will explain further in a bit.

When you started your journey as a developer and learned about variables and assignment such as:

int x = 1;

or

var name = “John”;

I am sure you’ve asked yourself: “how can you store multiple numbers or multiple names in one variable? And make use of them with no hassle?”

Well, that’s where the Array comes in. It takes a list of numbers, or a list of names you can come up with, and cram them all together in one variable.

It is simple and also fair. Hence its title, “the Fairest of Them All”

Creating an Array

Let’s create an array together. And have fun doing it.

Let’s say we want to build a list of powerful wizards from the Harry Potter book series. Just a simple list. No need to rank them from best to worse yet.

The following syntax is how we create such an array, using JavaScript.

var wizards = new Array(“Harry”, “Voldemort”, “Dumbledore”, “Sirius”, “Kingsley”, “Snape”, “Griffindor”);
Result from the code above via stackblitz.com

We have created an Array called wizards, and in that array is a list of Harry Potter characters, all stored within this variable called wizards.

If we run this array on the command prompt, or on the console of your favorite code editor, we will display the full list of powerful wizards in the Harry Potter series, starting with Harry at the top and Griffindor at the end of the list (Again, we are just making a small list, not ranking who is the best. That’s up for debate.)

Before we move on, a little tidbit about Arrays…

Notice on the code result screenshot that the list starts at 0.

That is because the elements in the array use a technique called zero-based indices, which are arranged in specific boxes labeled from index 0 to N, the number of items in the array

For example: a traditional numbered list usually starts at 1, not at 0. You might be wondering, why is that? Is it a typo?

No it’s not.

See, in a list like an array or a linked list, we start at 0. Because in the early days of computing, old computer languages like FORTRAN began their arrays at 1 instead of 0, which did not make any sense at the time because it felt like skipping an important number being 0, the very first element in an array. That is until the C programming language came along and fixed it.

Also, we are dealing with computers; and computers have a special language that involves binary digits, or bits for short, which are the smallest piece of data on a computer. Bits always have two values: 0 and 1. And when we translate numbers into bits — let’s say from 0 to 3 — we would get the following results in a pattern-like sequence: 00, 01, 10, and 11.

You can learn more about bits in this article. But for now, just know that a numbered list in computer term starts with 0. And these numbers are called indexes.

Other ways to create an array

There are many other ways to create an array.

Let’s create two more arrays of wizards and go over them line by line.

var wizards2 = ["Harry", "Hermione", "Ron", "Draco"];var wizards3 = [];var wizards4 = ["Merlin", 100, {}];

The array wizards2 initialized an array list of four wizards — Harry, Hermione, Ron and Draco — with total indexes of 3; because remember in an array, the indexes starts at 0, therefore Harry is at index 0, Hermione is at index 1, Ron is at index 2, and Draco is at index 3.

As for array wizards3, it is not initialized and thus is an empty array that we have created.

Now as for the last array wizards4 , remember at the beginning of the article I explained the definition of an array being a collection of variables of the same type?

That definition is still true in other programming languages however, in a language like JavaScript, the array contents are their own special kind of objects, and that is thanks to the var type. With that said, you can add any elements of different types in an array.

So we should therefore rephrase our definition of an array as a collection of variables with different data types, including objects.

So we’ve created an array, now what?

So now, we have to call them.

No, not calling them like you’re calling a friend on a cellphone.

We simply have the program retrieve the data element stored in the array we have assigned.

Let’s say while looking at your list of wizards, you want to retrieve Voldemort. You would need to execute the following syntax to get the data where the name of Voldemort is stored.

First step is to locate Voldemort. No, he’s not in Albania. He’s in index 1 of the wizards array. Remember that our index starts at 0 in our array variable wizards.

Running this piece of code within the console.log() function would have his name displayed in the output.

console.log(wizards[1]);> Voldemort

Okay. Pop quiz for you, Harry Potter fans (who are secretly web developers):

Looking back at the wizards array variable above, which Harry Potter character is well-known to belittle, disrespect, and intimidate his students?

If your answer was Snape, you are indeed correct!

Now let’s locate Snape with a piece of code, using console.log().

In our last example, we’ve located Voldemort at index 1, who was right after Harry at index 0. After Voldemort, we got Dumbledore at index 2, Sirius at index 3, Kingsley at index 4, and finally Snape at index 5.

So using our console.log() to locate Snape, we will use the correct syntax to get this result

console.log(wizards[5]);> Snape

The best part about having an array is that you can locate elements at any index easily; even when you have an empty array such as wizards3 in our example of other ways to create an array.

Let’s add two new wizards in that array to prove my point.

The new wizards I want to add are Ginny and Neville, and they will be located at index 0 and 4 respectively. Let’s examined the following code needed to be added.

var wizards3 = [];

Remember this array above? As you’d recall, it was initialized as an empty array earlier in the article.

The next two lines of code, as promised, assigned our new wizards Ginny and Neville at index 0 and index 4.

wizards3[0] = "Ginny";
wizards3[4] = "Neville";

Now that both wizards have been assigned a spot, time to console.log() to display the results.

console.log(wizards3);
Result from the code above via stackblitz.com

As you can see in the resulted output, only Ginny and Neville took their spots at index 0 and index 4 within the initialized array wizards3. Meaning you can call on both assigned variables in your code at anytime, except for the undefined variables. They cannot be called as they will result in an undefined variable error.

Think of it as a roll call, where you call on Ginny and Neville and they respond to you with a loud and cheerful, “Here!”.

But you try calling on Harry, Ron and Hermione but only get cricket. Because they have not been assigned to an index in the array. They have not taken their seats

Hence, the undefined variable error.

So, what have we learned about arrays?

We’ve learned everything greatly important about arrays.

First it is a linear data structure used to store a collection of data.

In general, arrays are a collection of variables of the same type, but such is not the case with JavaScript. They are a collection of variables with different data types including objects.

The elements in the array use a technique called zero-based indices, which are arranged in specific boxes labeled from index 0 to N, the number of items in the array. Meaning if we have a list of 4 wizards, and Harry is at the top of that list with Draco at the very bottom, then Harry would be located at index 0 and Draco would be at index 3.

So far, arrays are simple and fair to implement in your code as one of the many foundations of data structure. The following stackblitz.com code used to write this article and test the codes needed can be accessed for demonstration purposes. Feel free to fork, download, or copy this project however it pleases.

Until the next installment, happy coding.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store