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];
};
Top comments (3)
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.
Hi Asad,
Good Work, Can you please also add details about Array().at()
Thanks
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