Build an Array from Scratch in Javascript

In the last post Arrays in JS, we learned about what arrays are, how we can store data in them and some methods which can be used on the array to get certain results.

In this post, we are going to dig a little deeper into understanding Arrays by building our own array from scratch, to be honest, I don’t think there will be a case where you will need to figure out how to build your own array as most if not all languages nowadays come with arrays pre-built into them.

But, it’s never a bad idea to truly and deeply understand how some of the methods work behind the scenes and it will give you a lot more clarity on arrays and never feel confused about arrays, we have a lot of things already to be confused about, like should you drink an espresso or a cappuccino while reading this article or something else entirely.

Now I leave that on to you, I have my own cup of steaming hot cappuccino ready and let’s get straight right into it!

 Also, I will be using JavaScript for explaining this, if you want to implement an array in a different language, some things might work differently and you will need to figure out how to get that working.

Creating the Structure

Before we get into creating the structure, Arrays in JavaScript are somewhat different as they are just Objects with integer-based keys that act as indexes and that’s what we aim to build here.

We will start by creating a class called NewArray, and as soon as we create the class we want to give it certain information, two in our case:

The first is length, because if you remember we can determine the length of an array using the length property, basically, telling us how many items the array contains.The second will be the data that needs to be stored in the array and this will be an Object.

Now we need to give some initial values which will be assigned to the class, as soon as it is created, for that we use a constructor, a constructor is the first method which is called when the class is created.

Get Method

Now that we have the structure of the array, we need to be able to perform certain actions on the array, so let’s start with creating the Get method that we can use to access the array.

The Get method will take an index and simply return the data which is present on the index.

Now if you want to see how this works, we can instantiate the class using the new keyword in JavaScript, let’s see:

Push Method

Now that we can access the array, let’s add some items in the array. We will be creating the push method to add something at the end of the array.

We will give the push method a single value, which is the data that we want to store in the array.

Now in the above code, we use this.length, because if you remember we initialized it as 0, so basically we are pushing the data item on 0-index and after we have stored the item on 0-index, we increase the length of the array by 1, so that if we do another push we are storing it on the next index, which in this case is 1.

So it will work something like this:

As we can clearly see, we have pushed our first element in the array! Our array length is now 1, and we have data where we have a key or index 0 with the value of string hello.

Pop Method

Alright now that push is working just fine, let’s start removing some items from our array. The pop method doesn’t take any values and it removes the last item from the array.

Now you will notice that I have stored the last item that we have just deleted from the array in a variable and that’s because usually, the pop method returns the deleted item and that’s what we are doing here.

I have also decreased the length of the array by one because obviously we have just removed an item from the array.

In the above method, we also use the delete operator, what it basically does is that it removes a property from on Object. In our case, let’s say the number of items in the array is 5, that means that this.data[this.length – 1] converts into this.data[4] basically removing the last element.

Delete Method

Now we may want to delete an item using the index of an item, let’s create a method for just that.

Now, something very particular about arrays is that they are ordered, thus if you were to say delete an item from the middle of an array, you will need to shift the index of all the elements after the deleted item by one.

So an array of size 5, if we delete the item on index 2, that is the third element, we will need to shift the index of the 4th and 5th element to not leave an empty space in the middle of the array.

Now let’s see how does the result look like:

We have successfully removed an item from an index!

This method can also be extended to delete a range of elements, but that’s something I want you guys to do and also try to implement other methods of an array.

So now you have an idea of how you can implement your own array and you can expand on this as much as you like.

Final Code

I hope you liked the article if you have any doubts do hit me up! And feel free to extend the code and add some more methods to the array.

Don’t forget to follow me on my social – LinkedIn, Twitter, Discord 

Previously published at https://bucketofcode.com/build-an-array-from-scratch-in-javascript/