First of all, it’s important to realise that standard function properties (arguments, name, caller & length) cannot be overwritten. So, forget about adding a property with that name.
Adding your own custom properties to a function can be done in different ways that should work in every browser.
Adding your own custom properties to a function
Way 1 : adding properties while running the function :
var doSomething = function() {
doSomething.name="Tom";
doSomething.name2 = 'John';
return 'Beep';
};
console.log('doSomething.name : ' + doSomething.name);
console.log('doSomething.name2 : ' + doSomething.name2);
console.log('doSomething() : ' + doSomething());
console.log('doSomething.name : ' + doSomething.name);
console.log('doSomething.name2 : ' + doSomething.name2);Way 1 (alternate syntax) :
function doSomething() {
doSomething.name="Tom";
doSomething.name2 = 'John';
return 'Beep';
};
console.log('doSomething.name : ' + doSomething.name);
console.log('doSomething.name2 : ' + doSomething.name2);
console.log('doSomething() : ' + doSomething());
console.log('doSomething.name : ' + doSomething.name);
console.log('doSomething.name2 : ' + doSomething.name2);Way 1 (second alternate syntax) :
var doSomething = function f() {
f.name="Tom";
f.name2 = 'John';
return 'Beep';
};
console.log('doSomething.name : ' + doSomething.name);
console.log('doSomething.name2 : ' + doSomething.name2);
console.log('doSomething() : ' + doSomething());
console.log('doSomething.name : ' + doSomething.name);
console.log('doSomething.name2 : ' + doSomething.name2);A problem with this strategy is that you need to run your function at least once to assign the properties. For many functions, that’s obviously not what you want. So let’s consider the other options.
Way 2 : adding properties after defining the function :
function doSomething() {
return 'Beep';
};
doSomething.name="Tom";
doSomething.name2 = 'John';
console.log('doSomething.name : ' + doSomething.name);
console.log('doSomething.name2 : ' + doSomething.name2);
console.log('doSomething() : ' + doSomething());
console.log('doSomething.name : ' + doSomething.name);
console.log('doSomething.name2 : ' + doSomething.name2);Now, you don’t need to run your function first before you’re able to access your properties. However, a disadvantage is that your properties feel disconnected from your function.
Way 3 : wrap your function in anonymous function :
var doSomething = (function(args) {
var f = function() {
return 'Beep';
};
for (var i in args) {
f[i] = args[i];
}
return f;
}({
'name': 'Tom',
'name2': 'John'
}));
console.log('doSomething.name : ' + doSomething.name);
console.log('doSomething.name2 : ' + doSomething.name2);
console.log('doSomething() : ' + doSomething());
console.log('doSomething.name : ' + doSomething.name);
console.log('doSomething.name2 : ' + doSomething.name2);Wrapping your function in an anonymous function, you can collect your attributes into an object and use a loop to add those attributes one-by-one within the anonymous function. That way, your attributes feel more connected to your function. This technique is also very useful for when your attributes need to be copied from an existing object. A disadvantage, however, is that you can only add multiple attributes at the same time when you define your function. Also, it doesn’t exactly result in DRY code if adding properties to a function is something you want to do often.
Way 4 : add an ‘extend’ function to your function, that adds the properties of an object to itself one by one :
var doSomething = function() {
return 'Beep';
};
doSomething.extend = function(args) {
for (var i in args) {
this[i] = args[i];
}
return this;
}
doSomething.extend({
'name': 'Tom',
'name2': 'John'
});
console.log('doSomething.name : ' + doSomething.name);
console.log('doSomething.name2 : ' + doSomething.name2);
console.log('doSomething() : ' + doSomething());
console.log('doSomething.name : ' + doSomething.name);
console.log('doSomething.name2 : ' + doSomething.name2);This way, you can extend multiple properties and/or copy properties from another project at any time. Again, however, your code isn’t DRY if this is something you do more often.
Way 5 : Make a generic ‘extend’ function :
var extend = function(obj, args) {
if (Array.isArray(args) || (args !== null && typeof args === 'object')) {
for (var i in args) {
obj[i] = args[i];
}
}
return obj;
}
var doSomething = extend(function() {
return 'Beep';
}, {
'name': 'Tom',
'name2': 'John'
});
console.log('doSomething.name : ' + doSomething.name);
console.log('doSomething.name2 : ' + doSomething.name2);
console.log('doSomething() : ' + doSomething());
console.log('doSomething.name : ' + doSomething.name);
console.log('doSomething.name2 : ' + doSomething.name2);A genetic extend function allows for a more DRY approach, allowing you to add the object or any project to any other object.
Way 6 : Create an extendableFunction object and use it to attach an extend function to a function :
var extendableFunction = (function() {
var extend = function(args) {
if (Array.isArray(args) || (args !== null && typeof args === 'object')) {
for (i in args) {
this[i] = args[i];
}
}
return this;
};
var ef = function(v, obj) {
v.extend = extend;
return v.extend(obj);
};
ef.create = function(v, args) {
return new this(v, args);
};
return ef;
})();
var doSomething = extendableFunction.create(function() {
return 'Beep';
}, {
'name': 'Tom',
'name2': 'John'
});
console.log('doSomething.name : ' + doSomething.name);
console.log('doSomething.name2 : ' + doSomething.name2);
console.log('doSomething() : ' + doSomething());
console.log('doSomething.name : ' + doSomething.name);
console.log('doSomething.name2 : ' + doSomething.name2);Rather than using a generic ‘extend’ function, this technique allows you to generate functions that have an ‘extend’ method attached to it.
Way 7 : Add an ‘extend’ function to the Function prototype :
Function.prototype.extend = function(args) {
if (Array.isArray(args) || (args !== null && typeof args === 'object')) {
for (i in args) {
this[i] = args[i];
}
}
return this;
};
var doSomething = function() {
return 'Beep';
}.extend({
name : 'Tom',
name2 : 'John'
});
console.log('doSomething.name : ' + doSomething.name);
console.log('doSomething.name2 : ' + doSomething.name2);
console.log('doSomething() : ' + doSomething());
console.log('doSomething.name : ' + doSomething.name);
console.log('doSomething.name2 : ' + doSomething.name2);A great advantage to this technique is that it makes adding new properties to a function very easy and DRY as well as completely OO. Also, it’s pretty memory friendly. A downside, however, is that it’s not very future proof. In case future browsers ever add a native ‘extend’ function to the Function prototype, this that could break your code.
Way 8 : Run a function recursively once and then return it :
var doSomething = (function f(arg1) {
if(f.name2 === undefined) {
f.name="Tom";
f.name2 = 'John';
f.extend = function(args) {
if (Array.isArray(args) || (args !== null && typeof args === 'object')) {
for (i in args) {
this[i] = args[i];
}
}
return this;
};
return f;
} else {
return 'Beep';
}
})();
console.log('doSomething.name : ' + doSomething.name);
console.log('doSomething.name2 : ' + doSomething.name2);
console.log('doSomething() : ' + doSomething());
console.log('doSomething.name : ' + doSomething.name);
console.log('doSomething.name2 : ' + doSomething.name2);Run a function once and have it test whether one of its properties is set. If not set, set the properties and return itself. If set, execute the function. If you include an ‘extend’ function as one of the properties, you can later execute that to add new properties.
Adding your own custom properties to an object
In spite of all these options, I would nevertheless recommend against adding properties to a function. It’s much better to add properties to objects!
Personally, I prefer the singleton classes with the following syntax.
var keyValueStore = (function() {
return {
'data' : {},
'get' : function(key) { return keyValueStore.data[key]; },
'set' : function(key, value) { keyValueStore.data[key] = value; },
'delete' : function(key) { delete keyValueStore.data[key]; },
'getLength' : function() {
var l = 0;
for (p in keyValueStore.data) l++;
return l;
}
}
})();
console.log('keyValueStore.get("name") : ' + keyValueStore.get("name"));
console.log('keyValueStore.get("name2") : ' + keyValueStore.get("name2"));
try { console.log('keyValueStore.data["name"] : ' + keyValueStore.data["name"]) } catch { console.error('keyValueStore.data not defined') }
try { console.log('keyValueStore.data["name2"] : ' + keyValueStore.data["name2"]) } catch { console.error('keyValueStore.data not defined') }
keyValueStore.set("name", "Tom");
keyValueStore.set("name2", "John");
console.log('keyValueStore.get("name") : ' + keyValueStore.get("name"));
console.log('keyValueStore.get("name2") : ' + keyValueStore.get("name2"));
try { console.log('keyValueStore.data["name"] : ' + keyValueStore.data["name"]) } catch { console.error('keyValueStore.data not defined') }
try { console.log('keyValueStore.data["name2"] : ' + keyValueStore.data["name2"]) } catch { console.error('keyValueStore.data not defined') }An advantage to this syntax is that it allows for both public and private variables. For example, this is how you make the ‘data’ variable private :
var keyValueStore = (function() {
var data = {};
return {
'get' : function(key) { return data[key]; },
'set' : function(key, value) { data[key] = value; },
'delete' : function(key) { delete data[key]; },
'getLength' : function() {
var l = 0;
for (p in data) l++;
return l;
}
}
})();
console.log('keyValueStore.get("name") : ' + keyValueStore.get("name"));
console.log('keyValueStore.get("name2") : ' + keyValueStore.get("name2"));
try { console.log('keyValueStore.data["name"] : ' + keyValueStore.data["name"]) } catch { console.error('keyValueStore.data not defined') }
try { console.log('keyValueStore.data["name2"] : ' + keyValueStore.data["name2"]) } catch { console.error('keyValueStore.data not defined') }
keyValueStore.set("name", "Tom");
keyValueStore.set("name2", "John");
console.log('keyValueStore.get("name") : ' + keyValueStore.get("name"));
console.log('keyValueStore.get("name2") : ' + keyValueStore.get("name2"));
try { console.log('keyValueStore.data["name"] : ' + keyValueStore.data["name"]) } catch { console.error('keyValueStore.data not defined') }
try { console.log('keyValueStore.data["name2"] : ' + keyValueStore.data["name2"]) } catch { console.error('keyValueStore.data not defined') }But you want multiple datastore instances, you say? No problem!
var keyValueStore = (function() {
var countKVS = 0;
return (function kvs() {
return {
'data' : {},
'create' : function() { return new kvs(); },
'countInstances' : function() { return countKVS; },
'get' : function(key) { return this.data[key]; },
'set' : function(key, value) { this.data[key] = value; },
'delete' : function(key) { delete this.data[key]; },
'count' : function() {
var l = 0;
for (p in this.data) l++;
return l;
}
}
})();
})();
kvs = keyValueStore.create(), console.warn('-- KEY VALUE STORE CREATED --');
console.log('keyValueStore.countInstances() : ' + keyValueStore.countInstances());
console.log('kvs.count() : ' + kvs.count());
console.log('kvs.data : ' + JSON.stringify(kvs.data));
console.log('kvs.countKVS : ' + kvs.countKVS);
kvs.set("Tom", "Baker"), console.warn('-- ADDING KEY VALUE PAIR "Tom, "Baker" --');
console.log('kvs.get("Tom") : ' + kvs.get("Tom"));
console.log('keyValueStore.countInstances() : ' + keyValueStore.countInstances());
console.log('kvs.count() : ' + kvs.count());
console.log('kvs.data : ' + JSON.stringify(kvs.data));
console.log('kvs.countKVS : ' + kvs.countKVS);
kvs2 = keyValueStore.create(), console.warn('-- SECOND KEY VALUE STORE CREATED --');
console.log('keyValueStore.countInstances() : ' + keyValueStore.countInstances());
console.log('kvs.count() : ' + kvs.count());
console.log('kvs.data : ' + JSON.stringify(kvs.data));
console.log('kvs.countKVS : ' + kvs2.countKVS);
console.log('kvs2.count() : ' + kvs2.count());
console.log('kvs2.data : ' + JSON.stringify(kvs2.data));
console.log('kvs2.countKVS : ' + kvs2.countKVS);
kvs.set("Daisy", "Hostess"), kvs2.set("Daisy", "Hostess"), console.warn('-- ADDING KEY VALUE PAIR "Daisy", "Hostess" TO BOTH STORES --');
console.log('kvs.get("Tom") : ' + kvs.get("Tom"));
console.log('kvs.get("Daisy") : ' + kvs.get("Daisy"));
console.log('keyValueStore.countInstances() : ' + keyValueStore.countInstances());
console.log('kvs.count() : ' + kvs.count());
console.log('kvs.data : ' + JSON.stringify(kvs.data));
console.log('kvs.countKVS : ' + kvs2.countKVS);
console.log('kvs2.get("Tom") : ' + kvs2.get("Tom"));
console.log('kvs2.get("Daisy") : ' + kvs2.get("Daisy"));
console.log('kvs2.count() : ' + kvs2.count());
console.log('kvs2.data : ' + JSON.stringify(kvs2.data));
console.log('kvs2.countKVS : ' + kvs2.countKVS);
kvs.delete('Daisy'), console.warn('-- DELETING KEY "Daisy" FROM FIRST STORE --');
console.log('kvs.get("Tom") : ' + kvs.get("Tom"));
console.log('kvs.get("Daisy") : ' + kvs.get("Daisy"));
console.log('keyValueStore.countInstances() : ' + keyValueStore.countInstances());
console.log('kvs.count() : ' + kvs.count());
console.log('kvs.data : ' + JSON.stringify(kvs.data));
console.log('kvs.countKVS : ' + kvs2.countKVS);
console.log('kvs2.get("Tom") : ' + kvs2.get("Tom"));
console.log('kvs2.get("Daisy") : ' + kvs2.get("Daisy"));
console.log('kvs2.count() : ' + kvs2.count());
console.log('kvs2.data : ' + JSON.stringify(kvs2.data));
console.log('kvs2.countKVS : ' + kvs2.countKVS);Finally, you can seperate the instance and singleton properties and use a prototype for the instance’s public methods. That results in the following syntax :
var keyValueStore = (function() {
var countKVS = 0; // Singleton private properties
var kvs = function() {
countKVS++; // Increment private properties
this.data = {}; // Instance public properties
};
kvs.prototype = { // Instance public properties
'get' : function(key) { return this.data[key]; },
'set' : function(key, value) { this.data[key] = value; },
'delete' : function(key) { delete this.data[key]; },
'count' : function() {
var l = 0;
for (p in this.data) l++;
return l;
}
};
return { // Singleton public properties
'create' : function() { return new kvs(); },
'countInstances' : function() { return countKVS; }
};
})();
kvs = keyValueStore.create(), console.warn('-- KEY VALUE STORE CREATED --');
console.log('keyValueStore.countInstances() : ' + keyValueStore.countInstances());
console.log('kvs.count() : ' + kvs.count());
console.log('kvs.data : ' + JSON.stringify(kvs.data));
console.log('kvs.countKVS : ' + kvs.countKVS);
kvs.set("Tom", "Baker"), console.warn('-- ADDING KEY VALUE PAIR "Tom, "Baker" --');
console.log('kvs.get("Tom") : ' + kvs.get("Tom"));
console.log('keyValueStore.countInstances() : ' + keyValueStore.countInstances());
console.log('kvs.count() : ' + kvs.count());
console.log('kvs.data : ' + JSON.stringify(kvs.data));
console.log('kvs.countKVS : ' + kvs.countKVS);
kvs2 = keyValueStore.create(), console.warn('-- SECOND KEY VALUE STORE CREATED --');
console.log('keyValueStore.countInstances() : ' + keyValueStore.countInstances());
console.log('kvs.count() : ' + kvs.count());
console.log('kvs.data : ' + JSON.stringify(kvs.data));
console.log('kvs.countKVS : ' + kvs2.countKVS);
console.log('kvs2.count() : ' + kvs2.count());
console.log('kvs2.data : ' + JSON.stringify(kvs2.data));
console.log('kvs2.countKVS : ' + kvs2.countKVS);
kvs.set("Daisy", "Hostess"), kvs2.set("Daisy", "Hostess"), console.warn('-- ADDING KEY VALUE PAIR "Daisy", "Hostess" TO BOTH STORES --');
console.log('kvs.get("Tom") : ' + kvs.get("Tom"));
console.log('kvs.get("Daisy") : ' + kvs.get("Daisy"));
console.log('keyValueStore.countInstances() : ' + keyValueStore.countInstances());
console.log('kvs.count() : ' + kvs.count());
console.log('kvs.data : ' + JSON.stringify(kvs.data));
console.log('kvs.countKVS : ' + kvs2.countKVS);
console.log('kvs2.get("Tom") : ' + kvs2.get("Tom"));
console.log('kvs2.get("Daisy") : ' + kvs2.get("Daisy"));
console.log('kvs2.count() : ' + kvs2.count());
console.log('kvs2.data : ' + JSON.stringify(kvs2.data));
console.log('kvs2.countKVS : ' + kvs2.countKVS);
kvs.delete('Daisy'), console.warn('-- DELETING KEY "Daisy" FROM FIRST STORE --');
console.log('kvs.get("Tom") : ' + kvs.get("Tom"));
console.log('kvs.get("Daisy") : ' + kvs.get("Daisy"));
console.log('keyValueStore.countInstances() : ' + keyValueStore.countInstances());
console.log('kvs.count() : ' + kvs.count());
console.log('kvs.data : ' + JSON.stringify(kvs.data));
console.log('kvs.countKVS : ' + kvs2.countKVS);
console.log('kvs2.get("Tom") : ' + kvs2.get("Tom"));
console.log('kvs2.get("Daisy") : ' + kvs2.get("Daisy"));
console.log('kvs2.count() : ' + kvs2.count());
console.log('kvs2.data : ' + JSON.stringify(kvs2.data));
console.log('kvs2.countKVS : ' + kvs2.countKVS);With this syntax, you can have :
- multiple instances of an object
- private variables
- class variables