Understand Javascript Prototype Array And How To Use It

Understanding array.prototype in JavaScript is crucial for unleashing the full potential of arrays in your code.

Therefore this article will discuss the syntax and demonstrate practical examples of adding custom methods like ‘sum’ and ‘multiplyBy’ to Array.prototype.

Along with modifying an existing method like ‘pop’ to print a message when an element is removed.

Additionally, it highlights the usage of existing methods available on Array.prototype, such as ‘reverse,’ ‘slice,’ and ‘reduce,’ to perform common array operations.

Now let’s get started!

What is array.prototype in javascript?

The array.prototype in Javascript is an object with properties and methods that allow you to perform various operations on arrays efficiently.

It acts as a blueprint from which all arrays inherit properties and methods.

In order to get the prototype of an array, you can use the Array.prototype property.

Syntax

Array.prototype.methodName = function() {
  // Your custom code here
};

To demonstrate here is the example code:

// Adding a custom 'sum' method to the Array prototype
Array.prototype.sum = function() {
  let total = 0;
  for (let i = 0; i < this.length; i++) {
    total += this[i];
  }
  return total;
};

// Using the custom 'sum' method on an array
const numbers = [1, 2, 3, 4, 5];
const result = numbers.sum();
console.log(result); 

Result:

15

Basically, this example shows that we add the sum method to Array.prototype. Then it all becomes available for all arrays in Javascript code.

Additionally, the method iterates through the element of the array using this (which refers to the array itself) and calculates the sum of all its elements.

How to use array prototype in JavaScript

Using the Array.prototype in JavaScript allows you to add custom methods or modify existing methods for all arrays in your codebase.

Let’s explore how you can use the Array.prototype to extend array functionality:

Adding Custom Method

To add a custom method to the Array.prototype, you can use the syntax we discussed earlier:

Array.prototype.methodName = function() {
  // Your custom code here
};

Now, let’s add the custom method which is multplyBy to multiply each element of the array by a given factor:

Array.prototype.multiplyBy = function(factor) {
  return this.map((num) => num * factor);
};

const numbers = [11, 22, 33, 44, 54];
const multipliedArray = numbers.multiplyBy(3);
console.log(multipliedArray); 

Result:

 [33, 66, 99, 132, 162]

Modifying Existing Method

In this method, you can change the existing method on the Array.prototype. However, it is important to be cautious when utilizing this method, as it affects the other parts of the code.

Let’s modify the pop method to print a message when an element is removed:

const originalPop = Array.prototype.pop; // Store the original 'pop' method

Array.prototype.pop = function() {
  const poppedElement = originalPop.apply(this); // Call the original 'pop' method
  console.log(`Element '${poppedElement}' removed from the array.`);
  return poppedElement;
};

const language = ['Java', 'PHP', 'JAVASCRIPT'];
const removedLanguage = language.pop(); // The modified 'pop' method will be called
console.log(language);

Result:

Element 'JAVASCRIPT' removed from the array.
["Java", "PHP"]

Using Existing Methods from Array.prototype

Most of the time, you’ll be using the existing methods available on Array.prototype to perform common array operations.

These methods are inherited by all arrays in JavaScript, so you can use them directly:

const language = ["JAVA", "PHP", "JAAVASCRIPT", "PYTHON", "C"];

// Using existing methods from 'Array.prototype'
const reversedArray = language.reverse();
const slicedArray = language.slice(1, 4);
const sum = language.reduce((acc, num) => acc + num, 0);

console.log(reversedArray); 
console.log(slicedArray);  
console.log(sum);       

Result:

 ["C", "PYTHON", "JAAVASCRIPT", "PHP","JAVA"]
 ["PYTHON", "JAAVASCRIPT", "PHP"]
0CPYTHONJAAVASCRIPTPHPJAVA

That’s how you can use the Array.prototype in JavaScript to add custom methods, modify existing ones (with caution), or leverage existing methods for common array operations.

Always remember to test your code thoroughly and be mindful of potential side effects when extending built-in prototypes.

Nevertheless, here are other functions you can learn to enhance your JavaScript skills.

• How to use typeof in if statement in JavaScript?
• JavaScript Sort Objects by Property
• Is JavaScript similar to Java? What’s the difference?

Conclusion

In conclusion, understanding the Array.prototype in JavaScript is of paramount importance for unlocking the full potential of arrays in your code.

The Array.prototype is an object that serves as a blueprint from which all arrays inherit properties and methods in JavaScript

By utilizing this prototype, you can extend array functionality by adding custom methods or modifying existing ones.

Glay Eliver

Programmer & Technical Writer at PIES IT Solution

Glay Eliver is a programmer and writer at PIES IT Solution, author of over 600 tutorials at itsourcecode.com. Specializes in JavaScript tutorials, Microsoft Office how-tos (Excel, Word, PowerPoint), and Python error debugging covering ImportError, TypeError, AttributeError, ModuleNotFoundError, and JavaScript ReferenceError. Authored several of the site’s highest-traffic Excel and MS Office reference articles.

Expertise: JavaScript · MS Excel · MS Word · MS PowerPoint · Python · Python ImportError · Python TypeError · Python AttributeError · ModuleNotFoundError · JavaScript ReferenceError · Pygame  · View all posts by Glay Eliver →