javascriptfunctionoopobjectcustom-properties

Adding custom properties to a function


Searching for appropriate answer proved difficult because of the existence of many other problems related to my keywords, so I'll ask this here.

As we know, functions in JavaScript are objects and they have their own properties and methods (more properly, function instances, inherited from Function.prototype).

I was considering adding custom properties for one function (method), let's skip the "why?" part and go straight to the code:

var something = {
    myMethod: function () {
        if (something.myMethod.someProperty === undefined) {
            something.myMethod.someProperty = "test";
        }
        console.log(something.myMethod);
    }
}

When inspected with Firebug's DOM explorer, the property is defined as expected. However, as I don't consider myself a JavaScript expert, I have the following questions:

  1. Can this method be considered "proper" and standards compliant? It works in Firefox but there are many things working as expected in web browsers and aren't by any means standards.
  2. Is this kind of altering objects by adding new properties to them a good practice?

Solution

  • It's a little bit difficult to give a very meaningful answer to your question, because you've sort of said "Here is my solution, is it OK?" without explaining what problem you are trying to solve (you even said explicitly that you are not going to explain the "why"). Your code looks to be valid JavaScript that will run, but it also looks like a less than optimal way of doing things.

    If you explain what you actually want to achieve you may get some good suggestions on better ways to structure your code. Still, I'll give you some kind of answer:

    Can this method be considered "proper" and standards compliant? It works in Firefox but there are many things working as expected in web browsers and aren't by any means standards.

    Functions are objects (as you've said), and thus it is possible to add properties to them. This isn't really a standards issue as such in that it is a core part of JavaScript that all browsers support.

    Is this kind of altering objects by adding new properties to them a good practice?

    It's your object, you can add whatever properties you like. The whole point of objects is that they have properties that you can manipulate. I can't really envisage a way of using objects that doesn't involve altering them, including adding, deleting and updating properties and methods.

    Having said that, to me it doesn't really make sense to add properties to the myMethod function, it would be more usual to add other properties to your something object (your myMethod function would, if called correctly, have access to the other properties of something via the this keyword).

    If you are using a function as a constructor it typically makes sense to add methods to the associated prototype and add (non-method) properties to each instance, but you can do either or both the other way when appropriate. (Noting that a "method" is essentially just a property that happens to reference a function.)

    The specific code you have shown doesn't add properties, it tests whether the someProperty property already exists and if so assigns it a new value.

    You might benefit from reading some articles such as these at MDN: