CODEWITHSUNDEEP
javascriptfunctionobjectjavascript-objects
Martin
Martin

Reputation: 1343

Creating a function with properties

Sorry, I don´t know the name of this.

I want to have a function and an object with properties in only one variable.

Here is how it works:

var obj = function() {
    return "foo";
};

obj.prop = "bar";

obj(); // => "foo"
obj.prop; // => "bar"

This works fine, but I would like to change the order of this:

var obj = { prop: "bar" };
obj = function() {
    return "foo";
};

obj(); // => "foo"
obj.prop; // => undefined

Is there a way to do this?

I want do do this because I have a lot of properties to add to the object:

var obj = function() {
    return "foo";
};

obj.prop1 = "bar1";
obj.prop2 = "bar2";
obj.prop3 = "bar3";
obj.prop4 = "bar4";
obj.prop5 = "bar5";
obj.prop6 = "bar6";
obj.prop7 = "bar7";
//...

Upvotes: 3

Views: 91

Answers (3)

Fernando Soares
Fernando Soares

Reputation: 26

I also agree with Grundy, but you could do something like that:

var x = function(){
var obj = {};
  return {
    objToReturn: obj,
    objFunction: function(){return 'foo';},
    addItemsToObject: function (key, value) {
      obj[decodeURIComponent(key)] = value;
    }
   }
};

I honestly don't know if that's what you really want, but in that case you can execute the "x" function and after you can access the "objFunction", the "objToReturn" or the "addItemsToObject" function.

So it will be something like that:

var y = x();

for (propertie in yourProperties){      
  y.addItemsToObject
    (propertie, yourProperties[decodeURIComponent(propertie)]);
}

And then:

y.objFunction();

'foo'

Hope that helps.

Upvotes: 0

Matt Browne
Matt Browne

Reputation: 12419

This isn't possible because when you do:

obj = function() {
    return "foo";
};

...you're assigning the variable obj to the new function, so it no longer points to the original object you created ({ prop: "bar" }) at all.

So if you want to add properties to a function object, you must always create the function first, then add properties.

As an alternative, you could do something like this:

var props = {
    prop1: "bar1",
    prop2: "bar2"
};

var obj = function() {
    return "foo";
};

for (var key in props) {
    obj[key] = props[key];  
}

Or if you happen to have jQuery available (and don't have Object.assign available):

jQuery.extend(obj, props);

(Of course there are shims available for Object.assign, which would allow @Pointy's answer to work in older browsers.)

Upvotes: 6

Pointy
Pointy

Reputation: 413702

If you want to do this with one statement, ES2015 (and some libraries) let you do:

var obj = Object.assign(
  function() { /* ... */ },
  { "hello": "world" }
);

Which will give you obj as a function with the property "hello". Note that this is really just the same thing as the separate assignment, but it's all wrapped up as one overall expression, which is nice because it means you can do something like

return Object.assign(function() { /* whatever */ }, {
  prop: whatever,
  // ...
});

Upvotes: 5

Related Questions