JavaScript Array Data Structures: Internal Workings Explained

Before going to understand the internal working structure and behaviour of an array, first let us understand what an array is and why we using it.

What is an array?

The array is one of the most useful data types in a programming language, which is allowed to store a similar group of data in a single variable. Or we can also say that An array is a variable that is used to store similar data type data in a variable.

Why we use?

Arrays are very useful for storing a large number of data in a single variable. It is beneficial for organizing and managing multiple, adding, retrieving and deleting, values efficiently, and manipulate data. Essentially, an array is a container that holds a fixed number of values, all of which are the same data type.

Let's understand about the Array

In this post, we’ll explore how arrays work internally by implementing a simple custom array class using object-oriented programming (OOP) principles in JavaScript.

Creating custom MyArray Class:

Let’s start with a custom class `MyArray` to mimic the behavior of JavaScript arrays. We’ll provide methods for adding, removing, and accessing elements.

Class Definition and Constructor:

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

The MyArray class has a constructor that initializes an empty object `data` to hold array elements and a `length` property to track the number of elements.

Creating push method: Add an element to end of the array

// Add an element to end of the array
push(element) {
 this.data[this.length] = element;
 this.length++;
}

The `push` method adds an element to the end of the array.

Removing Elements from the Array: pop

// Remove the last element from array
pop() {
    if (this.length === 0) {
        return undefined;
    }
    const lastElement = this.data[this.length - 1];
    delete this.data[this.length - 1];
    this.length--;
    return lastElement;
}

The `pop` method removes and returns the last element of the array.

Accessing Elements from array: get

// Get element from specifc index
get(index) {
    if (index >= 0 && index < this.length) {
        return this.data[index];
    } else {
        throw new RangeError( `Index is out of `);
    }
}

The `get` method retrieves the element at the specified index.

Add Elements in specific index: set

// Set element on specific index in the array
set(element, index) {
    if (index >= 0 && index < this.length) {
        return this.data[index] = element;
    } else {
        throw new RangeError( `Index is out of `);
    }
}

The `set` method updates the element at the specified index.

Removing Specific Element: remove

// Remove element at specific index
remove(index) {
    if (index >= 0 && index < this.length) {
        const element = this.data[index];
        this.shiftLeft(index);
        return element;
    } else {
        throw new RangeError( `Index is out of `);
    }
}

shiftLeft(index) {
    for (let i = index; i < this.length - 1; i++) {
        this.data[i] = this.data[i + 1];
    }
    delete this.data[this.length - 1];
    this.length--
}

The `remove` method deletes an element at a specified index and shifts remaining elements left.
The `shiftLeft` method helps in removing elements by shifting subsequent elements left.

Adding Element to Beginning: unshift

// Add an element to the beginning of the array
unshift(element) {
    this.shiftRight(0);
    this.data[0] = element;
    this.length++;
}

// Shift elements to the right from a specific index
shiftRight(index) {
    for (let i = this.length; i > index; i--) {
        this.data[i] = this.data[i - 1];
    }
}

The `unshift` method adds an element to the beginning of the array.
The `shiftRight` method shifts elements right from a specified index.

Removing First Element: shift

// Removes the first element of an array, and returns that element
shit() {
    if (this.length === 0) {
        return undefined;
    }
    const fristElement = this.data[0];
    this.shiftLeft(0)
    return fristElement;
}

The `shift` method removes and returns the first element of the array.

Printing Array Elements: print

// Print the array data
print() {
    let result = [];
    for (let i = 0; i < this.length; i++) {
        result.push(this.data[i])
    }
    console.log(result);
}

The `print` method prints all elements in the array.

Example Usage

const myArray = new MyArray();
console.log(myArray.shift()); // undefined
myArray.push(1);
myArray.push(2);
console.log(myArray.length); // 2
myArray.print(); // [1, 2]
myArray.unshift(3);
console.log(myArray.length); // 3
myArray.print(); // [3, 1, 2]
console.log(myArray.shift()); // 3
console.log(myArray.length); // 2
myArray.print(); // [1, 2]

Conclusion

By implementing the `MyArray` class, we understand how arrays can be managed internally using OOP principles. This includes methods for adding, removing, accessing, and printing elements, mimicking the functionality of native JavaScript arrays. This exercise helps in comprehending the underlying workings of arrays and enhances our object-oriented programming skills in JavaScript.