Develop Reference

Can't access function attribute inside decoration function

In the following code I am trying to add decorators to a function. For certain reasons I would like to display the function attribute "name". However, I have no access to it as soon as I am in the individual functions. Also, I'm not sure why the functions are called from the bottom up. What are the reasons for all of the points mentioned and how can I avoid them?
let rectangleArea = (length, width) => {
return length * width;
}
const countParams = (fn) => {
return (...params) => {
console.log('countParams', fn.name)
if (params.length !== fn.length) {
throw new Error(`Incorrect number of parameters for ${fn.name}!`);
}
return fn(...params);
}
}
const requireIntegers = (fn) => {
return (...params) => {
console.log('requireIntegers', fn.name)
params.forEach(param => {
if (!Number.isInteger(param)) {
throw new TypeError(`Params must be integers at ${fn.name}!`); //Can't access fn.name
}
});
return fn(...params);
}
}
//Why running from bottom to top?
rectangleArea = countParams(rectangleArea);
rectangleArea = requireIntegers(rectangleArea);
console.log(rectangleArea(20, 30, "hey"));

The first time you make a decorated function for a given function, that returned function does not have a name -- it is anonymous. So when you then pass that decorated function to be decorated again, fn will be that anonymous function.
To solve this, assign the name of the fn function also to the returned decorated function. That way the name will stick even when you decorate that function again, and again...
Here is a helper function that will assign the name property to a given function:
const setName = (deco, value) => {
Object.defineProperty(deco, "name", {value, writable: false});
return deco;
}
let rectangleArea = (length, width) => {
return length * width;
}
const countParams = (fn) => {
return setName((...params) => {
console.log('countParams', fn.name)
if (params.length !== fn.length) {
throw new Error(`Incorrect number of parameters for ${fn.name}!`);
}
return fn(...params);
}, fn.name);
}
const requireIntegers = (fn) => {
return setName((...params) => {
console.log('requireIntegers', fn.name)
params.forEach(param => {
if (!Number.isInteger(param)) {
throw new TypeError(`Params must be integers at ${fn.name}!`); //Can't access fn.name
}
});
return fn(...params);
}, fn.name);
}
rectangleArea = countParams(rectangleArea);
rectangleArea = requireIntegers(rectangleArea);
console.log(rectangleArea(20, 30, "hey"));
Why the functions are called from the bottom up.
Because in your decorator the last step is to call fn.
That fn might be an already decorated function, and so it is normal that earlier decorations of the function run later.
It is like wrapping a birthday present several times, each time with a different color of wrapping paper. When your friend unpacks it, they will get to see the colors of wrapping paper in the reverse order from the order in which you had applied them.

So you want to do something additional with your decorators? They need some common behavior? We've shown we know how to do that already: with decorators. Your decorators need decorators of their own!
Here I write a decorator-decorator keep which takes a decorator function and returns a new decorator function which keeps the name and length properties of the function passed to it. (Say that five times fast!)
It uses the same technique as the answer from trincot, but is less intrusive, as you can simply wrap the decorator functions just as you would the underlying ones. Here I do that at definition time, since we never really want these decorators without this behavior, but you can do it as you like.
let rectangleArea = (length, width) => {
return length * width;
}
const keep = (decorator) => (fn) =>
Object .defineProperties (decorator (fn), {
name: {value: fn .name, writable: false},
length: {value: fn .length, writable: false}
})
const countParams = keep ((fn) => {
return (...params) => {
console.log('countParams', fn.name)
if (params.length !== fn.length) {
throw new Error(`Incorrect number of parameters for ${fn.name}!`);
}
return fn(...params);
}
})
const requireIntegers = keep ((fn) => {
return (...params) => {
console.log('requireIntegers', fn.name)
params.forEach(param => {
if (!Number.isInteger(param)) {
throw new TypeError(`Params must be integers at ${fn.name}!`); //Can't access fn.name
}
});
return fn(...params);
}
})
//Why running from bottom to top? -- answered by #balastrong
rectangleArea = countParams(rectangleArea);
rectangleArea = requireIntegers(rectangleArea);
console.log(rectangleArea(20, 30));
console.log(rectangleArea(20, 30, "hey"));
.as-console-wrapper {max-height: 100% !important; top: 0}
The name keep was originally keepName before I realized that I personally would also want the function to keep the arity intact. I couldn't come up with a clear useful name for this... which is a large warning sign to me. So there may be something still wrong with this design.

It's not from bottom to top, it's the order you set.
With your decorators, you basically just did this:
requireIntegers(countParams(rectangleArea(20, 30, "hey"))).
Which means first it executes requireIntegers by passing it as input everything else (countParams(rectangleArea(20, 30, "hey"))).
Then you see the console log and the error as params.forEach scans the params and finds 'hey' which is not a number.

Javascript: A dictionary of functions; one function in dictionary calls another

I have a dictionary of functions which are essentially different calls to an API I am using to receive data (in promises). The way my API has structured its data, in order to get every species from each country, I must make a call to the API modifying the https request, using a keyword q which is specific to each country. I have created an function within the dictionary called sp_b_c, which means species by country. It takes an q, which is the country, where the call itself returns a promise with a promise value of all the species within that country.
I want to create another function in the dictionary which would allow me to grab all species from each country so that it all will be contained for later use.
What I have attempted to do is to create a new function called sp_b_c_all. I make a call to my country_list function in the dictionary to obtain all of the countries. I then iterate through each country and pass each country into the function sp_b_c. I have created an array sp_b_c_entire which essentially acts like a Promise.all, because all of the promises received by iterating through countries and passing each country into a call for sp_b_c results in a returned promise.
However, when making this call getData("accesses", "sp_b_c_all")],
I receive the following error:
script.js:38 Uncaught TypeError: country_li.then is not a function
at Object.accesses.sp_b_c_all (script.js:38)
at getData (script.js:68)
at initialization (script.js:194)
at script.js:365
Below is the code this is referring to:
var getData = function(set, target, q, ...manyMore) {
var pack = [];
// ~ USE rest parameters instead, grab array from ...
// set accesses
var api_token = "9d34bf3f79ae6a8b88c4f1f54ffc3e64e5f4cdcc2cc47bd1cf429e7e247d94b2";
var accesses = new Object();
var alternative = new Object();
// ~ do a promise all, might be overload for API, so limitations
if (set == "accesses") {
accesses.sp_b_c = function(q) {
return d3.json("https://apiv3.iucnredlist.org/api/v3/country/getspecies/"+ q +
"?token=9d34bf3f79ae6a8b88c4f1f54ffc3e64e5f4cdcc2cc47bd1cf429e7e247d94b2")
.then(function(d) { return d; });
}
accesses.sp_b_c_all = function() {
sp_b_c_entire = [];
console.log(accesses.sp_b_c("AE"))
var country_li = accesses.country_list;
country_li.then(function(countries) {
console.log(countries);
countries.forEach(function(country) {
sp_b_c_entire.push(accesses.sp_b_c(country));
})
})
return sp_b_c_entire;
}
accesses.country_list = function() {
return d3.json("https://apiv3.iucnredlist.org/api/v3/country/list?token="+api_token)
.then(function(d) { return d; });
}
accesses.comp_group_list = function() {
return d3.json("https://apiv3.iucnredlist.org/api/v3/comp-group/list?token="+api_token)
.then(function(d) { return d; });
}
accesses.comp_group_specific = function() {
return d3.json("https://apiv3.iucnredlist.org/api/v3/comp-group/getspecies/"+ key +"?token="+api_token)
.then(function(d) { return d; });
}
accesses.threats_regional = function() {
return d3.json("http://apiv3.iucnredlist.org/api/v3/threats/species/name/Ursus%20maritimus/region/europe?token="+api_token)
.then(function(d) { return d; });
}
accesses.threats_global = function() {
return d3.json("http://apiv3.iucnredlist.org/api/v3/threats/species/name/Loxodonta%20africana?token="+api_token)
.then(function(d) { return d; });
}
return accesses[target]();
}
// alternative threat dataset
else if (set == "csv") {
var data = d3.csv(target + ".csv");
var transformation = data.then(
function(d) {
var container = d.map(function(d) {
return {s_n: d.ScientificName,
c_n: d.CommonName,
state: d.States,
group: d.group};
});
pack.push(container);
} // end of anon/callback function
); // end of then function
return data;
} // end of else if conditional
};
I had thought if I made the call accesses.country_list from within accesses.sp_b_c_all that I would receive the promise for the country list. I then utilize then() to access the promise value. Inside of then(countries), countries is the dataset (the list of countries. This is where I utilize a forEach loop to iterate through each country in countries, and then I pass each country into the api call for accesses.sp_b_cwith the country parameter. From this, I hope to receive a promise, and then store it in the array.
What am I doing wrong and how might I fix this? How should I alter my though process, perhaps?

If country_li is a function that returns a promise, you need to call it first to get that promise:
country_li().then(function(countries) {...})

AngularJS Return object of methods after IndexedDB call

I need to return an object of methods after making a call to the IndexedDB library like so.
.factory('presentationData', ['$indexedDB', 'uuid4','$q', function ($indexedDB, uuid4, $q) {
var objectStore = $indexedDB.openStore('presentations', function(store) {
return store;
});
return objectStore.then(function(objectStore) {
var functions = getDefaultDataServiceFunctions(objectStore);
functions.getAll = function (includeFlaggedForDelete) {
if (includeFlaggedForDelete) {
return objectStore.getAll();
}
return objectStore.getAll().then(function (presentations) {
return presentations.filter(function (p) {
return !(p.meta && p.meta.localStatus === 'deleted');
});
});
};
functions.getWithLocalStatus = function (status) {
var query = $indexedDB.queryBuilder().$index('localStatus').$eq(status).compile();
return objectStore.each(query);
};
return functions;
})
}])
Why does this not return an object of methods? I don't understand!!
Using this: https://github.com/bramski/angular-indexedDB
Thanks!

This is not going to work as returning the store object is ineffective. The store will be closed and operations on it will fail.
It's really unclear to me what you are actually trying to do. Just get the data? You need to return a promise which will return the data.
.service('dataFetcher', ['$indexedDB', 'uuid4','$q', function ($indexedDB, uuid4, $q) {
this.getData = function() {
promise = $q.defer();
$indexedDB.openStore('presentations', function (store) {
... do what is needed to get the answer here...
promise.resolve(data);
}
return promise.promise;
}
}
Using this service then goes something like...
.controller('MyControl', ['dataFetcher', function ($scope, dataFetcher) {
dataFetcher.getData().then( function (data) {
$scope.data = data;
});
}];
That will give you what you in fact seek. indexed-DB works on a callback mechanism. You need to use that to design your data service in a sensible way.

How to get instance of the "class" from JSON string?

Given that I have a class defined such as
(function () {
function Dummy(){
var toReturn ={
myProp : "asdf",
myFunc : myFunc
}
return toReturn;
function myFunc(){};
}
})();
how does one get an instance of the same type after
var dummy = new Dummy();
JSON.stringify(dummy);
so that I have myFunc still available on the type.
JSON.parse(JSON.stringify(dummy)) returns same shape of the object by not the same type.
NOTE: I am not asking about capability of JSON, but how do people deal with this in general. Do you hand roll your mapping mechanism so that after parsing from JSON you map it onto instance of the type, or if there is such functionality in some library, such as underscore.
I created a helper function that helps me do this, but would like to hear from others how do you deal with situation like this. As I put in comments, JSON comes over the wire, for which we have a type defined. To get the values from JSON in our type, we parse json, create instance of type and then apply map function below.
function map(fromObj, toObj) {
Object.keys(fromObj)
.forEach(function (key) {
if (typeof fromObj[key] != 'function') {
if (toObj.hasOwnProperty(key)) {
if (typeof fromObj[key] !== 'object') {
toObj[key] = fromObj[key];
} else {
map(fromObj[key], toObj[key]);
}
}
}
}
});
}

Note, Not certain about requirement , if this similar to what posed at Question. If off-topic , please post comment , will withdraw.
Piece was originally composed for this Question Organizing large javascript files [on hold] . With a json response , having "x" type of contents , could map returned object to new object , copying properties utilizing $.extend() .
Result would be new object having both properties and functions of returned data. At piece below, at completion of process , $.Pages begins as function , then type gets converted to object - though it could retain both function and object properties by including || {} at definition stage.
Functions within returned json objects could be called within .then() callback ; see console at jsfiddle , object init functions.
At conclusion , $.Pages object has properties of returned json , including access to functions . Based on a jsonp - type processing flow.
Piece is "frame" of a processing approach ; could extend to include other functionality
$(function() {
var dfd = new $.Deferred();
dfd.progress(function(msg) {
console.log(msg);
});
ProductPage = {
name : "ProductPage",
addToCartBtn: "#add-to-cart",
initName : function() {return dfd.notify(this.name)},
init: function() {
this.initName();
// ProductPage.initAddToCartPopup();
// ProductPage.initSidebar();
}
};
ContactPage = {
name : "ContactPage",
validateEmail : function (e) {return dfd.notify(e)},
initName : function() {return dfd.notify(this.name)},
init: function() {
this.initName();
// ProductPage.initAddToCartPopup();
// ProductPage.initSidebar();
}
};
var mods = function() {
return {"ContactPage" : ContactPage
, "ProductPage" : ProductPage };
};
$.Pages = function() {
$.when(mods())
.done(function(pages) {
$.Pages = pages;
});
return $.Pages
};
$.when($.Pages())
.then(function() {
$.each($.Pages, function(k, v) {
v.init();
})
});
console.log($.Pages)
});
jsfiddle http://jsfiddle.net/guest271314/60kv2439/1/ (see console)
basic approach
$p = {};
var queue = [];
var mods = ["dep1.json", "service1.json"];
var mod = function(m) {
queue.push(m);
if (queue.length === mods.length) {
$.each(queue, function(k, v) {
$p = $.extend(v, $p)
})
}
};
$.each(mods, function(k, v) {
$.getScript(v, function(script, status, jqxhr) {
console.log($p)
})
})

Javascript smooth method chaining

I have a webservice which can take certain parameters, like such, ?top=5&orderby=column --- etc...
I want to be able to execute my object like such:
var call = new API();
call.get().top(5).skip(15).orderby("address");
The challenge is to only have the last orderby trigger the execute() method. Here is my code. Please let me know if you have any better ideas! It's currently delaying by 25ms when each function ends, and stops the timer when the next function starts. Is this proper/acceptable?
var API = function (webservice) {
this.webservice(webservice);
return this;
};
API.prototype = {
version: function (urlFormat) {
if (urlFormat) {
return "v" + urlFormat.split('.').join('_');
}
return sessionStorage.getItem("version");
},
path: function () {
return "../WebAPI/";
},
execute: function () {
var path = this.path() + this.webservice() + ".svc/";
if (this.__parameters) {
path += "?";
}
var first = true;
for (var k in this.__parameters) {
if (k !== "type")
path += ((first) ? (function(){first = false; return ""})() : "&") + "$" + k + "=" + this.__parameters[k];
};
console.log(this.__parameters.type + ": " + path);
return this;
},
put: function () {
this.doIt("type","put");
return this;
},
post: function () {
this.doIt("type","post");
return this;
},
get: function() {
this.doIt("type","get");
return this;
},
delete: function() {
this.doIt("type","delete");
return this;
},
toString: function () {
return "API";
},
webservice: function(webservice) {
if (webservice) {
this.__webservice = webservice;
}
else {
return this.__webservice;
}
},
top: function (p) {
this.doIt("top",p);
return this;
},
view: function (p) {
this.doIt("view",p);
return this;
},
orderby: function (p) {
this.doIt("orderby",p);
return this;
},
criteria: function (p) {
this.doIt("criteria",p);
return this;
},
skip: function (p) {
this.doIt("skip",p);
return this;
},
filter: function (p) {
this.doIt("filter",p);
return this;
},
doIt: function (method, parameter) {
this.__timerStop();
this.__parameters[method] = parameter;
this.__timerStart();
},
__timerStop: function () {
if (this.__timer) {
clearTimeout(this.__timer);
}
},
__timerStart: function (append) {
var self = this;
if (this.__timer) {
this.__timerStop();
}
this.__timer = setTimeout(function() {
console.log("executing.");
console.log(JSON.stringify(self.__parameters));
self.execute();
}, 25);
},
__parameters: {}
};

Update: You know what? I'm going to soften my stance on this one (original answer below). You should actually be OK given that the callback you're passing to setTimeout can never fire before your method chain is "complete" given JavaScript's single-threaded event loop. (And in fact, this also implies you should be safe passing 0 to setTimeout instead of 25.)
I still think you're nuts for thinking up this design (and if this is code that multiple developers will be touching, I'd say you're better off with a simpler design just to lessen the risk of team confusion from undue complexity); but if you insist on taking this path, you actually shouldn't run into any weird Heisenbugs.
But yeah, I stand by my original advice about requiring the execute call explicitly.
Oh man. You are crazy to even be considering this! I mean, part of me does love you for it (I am a big fan of horrifying hacks); but the fact is that taking this approach, while it might end up working, will drive you nuts if/when it goes haywire.
The main reason I would strongly discourage it is that the alternative is very easy and, more importantly, actually reliable: just establish the rule that execute is the method that actually sends the request, and so any chained method call must end with that:
call.get().top(5).skip(15).orderby("address").execute();
If you're seriously in love with this timer-based idea, something tells me you've never really suffered from a Heisenbug before (or, as I originally guessed, you're just out of your mind).

Interesting idea. Although, why not do something like this instead:
call({ type: "get", top: 5, skip: 15, orderby: "address" });
Then process each argument by looping through the object inside your call implementation, then make the service request.
for(var arg in args) {
if(args.hasOwnProperty(arg) && args.propertyIsEnumerable(arg)) {
// process argument
}
}
This keeps things simple.