React create own function on array

Question

How I can create own function like pushFn in javascript without using prototype ? I want use my own function on array after dot like test.pushFn(8).

const test = [1,3,4,2]

Array.prototype.pushFn = function(nr){
  return [...this,nr,1]
}
test.sort((a,b)=>a>b? 1:-1).pushFn(8)

If you don't make a class, you're kinda stuck with prototype — loctrice, Aug 08 '19 at 18:55
"stuck" was just a term used because the op doesn't want to use it. Don't get hung up on semantics. You could have started with the "this" word right after stuck and your comment would have been more productive. I think you could have stopped after the question mark as well. — loctrice, Aug 08 '19 at 19:05
If you just want to apply for this array, you could `Object.defineProperty(test, 'pushFn', { value: function(nr){...}, enumerable: false })` — adiga, Aug 08 '19 at 19:08
@loctrice i apologize if my comment was somehow offensive to you it was not my intention at all. I was just genuinely curious as to why go against something that is such a fundamental part of the javascript language. — aviya.developer, Aug 08 '19 at 19:21
You want to use your function like that dot and don't wanna use array prototypes or classes then this cannot be done. Also, why don't you want to use prototype? — weegee, Aug 08 '19 at 19:30

F.bernal · Accepted Answer · 2019-08-08T19:32:44.690

3

That modification is not recommended at all.

why?

When you modify a JS object prototype like Object and/or Array (in your case), you are adding a possibility of broke your code. Another library will add the same method(s) you add to the prototype but with another purpose so, your code is broken.

Object prototype modification is only being recommended to add functionality specified by the standard which is not yet supported, in other words, for adding polyfills.

You should modify your code:

class MyArray extends Array {
  pushFn(nr) {
    return [...this, nr, 1];
  }
}

const test = new MyArray();
test[0] = 'test';

console.log(test.pushFn('one'));

Or you can create your library for that kind of modifications.

edited Aug 08 '19 at 19:32

answered Aug 08 '19 at 19:18

F.bernal

2,594
2
22
27

But this would only work if he always controls the incoming array, or if he clones each array he receives (let's say from some api) into a MyArray object. Is this common practice for such a thing? – aviya.developer Aug 08 '19 at 19:23
You can see modify Array prototype as the easy way, but it is NOT the recommended way to do things. It has been discussed here https://stackoverflow.com/questions/6223449/why-is-it-frowned-upon-to-modify-javascript-objects-prototypes/6223471 so, I don't know why people are voting this answer negative. :D – F.bernal Aug 08 '19 at 19:34
@F.bernal the OP never stated if they are using a library to start with. Don't go on assuming that they do. – weegee Aug 08 '19 at 19:36
Couldn't a class also be possibly clash with other classes in other libraries? In your example, what makes `MyArray` unique for sure? Oh wait of course it's the block scope. As long as it isn't imported from the module it is isolated, but an `Array.prototype` extension would be available all throughout the system. – aviya.developer Aug 08 '19 at 19:37
@aviya.developer if you use modules there is no problem at all. The problem with the prototype is that it is a "global" modification for any library or for browser implementation. So, if developers add its functionality to browser built-in Objects' prototype name collisions can happen and functionality could be overwritten. So your code that trust in your prototype modification is broken due to you cannot warranties that the method you are using has your implementation. Imagine you add a method called SUM to Array that your implementation returns the sum of all elements... – F.bernal Aug 08 '19 at 19:54
...in the array and later in ES2020 SUM is an standard built-in method that reduces your array to the SUM of elements, why should your code mask that implementation? if you use a library that trust in the standard SUM method you code breaks that library... that's the problem... – F.bernal Aug 08 '19 at 19:54
@weegee my answer has nothing to be with if OP is using a library or not, it is just the recommendation for the problem the OP stated. Never modify Object's prototype you are not the owner due to you can overwrite functionality and break your code or third-party code. Read my previous comments. – F.bernal Aug 08 '19 at 20:02

React create own function on array

1 Answers1