Adding a property to a function

Question

You can assign a property to a function, but is that a good idea? In this example, I'm showing that you can't create a property to a function inside the function, but you can outside it.

Q: Is a.questionable considered an ok JavaScript programming practice?

function a() {
a.bad = 1
}
a.questionable = 2

function d() {
  console.log(a.bad)
  console.log(a.questionable)
}
d()

This question was inspired by JavaScript: Understanding the Weird Parts

Shouldn't it be `this.bad = 1` instead? Since `a` is undefined in the function scope — Matheus Avellar, Mar 31 '17 at 19:06
Creating the property inside the function works as well -- you just never called `a()` to run it. Add `a();` to your code before you call `d()` and you'll get `1` output for `a.bad`. — freginold, Mar 31 '17 at 19:07
@Damon Just tested it, and if I think about it, it actually makes sense, since it references the global scope. I just never would've expected that behavior. Thanks c: — Matheus Avellar, Mar 31 '17 at 19:09
This might help http://stackoverflow.com/a/8588847/7549867. yes you can add because function are also objects but if you use a design pattern then it would always ask you to add property to the object and use function to modify it. Much like OOPS — Gaurav Chaudhary, Mar 31 '17 at 19:11
You should probably never do the first one - I can't think of a situation where it would be beneficial. The second one, attaching a property to a function is an interesting side effect of functions also being objects in javascript - and should be perfectly fine to use if you like it. I've never found a use case for this behavior (read: never found a use case that can't be just as easily achieved with a more standard FP / OOP paradigm) . — Damon, Mar 31 '17 at 19:12

score 3 · Answer 1 · answered Mar 31 '17 at 19:07

It’s fine to put properties on functions. In fact, that’s exactly what static methods are on ES6 classes, which is the only use of static; consider it explicit language support.

class Foo {
    static bar() {}
}

'bar' in Foo  // true
typeof Foo    // 'function'

In this example, I'm showing that you can't create a property to a function inside the function, but you can outside it.

You can create a property on a function inside that function, but it’s unreasonable to expect the body of a function to run without calling it.

Oops. Sorry about that. – Phillip Senn Mar 31 '17 at 19:12 — Phillip Senn, Mar 31 '17 at 19:12

gyre · Accepted Answer · 2017-03-31T19:15:58.613

In this example, I'm showing that you can't create a property to a function inside the function, but you can outside it.

This is actually not the case. You can add properties to a function anywhere you have a reference to it. The problem is that you haven't called a() and so the line a.bad = 1 has never had a chance to run.

function a() {
a.bad = 1
}
a.questionable = 2

function d() {
  console.log(a.bad)
  console.log(a.questionable)
}
a()
d()

Q: Is a.questionable considered an ok JavaScript programming practice?

jQuery uses it quite extensively (think jQuery.fn, jQuery.extend, etc.) — so no, I don't think it is considered a "bad" programming practice per se. In fact, adding properties to a constructor function was the only way to mimic static fields and methods before ES6 introduced them as a part of class syntax.

function Constructor() {

}
Constructor.staticMethod = function () {
  return "I'm a static method!"
}

Constructor.staticProperty = "I'm a static property!"

console.log(
  Constructor.staticMethod(),
  Constructor.staticProperty
)

Oops. Sorry about that. – Phillip Senn Mar 31 '17 at 19:12 — Phillip Senn, Mar 31 '17 at 19:12

Adding a property to a function

2 Answers2