JavaScript and extending 3rd party API - javascript

I'm updating my knowledge about JavaScript and I stuck on one lesson task.
I have API that is returning string...
API.workerName = function (worker) {
return worker.firstName + ' ' + worker.lastName;
};
The task is to prefix returning string and not change API, but extend it. I also have to avoid copying & pasting code, because 3rd party code can change. I should re-use it instead.
What I did is change this function after loading API...
API.workerName = function (worker) {
return '(' + worker.position + ') ' + worker.firstName + ' ' + worker.lastName;
};
... but I think I did it wrong.

To extend the method, you should save the old definition and call it from your extension:
API.oldWorkerName = API.workerName;
API.workerName = function(worker) {
return '(' + worker.position + ')' + API.oldWorkerName(worker);
};
Or maybe this is what your lesson is looking for:
API.workerPositionAndName = function(worker) {
return '(' + worker.position + ')' + API.workerName(worker);
};

Another neat way to save the old definition and also make it unavailable to anybody else, would be to do something like this using IIFE to create a closure:
API.workerName = (function() {
var old = API.workerName; // this old version is only available inside your new function
return function(worker) {
return '(' + worker.position + ')' + old(worker);
}
})();
Here's an example:
API = {
workerName: function (worker) {
return worker.firstName + ' ' + worker.lastName;
}
};
API.workerName = (function () {
var old = API.workerName;
return function (worker) {
return '(' + worker.position + ')' + old(worker);
};
})();
alert(API.workerName({firstName: "Joe", lastName: "Blogs", position: "Lackey" }));

Related

Is defining properties on a function in JavaScript considered bad practice? [duplicate]

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:
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.
Is this kind of altering objects by adding new properties to them a good practice?
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
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:
Working with Objects
Introduction to Object-Oriented JavaScript
"necromancing" here, but I think every great question needs simple answers:
Yes and Yes*
By attaching the properties to the function you clean up the scope, improve readability and add logical cohesion. An added benefit is that you document the relationship between the function and the variables. I think that's a superior design, much better than adding variables on the scope
Created some fun examples here and here.
HERE
AND HERE
* I think it's worth noting that you probably won't see this very often. most developers probably don't realize it's possible. Some people are crazy about every drop of performance... "JavaScript engines optimize based on the 'shape' of an object'..." blah blah blah...
ut I think you can follow the rule you have for Objects and you'll do fine.
Attaching properties to functions is a beautiful (arguably sluggish/hack-ish) way of overloading the () operator, which in turn is usually used to implement functors: Object types that have one really important job, and all its other functionality (if there is any) is just a bunch of helpers. You could also interpret these functors as, basically, a "stateful" function where the state is public (most inline functions for example, have private state, that is state from the local scope).
This JSFiddle demonstrates how we can use a function with custom properties for a translator function with additional utilities:
/**
* Creates a new translator function with some utility methods attached to it.
*/
var createTranslator = function(dict) {
var translator = function(word) {
return dict[word];
};
translator.isWordDefined = function(word) {
return dict.hasOwnProperty(word);
};
// Add more utilities to translator here...
return translator;
};
// create dictionary
var en2deDictionary = {
'banana': 'Banane',
'apple': 'Apfel'
};
// simple use case:
var translator = createTranslator(en2deDictionary);
var pre = $('<pre>');
$("body").append(pre);
pre.append(translator('banana') + '\n');
pre.append(translator('apple') + '\n');
pre.append(translator.isWordDefined('w00t') + '\n');
As you can see, this is perfect for a translator whose sole purpose is to translate. Of course there are many more examples of theses types of objects, but they are by far not as common as types with diversified functionality, such as the classic User, Animal Car etc. types. To those sort of types, you only want to add custom properties in very few cases. Usually, you want to define those as more complete classes, and have their public properties reachable through this and it's prototype.
I realize I'm years late to this, but thought I'd add this example--requirejs sets a property called "amd" on the define() function, which is quite handy as the UMD pattern uses it to detect that the define() function that's in scope is in fact an AMD define() function.
RequireJS source: http://requirejs.org/docs/release/2.1.9/comments/require.js
UMD pattern showing this usage: https://github.com/umdjs/umd/blob/master/templates/amdWeb.js
If you just want to add custom properties to a function then you only need to add those properties to Function.prototype. For example:
Function.prototype.SomeNewProperty = function () {//Do something awesome here...}
It's perfectly acceptable to add properties or methods to a function object. It's done quite often. The jQuery/$ object is an example of this. It's a function with quite a few methods attached.
When properties are added to a constructor they are called 'static' properties and can be invoked without an an instance of the class. e.g. Object.create.
I don't have enough rep to write a comment so I will say here: It generally considered bad practice to extend the prototypes of built in objects, especially if your code has to play with other people's code. It can have unpredictable consequences that are hard to to track.
I agree that this is a difficult question that could have multiple answers, so I prefer to make an different example:
Let's suppose to have an JavaScript Array, populated by a generator:
var arr = [...new Array(10).keys()];
that is
[0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
Now we want to map this to a new array - same length, applying some function, so we could use the native map function property:
arr = arr.map((value,index) => ++value)
We have just done a value=value+1 and return, so now the array will look like
[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
Ok, now supposed to have a JavaScript Object like
var obj=new Object()
that was defined like the previous array (for some crazy reason):
arr.forEach((value,index) => obj[value]=value)
i.e.
{0: 0, 1: 1, 2: 2, 3: 3, 4: 4, 5: 5, 6: 6, 7: 7, 8: 8, 9: 9}
At this point we cannot apply the same map method since it's not defined for an Object so we have to define it as a new prototype of an Object:
Object.defineProperty(Object.prototype, 'mapObject', {
value: function(f, ctx) {
ctx = ctx || this;
var self = this, result = {};
Object.keys(self).forEach(function(k) {
result[k] = f.call(ctx, self[k], k, self);
});
return result;
}
});
At this point we could do as for the array before:
obj=obj.mapObject((value,key) => ++value )
so that we have:
{0: 1, 1: 2, 2: 3, 3: 4, 4: 5, 5: 6, 6: 7, 7: 8, 8: 9, 9: 10}
You can see that we have updated the values only:
[...Object.keys(obj)]
["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]
and we can turn back then into the output array:
[...Object.keys(obj).map(k=>obj[k])]
[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
Here it is at work:
// Array.map
var arr = [...new Array(10).keys()];
console.log("array", arr)
arr = arr.map((value, index) => ++value)
console.log("mapped array", arr)
// new property
Object.defineProperty(Object.prototype, 'mapObject', {
value: function(f, ctx) {
ctx = ctx || this;
var self = this,
result = {};
Object.keys(self).forEach(function(k) {
result[k] = f.call(ctx, self[k], k, self);
});
return result;
}
});
// Object.mapObject
var obj = new Object()
arr = [...new Array(10).keys()];
arr.forEach((value, index) => obj[value] = value)
console.log("object", obj)
obj = obj.mapObject((value, key) => ++value)
console.log("mapped object", obj)
console.log("object keys", [...Object.keys(obj)])
console.log("object values", [...Object.keys(obj).map(k => obj[k])])
Possible addition to John Slegers great answer
Isnt it possible that after John Slegers:
Way 2 : adding properties after defining the function
Adding a Way 2.5
function doSomething() {
doSomething.prop = "Bundy";
doSomething.doSomethingElse = function() {
alert("Why Hello There! ;)");
};
let num = 3;
while(num > 0) {
alert(num);
num--;
}
}
sayHi();
sayHi.doSomethingElse();
alert(doSomething.prop);
var ref = doSomething;
ref();
ref.doSomethingElse();
alert(ref.prop);
Putting in both a "variable" property and a function property for completeness sake, straight in the function declaration. Thus avoiding it to be "disconnected". Left the inner default workings of the function (a simple loop) to show that it still works. No?
test = (function() {
var a = function() {
console.log("test is ok");
};
a.prop = "property is ok";
a.method = function(x, y) {
return x + y;
}
return a
})()
test();
console.log(test.prop);
console.log(test.method(3, 4));
Alternatively you have to use getters and setters
var person = {
firstName: 'Jimmy',
lastName: 'Smith',
get fullName() {
return this.firstName + ' ' + this.lastName;
},
set fullName(name) {
var words = name.toString().split(' ');
this.firstName = words[0] || '';
this.lastName = words[1] || '';
}
}
console.log(person.firstName);
console.log(person.lastName);
console.log(person.fullName);
person.fullName = "Tom Jones";
console.log(person.fullName);

How can i get rid of putting "new" before a function

I was wondering how can I make it posible to get rid of putting "new" before a function, for example:
new functionToDo("thingsToDo").iGotYouBruh("Halo Humans");
is there a posible way of doing this without the "new"?
here is the code I'm trying to use without the "new":
function local (title) {
var storeTitle = title;
this.addL = function(lString) {
var storeText = lString;
localStorage.setItem(storeTitle, storeText);
console.info("Locally stored " + storeTitle.toUpperCase() + " with " + storeText.substring(0, 10) + "... As text.");
};
this.removeL = function() {
localStorage.removeItem(storeTitle);
console.info("Locally removed " + storeTitle + ".");
};
this.getL = function () {
localStorage.getItem(storeTitle);
console.info("Locally got string of " + storeTitle + ": " + localStorage.getItem(storeTitle));
};
};
and here's what I would have to do to invoke the function:
new local("storedElement").getL();
This is possible by checking whether this is an instance of the function itself and returning a new instance otherwise:
function local (title) {
if (!(this instanceof local)) {
return new local(title);
}
var storeTitle = title;
this.addL = function(lString) {
var storeText = lString;
localStorage.setItem(storeTitle, storeText);
console.info("Locally stored " + storeTitle.toUpperCase() + " with " + storeText.substring(0, 10) + "... As text.");
};
this.removeL = function() {
localStorage.removeItem(storeTitle);
console.info("Locally removed " + storeTitle + ".");
};
this.getL = function () {
localStorage.getItem(storeTitle);
console.info("Locally got string of " + storeTitle + ": " + localStorage.getItem(storeTitle));
};
};
You could use JavaScript closures. In particular look at the "Using Closures for the Module Pattern" section of this webpage for a full description. The idea is to have the function return an literal with all the required methods. Any functions or variables that you want to be kept private are just local variables for the function.

ContextMenuItem context function is not executing

I want my context menu item to be visible only if the clicked node is a link i.e. and href is either a magnet link or a torrent link. But item is visible for all the links because context function is not executing, can anybody help why context function is not executing?
Here is the code:
exports.main = function() {
var cm = require("sdk/context-menu");
var contextCode = ' self.on("context", function (node) { '+
' while(node.nodeName!="A") { node = node.parentNode; } '+
' var pat_magnet = /^magnet:/i; ' +
' var pat_torrent = /.torrent$/i; ' +
' if(pat_torrent.test(node.href) || pat_magnet.test(node.href)) { return true; } '+
' else { return false; } '+
' }); ';
var clickCode = ' self.on("click", function(node,data){ '+
' while(node.nodeName!="A") { node = node.parentNode; } '+
' var pat_hash = /[0-9abcdef]{32,40}/i; ' +
' var result = node.href.match(pat_hash); '+
' var hash = "" '
' if(result != null) { hash=result[0]; } '+
' var xhr = new XMLHttpRequest(); '+
' if(hash != "") { '+
' var apiCall = "https://www.furk.net/api/dl/add?api_key=*************&info_hash="+hash; '+
' } '+
' else{ '+
' var apiCall = "https://www.furk.net/api/dl/add?api_key=*************&url="+encodeURI(node.href); '+
' } '+
' xhr.open("GET",apiCall,true); '+
' xhr.onreadystatechange = function(){ if(xhr.readyState = 4) { if (xhr.response.status = "ok") { alert("Torrent added to Furk."); } else { alert("Torrent could not be added to Furk."); } } } '+
' xhr.send(null); '+
' });';
cm.Item({
label: "Add to Furk",
context: cm.SelectorContext("a[href]"),
contentScript: contextCode + clickCode
});
};
Please always post self-containied examples that can be directly tried in the future.
Now back to your problem: The content script actually has a syntax error.
The following line:
' var pat_torrent = /.torrent$/i ' +
lacks a semicolon, and should be:
' var pat_torrent = /.torrent$/i; ' +
The reason automatic semicolon insertion (ASI) does not work here is: The "code" is actually a string that has no newlines in it whatsoever. If there were newlines, then ASI would have worked.
Anway, another reason not to have complex content script inline. Have a look at contentScriptFile.
This error is actually logged, but the presentation sucks. In the Browser Console:
[20:57:51.707] [object Error] (expandable)
In terminal:
console.error: context-magnet:
Message: SyntaxError: missing ; before statement
Here is a fixed, reproducible sample:
var cm = require("sdk/context-menu");
var contextCode = ' self.on("context", function (node) { '+
' while(node.nodeName!="A") { node = node.parentNode; } '+
' var pat_magnet = /^magnet:/i; ' +
' var pat_torrent = /.torrent$/i; ' +
' if(pat_torrent.test(node.href) || pat_magnet.test(node.href)) { return true; } '+
' else { return false; } '+
' }); ';
cm.Item({
label: "magnet test",
context: cm.SelectorContext("a[href]"),
contentScript: contextCode
});
Edit ' var hash = "" ' has the same problem, and there are might be other such errors that I missed skimming this new code.
As I already said, please use contentScriptFile and not contentScript for long-ish scripts.
Another edit
Here is a builder using contentScriptFile, where I also fixed a couple of other errors, the most important of which are:
Use permissions so that the XHR will work.
Correctly set up the XHR to use responseType and overrideMimeType().
Use onload/onerror instead of onreadystatechange.

use variable in next function (Google Sheet Queries)

I have a function that defines a variable and I would like to use the value in the next function. Each function has it's own query. I think I either need to combine the queries into one function, of which I don't know how to do or setup a global variable with the first query so it can be referenced in the second function.
I've been reading that global variables and they say they're not a good practice. Can someone help me with how to reuse a variable from one function to the next or combine the two queries else another JS method I should consider?
google.setOnLoadCallback(queryValue1);
function queryValue1 () {
var query2 = new google.visualization.Query('https://spreadsheets.google.com/spreadsheet/tq?range=A2:A17&key=0AhCv9Xu_eRnSdFNhSzNQUFd3b1ZfRHgtQURINFpzeGc&gid=9');
query2.send(function (response) {
if (response.isError()) {
alert('Error in query2: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
var data1 = response.getDataTable();
// fetch the data from range cell (row, column) into the span "bx"
for (var z = 0; z <= 15; z++) {
document.getElementById('a' + (z + 22)).innerHTML = data1.getValue(z, 0);
}
});
}
google.setOnLoadCallback(queryValue3);
function queryValue3 () {
var query3 = new google.visualization.Query('https://spreadsheets.google.com/spreadsheet/tq?range=B2:B17&key=0AhCv9Xu_eRnSdFNhSzNQUFd3b1ZfRHgtQURINFpzeGc&gid=10');
query3.send(function (response) {
if (response.isError()) {
alert('Error in query3: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
var data3 = response.getDataTable();
var m1 = data3.getValue(0, 0);
var red22 = "<span style='color:#ff0000' ";
var yellow22 = "<span style='color:#FF9900' ";
var green22 = "<span style='color:#009900' ";
if (m1 <= 70)
{
m1 = red22;
}
else if (71 === m1 && m1 <= 89)
{
m1 = yellow22;
}
else if (m1 >=90)
{
m1 = green22;
}
console.log ("m1= " + m1)
var m1 = (m1 + a22 + "</span>");
console.log ("m1= " + m1)
});
}
Thank you...
As it is, your making two essentially parallel asynchronous network calls (the Query.send() calls). There's no telling which one is going to return first (or if one will fail), so relying in one callback on data from the other is unreliable and a bad idea, no matter whether you use a global variable or something else.
I think you probably just want to chain the two asynchronous calls, so try something of this shape:
google.setOnLoadCallback(queryValue1);
function queryValue1 () {
var query2 = new google.visualization.Query('https://spreadsheets.google.com/spreadsheet/tq?range=A2:A17&key=0AhCv9Xu_eRnSdFNhSzNQUFd3b1ZfRHgtQURINFpzeGc&gid=9');
query2.send(function (response) {
if (response.isError()) {
alert('Error in query2: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
// Get the data you want to pass to query3 here
// var query3Data = ...
queryValue3(query3Data);
});
}
function queryValue3(passedData) {
var query3 = new google.visualization.Query('https://spreadsheets.google.com/spreadsheet/tq?range=B2:B17&key=0AhCv9Xu_eRnSdFNhSzNQUFd3b1ZfRHgtQURINFpzeGc&gid=10');
query3.send(function (response) {
if (response.isError()) {
alert('Error in query3: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
// Do something with passedData here
// ...
});
}
So don't start the second query until the first one returned.

Unable to get property of undefined or null reference

This is similar to my last question but the problem is different. I use a separate javascript file for all of my javascript functions. That file is called by my main window, and is also called in a separate instance by my child windows. My code works with every browser except IE 9 and 10. I have not tested earlier versions of IE.
IE says the offending line is window.opener.savetoparent($targetval); My previous code was opener.savetoparent($targetval); and before that I simply made the changes to the parent from the child directly. I have also gone into IE and enabled protected mode as suggested in another article with no change in behavior. Savetoparent() is available to both the child and the parent so I must call it with opener for it to run in the parent.
The error I am getting is : Unable to get property 'savetoparent' of undefined or null reference. Here is the code:
function saveandclose($wintype, $propid) {
switch($wintype) {
case 'ccdetail':
var $targetval = $('#cc-total').val();
var $fieldname = 'closingcoststotal';
break;
}
window.opener.savetoparent($targetval);
closewindow();
}
The safe to parent function is:
function savetoparent($targetval) {
$('#' + $parentloc).val($targetval);
var $name = $('#' + $parentloc).attr("name");
var $rawtargetval = jsstrtonum($targetval);
processrvsave($propertyid, $name, $rawtargetval);
calcrvtotals();
}
Any light you can shed on this would be greatly appreciated.
window is launched like this
if(window.showModalDialog) {
window.showModalDialog($childname + '.php?ploc=' + $parentloc + '&propid=' + $propid, '', 'dialogWidth: ' + $winwidth + 'px; dialogHeight: ' + $winheight + 'px;')
}
else {
window.open($childname + '.php?ploc=' + $parentloc + '&propid=' + $propid, '', 'width=' + $winwidth + ', height=' + $winheight + ', modal=yes');
}
There is no opener in showModalDialog. Use the returnValue
Also there has not been a modal parameter on window.open in many years..
Here is how to use returnValue
if(window.showModalDialog) {
$targetval = window.showModalDialog($childname + '.php?ploc=' + $parentloc + '&propid=' + $propid,
window,
'dialogWidth: ' + $winwidth + 'px; dialogHeight: ' + $winheight + 'px;'))
if(targetval) savetoparent($targetval);
}
else {
window.open($childname + '.php?ploc=' + $parentloc + '&propid=' + $propid, '', 'width=' + $winwidth + ', height=' + $winheight + ', modal=yes');
}
then
function saveandclose($wintype, $propid) {
var $targetval ="";
switch($wintype) {
case 'ccdetail':
$targetval = $('#cc-total').val();
// var $fieldname = 'closingcoststotal'; I do not see this used anywhere
break;
}
if (window.opener) window.opener.savetoparent($targetval);
else returnValue = $targetval;
closewindow();
}

Categories