0

I want to have my own method in JavaScript which can be able to access some property of the preceding method/function Eg:

//default
var arr = [1,6,3,5];
alert(arr.length);

This will alert the length of arr. But I want to use my custom method instead of the length method say len Eg:

//custom
prototype.len = ()=>{
   return prototype.length;
}
var arr = [1,6,3,5];
alert(arr.len);
j08691
  • 204,283
  • 31
  • 260
  • 272
Nomeh Uchenna Gabriel
  • 104
  • 10

4 Answers4

3

You may define your own method for prototype:

// also you may use Object.defineProperty
Array.prototype.len = function() {
   return this.length // --> this will be an array
}

and then call the function 

[1, 2, 3].len()

BUT

It is a bad practice to define any new function in built-in prototypes - you can accidentally redefine existing method or method with the same name will be added in the future and it will cause unpredictable behavior.

Better approach either create your own prototype and use it

function MyArray () {
// your code
}

MyArray.prototype = Object.create(Array.prototype) // inheritance 

MyArray.prototype.len = function () {
    return this.length
}

or just create simple function and pass an array as an argument to it or as this:

as argument:

function len (array) {
    return array.len
}

as this:

function len() {
    return this.len
}

// invoking function
len.call(array)
RidgeA
  • 1,506
  • 1
  • 10
  • 18
  • The OP appears to want a getter, not a method. – Alnitak Mar 22 '18 at 19:03
  • 1
    @Alnitak well, may be. In the question i saw `method`. But it is still bad idea to add anything to built-in prototype :-) – RidgeA Mar 22 '18 at 19:06
  • @Alnitak Maybe you overinterpreted a little indeed, and in my opinion, customizing a builtin prototype, even with property affectation, is not always evil, it depends on the use case. –  Mar 22 '18 at 19:11
  • @leaf see OP's comment on my answer - he did specifically want a getter, not a method. And FWIW, I frequently put new methods in the built-in classes. – Alnitak Mar 23 '18 at 09:22
3

To define a "getter" without using ES6 class syntax you can use Object.defineProperty:

Object.defineProperty(Array.prototype, 'len', {
    get: function() {
        return this.length;
    }
});

Use of .defineProperty will (by default) create a non-enumerable property which ensures that your new property doesn't appear inadvertently in the results of a for .. in ... loop.

The question of whether it's appropriate to add such a property to a built-in class is a matter of some debate. Some languages explicitly encourage it, some don't.

Alnitak
  • 334,560
  • 70
  • 407
  • 495
  • @leaf that's the wrong way to do it - you've defined a method which must be invoked with function call syntax, not a getter that automagically invokes the specified function when the property is accessed. – Alnitak Mar 22 '18 at 19:00
  • 1
    I know I'm wrong, and I know I defined a method rather than a getter :-D I've updated my answer to avoid mislead the reader. –  Mar 22 '18 at 19:00
  • Thank you @Alnitak! ...your answer was what I'm looking for. The others are just busy asking me to use a function rather than a property/method like you did. Big thanks to everyone who spent h(is/er) time to help me – Nomeh Uchenna Gabriel Mar 22 '18 at 19:07
0

You can do it like this :

Array.prototype.len = function () {
  return this.length;
};

But there can be a better option, see comments below.

  • 1
    You can, but you shouldn't. Use `Object.defineProperty(Array.prototype, 'len', { ... })` instead. – Alnitak Mar 22 '18 at 18:53
  • @Alnitak Alright, well spotted. At reader, in the following article, the "Description" section explains why you should probably not follow my suggestion (although it's not bad in itself, it depends on the use case) : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty. –  Mar 22 '18 at 19:05
-1

You can create your custom methods or properties to built-in objects, in the example you gave, you want to alter the Array built-in object and you have to be specific. For instance:

Array.prototype.len = function() { return this.length; };

[1, 2, 3].len(); // this will return 3

Keep in mind that this refers to the array you're calling the method and if you use an ES6 arrow function, the scope will be affected and therefore the this value.

ivandevp
  • 54
  • 6