Fundamental of How Arrays Work and Build your Own in JavaScript (Part-1)

In this post, we are going to use JavaScript class syntax, so we are going to create Array Class.

Even though with JavaScript and many other languages we can do this const array = []; to create an array.

Let See if we can build one of our own,

Okay! Just Remember that arrays in JavaScript are just Object with integer based keys, that act like indexes.

Note: Different Languages will have this implementation differently, But what we are going to learn is still going to be applicable to how Arrays work in other languages.

So, we are going to start off with creating a JavaScript class, so let just create a class.

class MyArray {
        constructor()  {
            this.length = 0;
            this.data = {};
        }
}

In the above code, we named class as MyArray and within the MyArray we will have constructor() function which is the initial function that will be run when we create this MyArray and this constructor() function will have 2 data points,

this.length = 0 (i.e this will be the length property because in the array we will be able to determine the length of the array and the initial length will be 0, that is how many element array has)

this.data= {} (i.e this is the data within the array and this is an object as we know array in JavaScript is an object with integer based keys, that act like indexes)

Now, what the most common action in the array, well its the access, to access the data.

So let’s create a get() method in our class MyArray :

class MyArray {
    constructor() {
         this.length = 0;
         this.data = {};
     }


     get(index) {
         return this.data[index];
     }
}

So we have created a get() method in our MyArray class and this get(index) method is going to take an index to actually grab the data from memory. And then return this.data[index] (i.e, this.data here is referring to this.data in constructor function and we are going to return the data at the index that we are requiring).

Let see how this would work in action;

To create a new MyArray, all we need to do is say,

const newArray = new MyArray();

and we use the new keyword in JavaScript to instantiate this or to create a copy of this class MyArray.

So Now if we do,

console.log(newArray);

O/P: MyArray { length: 0, data:{} }

And now if we do

console.log(newArray.get(0));

O/P: undefined, because there is nothing in our data object.

Okay, Now let’s add our new method which is push() method to add something to the end of the array.

class MyArray {
    constructor() {
          this.length = 0;
          this.data = {};
    }


    get(index) {
         return this.data[index];
    }

    push(item) {
         this.data[this.length] = item;
         this.length++;
         return this.length;
    }

}

So, push(item) method will take an item that we will give it. Within push() method we have this.data[this.length] = item;

What this is doing is this.length which is as of now is 0. so because of this item will be added at 0 index of this.data[].

And because we want to keep adding the item, we will say this.length++;

Explanation: If we add an element to our array it's length will be 1 instead of 0, so that next time we run push method this.length will be 1 and item will be added at the index of 1 in the data object.

Let's run this method and see what happens,

const newArray = new MyArray();
newArray.push(‘hi’);

O/P: MyArray { length: 1, data:{0: ‘hi’} }

And we get the length of our array is now 1 and data has ‘hi’ at the index of 0.

Let’s add one more element in our array, newArray.push(‘hey’);

O/P: MyArray { length: 2, data:{0: ‘hi’, 1: ‘hey’} }

And we get the length of our array as 2 and data has ‘hey’ at index of 1.

So now if we do get() method we will get something.

newArray.get(0);
// O/P: ‘hi’

newArray.get(1);
// O/P: ‘hey’

So curious what next can we do?? Let’s add pop() method, which will remove the last element in the array.

class MyArray {

    constructor() {
        this.length = 0;
        this.data = {};
     }


    get(index) {
        return this.data[index];
    }


    push(item) {
        this.data[this.length] = item;
        this.length++;
        return this.length;
    }

    pop() {
        delete this.data[this.length -1];
        this.length--;
    }
}

So again, we have pop() method that doesn't receive anything, we don't need to pass any parameter, all we need to do is delete the last time in the array.

We can simply do this.data[this.length -1]; That grabs last item in our data object at index of this.length -1 which will be last item in data object.

Let's stop here and see what's happening,

the last item our array now is ‘hey’ which is at the index of 1 in our array and we want to delete it. length of our array is 2 because we have two elements in our array.

How can we find the last element in our array ( length of the array minus 1 )

i.e in our case:

this.length -1 => 2-1 => 1

then this.data[1]

And then we can say just delete that item using delete keyword in javascript.

delete this.data[this.length -1];

And after we delete the last element in the array we also to decrease the length of our array by 1 because we deleted 1 element. Which we are doing here by this.length--; in pop() method;

Okay, so let just test this,

const newArray = new MyArray();
newArray.push(‘hi’);
newArray.push(‘hey’);

newArray.pop();
console.log(newArray);

O/P: MyArray { length: 1, data:{0: ‘hi’} }

So you see the last element in our which was ‘hey’ is deleted and the length is decreased by 1 because we deleted 1 element.

And if run pop() again then,

newArray.pop();
console.log(newArray);

O/P: MyArray { length: 0, data:{} }

The array is empty because we deleted the last item it had that was ’hi’.

There will be a Part-2 of this post where I will try to explain more complex array method splice() in javascript.

Thank you 🙏, everyone, for sticking through out the end.

---