Adding Native Array prototype methods

Question

I'd like to add two methods in the Array.prototype which will work a bit like addClass / removeClass of jQuery. This is what I've written:

Array.prototype.addClass = function (className) {
  this.forEach((element) => {
    element.classList.add(className);
  });
};

Array.prototype.removeClass = function (className) {
  this.forEach((element) => {
    element.classList.remove(className);
  });
};

I was told it's generally a bad idea to add methods to built in JS prototypes, so I was wondering what the best alternatives would be to avoid potential gotchas.

My ideas :

check if the method already exists
just make a normal function that takes 2 arguments, the array and the classname
create my new custom object which will have the DOM manipulation methods I build

I am also looking at https://github.com/franciscop/umbrella/blob/master/src/plugins/addclass/addclass.js and how it's implemented.

Slim · Accepted Answer · 2017-05-29 10:42:39Z

1

Yeah, sometimes we love to have some extra methods in the built in JS prototypes. In these situations I check if it already exists and if not you should use Object.defineProperty so that the method is not enumerable:

if (!Array.prototype.addClass)
Object.defineProperty(Array.prototype, 'addClass', {
    value: function(className) {
        this.forEach((element) => {
            element.classList.add(className);
        });
    }
})

You may check all the options you have in mozilla's documentation.

edited May 29, 2017 at 10:42

answered May 29, 2017 at 10:34

Slim

1,9641 gold badge12 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Adding Native Array prototype methods

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related