Tips for utilizing a personalized technique on an array

Question

Tips for utilizing a personalized technique on an array

Can you explain why a custom method on an array is not functioning properly in this scenario?

function runTestMethod() {
    alert("method running");
}

String.prototype.testMethod = runTestMethod;


var A = "A";
A = A.testMethod();         // This works


var B = new Array();
B[0] = "food";
B[1] = "bar";

B = B.testMethod();         // This results in an error 'undefined' is not a function

B[0] = B[0].testMethod();       // This also throws an error 'undefined' is not a function

B[0] = B[0].slice(0,-1);        // This works

UPDATE: The reason for this issue is that I am attempting to use a String.prototype on an array. My method should actually be Array.prototype instead. Even though array "B" contains string elements, they are still treated as array-object-properties rather than actual strings. The behavior of the slice() method is confusingly designed to work on both strings and arrays. Special thanks to T.J. Crowder for providing clarification on this matter.

javascript arrays

Answer 1

Answer №1

By assigning it to String.prototype instead of Array.prototype, the method is accessible on strings rather than arrays.

Here is the line in question:

String.prototype.testMethod = runTestMethod;

So, by adding it to String.prototype, the property and function are available for use on strings. To make it available on arrays instead, it should have been added to Array.prototype.

Here is a complete example:

// v--- Note how this is added to `Array.prototype`!
Array.prototype.oddsOnly = function() {
    var result = [], i;
    for (i = 1; i < this.length; i += 2) {
        result.push(this[i]);
    }
    return result;
};

// These are arrays
var a = ["zero", "one", "two", "three", "four", "five", "six"];
var b = a.oddsOnly();
//         ^------------- function is available on arrays
console.log("a: " + a.join(", "));
console.log("b: " + b.join(", "));

Link to Live Example | Link to Live Source

Output:

a: zero, one, two, three, four, five, six
b: one, three, five

Answer 2

By assigning it to String.prototype instead of Array.prototype, the method is accessible on strings rather than arrays.

Here is the line in question:

String.prototype.testMethod = runTestMethod;

So, by adding it to String.prototype, the property and function are available for use on strings. To make it available on arrays instead, it should have been added to Array.prototype.

Here is a complete example:

// v--- Note how this is added to `Array.prototype`!
Array.prototype.oddsOnly = function() {
    var result = [], i;
    for (i = 1; i < this.length; i += 2) {
        result.push(this[i]);
    }
    return result;
};

// These are arrays
var a = ["zero", "one", "two", "three", "four", "five", "six"];
var b = a.oddsOnly();
//         ^------------- function is available on arrays
console.log("a: " + a.join(", "));
console.log("b: " + b.join(", "));

Link to Live Example | Link to Live Source

Output:

a: zero, one, two, three, four, five, six
b: one, three, five

Tips for utilizing a personalized technique on an array

Answer №1

Similar questions

Angular controller fails to fetch scope variable in subsequent view

Adding new elements to an array does not activate the reactivity of Vue

Using Alpine JS to rotate through images at regular intervals using the window.setInterval() method

Executing mathematical operations with floating point numbers using JavaScript in Python

Error injecting angular.bootstrap in Angular 1.6.5 version

Making an Ajax request by leveraging the power of an image tag

Is there a way to generate a 2D array composed of 2D character arrays?

Having trouble accessing variable values within the nth-child selector in JavaScript

$http({method}) is malfunctioning while $http.get is functioning properly

What is the proper way to specify a file destination in React?

Incorporating mimes into ASP .NET MVC

Sending data using jQuery's AJAX feature

What is the method for updating the form action to alter the hash without causing a page reload?

Is it possible to have an Iframe that contains content but no src attribute?

Transform the array of strings

What is the process for retrieving a value from a Django view?

Trouble arises when attempting to append a class through ng-class upon clicking

Error encountered during the prerendering process on Vercel's Next.js build

Kendo's data-bind onclick feature functions properly on web browsers but fails to work on mobile devices

Encountering an issue while attempting to fetch a value from a nested object property with VueJS Interpolation