DEV Community

Asad Gulzar
Asad Gulzar

Posted on • Updated on

Creating Custom JavaScript Array Methods: Implementation of push(), pop(), shift(), unshift(), and filter()

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];

Enter fullscreen mode Exit fullscreen mode

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;
}

Enter fullscreen mode Exit fullscreen mode

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;
  }
}

Enter fullscreen mode Exit fullscreen mode

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;
  }
}

Enter fullscreen mode Exit fullscreen mode


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;
}

Enter fullscreen mode Exit fullscreen mode

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;
}

Enter fullscreen mode Exit fullscreen mode

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];
  };
Enter fullscreen mode Exit fullscreen mode

Top comments (3)

Collapse
 
tracygjg profile image
Tracy Gilmore

Hi Asad,
Here is a tip for you. If you type the word javascript immediately in the code block you can get syntax colouring.
Regards.

Collapse
 
shahid43eb profile image
Shahid Rasheed

Hi Asad,
Good Work, Can you please also add details about Array().at()
Thanks

Collapse
 
asadgulxar profile image
Asad Gulzar

Thank you for your comment. Yes, I can definitely add more details about Array().at() and update the post with the information. Thank you for suggesting it