JavaScript arrays are a popular data structure used by web developers for storing and manipulating data. The built-in array methods provided by JavaScript, such as push(), pop(), shift(), and unshift(), offer a lot of functionality for working with arrays. However, there may be cases where custom implementations of these methods are needed to fit specific use cases.

In this blog post, we will discuss how to implement custom JavaScript array methods, including the basics of how arrays work in JavaScript, and provide examples of custom implementations for some of the most commonly used array methods.

Basics of JavaScript Arrays

In JavaScript, an array is an ordered collection of data, represented by a single variable name. An array can contain any type of data, including strings, numbers, and other arrays. Arrays in JavaScript are zero-indexed, meaning the first element is at index 0, the second at index 1, and so on.

Here is an example of how to create a simple array in JavaScript:

let myArray = [1, 2, 3, 4, 5];

Custom Implementation of Array Methods

1. Custom Push() Method

The push() method adds one or more elements to the end of an array. Here is an example of how to implement a custom push() method:

Array.prototype.customPush = function(...items) {
  let len = this.length;
  items.forEach(item => {
    this[len++] = item;
  });
  return this.length;
}

This method works by first obtaining the length of the array and then adding each item passed to it to the end of the array. The length of the array is then returned.

2. Custom Pop() Method

The pop() method removes the last element from an array. Here is an example of how to implement a custom pop() method:

Array.prototype.customPop = function() {
  let len = this.length;
  if (len === 0) {
    return undefined;
  } else {
    let lastItem = this[len - 1];
    delete this[len - 1];
    this.length--;
    return lastItem;
  }
}

This method first checks if the array is empty and returns undefined if it is. If not, it stores the last item in the array in a variable, deletes the last element, decrements the length of the array, and returns the stored item.

3. Custom Shift() Method

The shift() method removes the first element from an array. Here is an example of how to implement a custom shift() method:

Array.prototype.customShift = function() {
  let len = this.length;
  if (len === 0) {
    return undefined;
  } else {
    let firstItem = this[0];
    for (let i = 0; i < len - 1; i++) {
      this[i] = this[i + 1];
    }
    delete this[len - 1];
    this.length--;
    return firstItem;
  }
}

javascript

This method first checks if the array is empty and returns undefined if it is. If not, it stores the first item in the array in a variable, shifts all the elements in the array to the left by one index, deletes the last element, decrements the length of the array, and returns the stored item.

4. Custom Unshift() Method

The unshift() method adds one or more elements to the beginning of an array. Here is an example of how to implement a custom unshift() method:

Array.prototype.customUnshift = function(...items) {
  for (let i = this.length + items.length - 1; i >= items.length; i--) {
    this[i] = this[i - items.length];
  }
  for (let i = 0; i < items.length; i++) {
    this[i] = items[i];
  }
  return this.length;
}

5. Custom filter() Method

The filter() method in JavaScript creates a new array with all elements that pass the test implemented by the provided function. To implement a custom filter() method, we can use a loop to iterate through the array and apply the provided function to each element. If the function returns true, we add the element to a new array. Finally, we return the new array with the filtered elements.

Here is an example of how to implement a custom filter() method:

Array.prototype.customFilter = function(callback) {
  const filteredArray = [];
  for (let i = 0; i < this.length; i++) {
    if (callback(this[i], i, this)) {
      filteredArray.push(this[i]);
    }
  }
  return filteredArray;
}

6. Array.at

Array.at method is used to get an element at specific index in an array. If the index is negative, it starts counting from the end of the array.

Array.prototype.customAt = function(index) {
    const length = this.length >>> 0;
    const relativeIndex = index < 0 ? length + index : index;
    return this[relativeIndex];
  };