Nested javascript arrays: access across module boundaries - javascript

I'd be grateful if someone could provide a working example of a nested array populated and accessible across ES6 module boundaries, that is to say with setter and (especially) getter methods called from a dependent module.
No matter which design pattern I base my attempts on, setter methods work fine but getter methods invoked across module boundaries invariably provoke the following:
TypeError: nested_array[at_whatever_depth] is undefined
I am not convinced of polluting potentially simple principles with complex examples, but here is roughly what I'm trying to do.. I'd be mega content with something simpler that actually works..
Previously, the array was populated in the same scope as the code which used it. What follows was an attempt at 'modularising' it. The code simply readies an imported music font ('glyphs') for display.
This particular example goes back to more or less where I started: a state module approach. (Others tried? The slightly more advanced basket and revealing module, and a lot of variations thereon..).
var music_glyphs_store = (function () {
var pub = {};
pub.state = [],
pub.setGlyphByName = function (glyph_name, horiz_adv_x, path) {
pub.state.push(glyph_name);
pub.state[glyph_name] = [];
pub.state[glyph_name]["glyph_name"] = glyph_name;
pub.state[glyph_name]["horiz-adv-x"] = horiz_adv_x;
pub.state[glyph_name]["d"] = path;
},
pub.getGlyphByName = function(glyph_name) {
return pub.state[glyph_name];
}
return pub; // expose externally
})();
export { music_glyphs_store };
The problematic call is to music_glyphs_store.getGlyphByName() and its variants. I know that the glyphs I'm trying to retrieve are stored in the array: the dependent module simply can't access them..
Here's what a typical font element might look like in the original, raw, svg file.
<glyph glyph-name="scripts.sforzato" unicode="" horiz-adv-x="219"
d="M-206.864 126.238c-8.498 -2.679 -12.964 -10.131 -12.964 -17.821c0 -6.455 3.146 -13.0777 9.696 -17.1846c1.8 -1.1369 -9.04799 1.8 139.074 -37.9895l103.026 -27.7105l71.6682 -19.279c12.269 -3.31579 22.358 -6.11053 22.358 -6.25263
c0 -0.142105 -10.089 -2.93684 -22.358 -6.25264l-71.6682 -19.2789l-103.026 -27.7105c-154.231 -41.4474 -137.132 -36.7106 -140.4 -38.8895c-5.625 -3.7263 -8.44299 -9.80721 -8.44299 -15.8892c0 -6.056 2.795 -12.113 8.396 -15.848
c3.147 -2.07201 6.077 -3.08401 9.87399 -3.08401c3.061 0 6.685 0.658005 11.442 1.94801l161.053 43.2942c228.488 61.4133 240.486 64.527 240.486 65.2851c0 0.0888996 -0.164993 0.1455 -0.164993 0.26c0 0.0702 0.0619965 0.1623 0.263 0.297099
c5.63699 3.7421 8.45499 9.80522 8.45499 15.8684c0 6.06316 -2.81799 12.1263 -8.45499 15.8684c-3.17401 2.0842 2.27299 0.521 -46.137 13.5474l-194.447 52.2947l-161.053 43.2947c-4.795 1.316 -8.506 1.94601 -11.581 1.94601
c-1.907 0 -3.57001 -0.243004 -5.093 -0.714005z" />
Here's how the calls are set up:
import { music_glyphs_store } from "./music_glyphs_store.js";
import * as d3 from "d3";
Then (having, at some point, loaded and parsed the raw xml strings from file):
d3.selectAll(note_glyphs.getElementsByTagName("glyph")).each(function(d, i) {
var glyph_name = this.getAttribute("glyph-name");
var horiz_adv_x = this.getAttribute("horiz-adv-x");
var path = this.getAttribute("d");
music_glyphs_store.setGlyphByName(glyph_name, horiz_adv_x, path);
});
Whatever the purpose, the idea is that stored values can later be recovered using calls to the above methods. For example:
console.log("index.js: Recovering " + music_glyphs_store.getGlyphByName("brace446"));
console.log("index.js: Recovering " + music_glyphs_store.getGlyphByName("accidentals.natural.arrowdown"));
console.log("index.js: Recovering " + music_glyphs_store.getGlyphByName("noteheads.s2slash"));
In deference to the ES6 module conventions, I later tried eliminating the duplicate ('superflous') state module wrapper (goal: better selective exposure of inner variables and functions) - but to no avail. Declaring the array root variable at window (global) scope also brings no improvement.
The motivation for all this is a migration of existing code -with conventional html inclusions- to Webpack with it's module export/import approach, thereby also leveraging node.js's strengths. While breaking a lot of previously working code, I'm optimistic about the long-term benefits..
The problem would seem to lie with the visibility/scope of dynamically allocated memory. I begin to wonder if nested arrays can be used in a diverse Webpack context at all. Am I perhaps barking up a dead tree?

I think you are confusing array and objects. Arrays are sequential lists, where the index of each cell is an integer. Your code is pushing glyph_name and unicode onto the state array, which places it in next element in the array, but then you are referencing the array using glyph_name and unicode as the index. I think you want to be using objects instead of arrays. Change the lines:
pub.state = [];
pub.state[glyph_name] = [];
pub.state[unicode] = [];
to
pub.state = {};
pub.state[glyph_name] = {};
pub.state[unicode] = {};

Though incorrect, I'm leaving this answer in place to illustrate what (as pointed out by #Bergi in the comments) qualifies as "array abuse".
The consistently unsettling thing here was that the original code worked fine. It only broke on integration to Webpack. That suggested that structurally, things may be more or less ok, but that in the earlier implementation, there were likely related problems.
With a little experiment, I found I could successfully retrieve array values across module boundaries by enclosing glyph_name in rounded brackets. For example:
pub.getGlyphByName = function(glyph_name) {
return pub.state[(glyph_name)];
},
BUT 1) I don't entirely understand what is happening, and 2) it looks fragile..
The actual (external, dependent module) call would remain as in the original question.
--> Immediate problem solved, but only by abusing the arrays..

Related

Remove JS object reference

Currently I'm solving https://www.hackerrank.com/challenges/the-trigram in JS. When I run the solution against the test case input - it "passes". But when submitting it - it gets Runtime error.
The main idea is I have a class (Trigram), where using the input.split(" ").forEach( ... ) (after normalising the input and stuff) I load all the possible trigrams, compare to a candid and if it occurs more times - save to a var outside the forEach.
In the loop, the objects are initialised within let scope (I'm not sure in the terminology).
After googling around, I've found out that the objects are being referenced for ever (despite let), so garbage collector does not get rid of them. That is why I get Runtime error.
How can I get rid of the unnecessary references?
// not the exact code
function processData(input) {
var candid = new Trigram();
input.split(" ").forEach(function(element, index, array) {
let obj = new Trigram(array[index], array[index+1], array[index+2]); // I guess, by using array[n] I'm using some kind of ultimate referencing
if (magic) {
candid = obj; // with the test case's input it runs twice
}
});
}

Use window to execute a formula instead of using eval

My code need to execute a forumla (like Math.pow(1.05, mainObj.smallObj.count)).
My path is :
var path = mainObj.smallObj.count;
as you can see.
If needed, my code can split all variable names from this path and put it in an array to have something like :
var path = ["mainObj", "smallObj", "count"];
Since I don't want to use eval (this will cause memory leaks as it will be called many times every seconds), how can I access it from window?
Tried things like window["path"] or window.path.
If it is always unclear, let me know.
Thanks in advance for any help.
EDIT: forget to tell that some config are written in JSON, so when we take the formula, it's interpreted as "Math.pow(1.05, mainObj.smallObj.count)" so as a string.
I would say there are better solutions then eval, but it depends how the forumla can be structured. It could be precompiled using new Function (this is also some kind of eval) but allowing it to be called multiple times without the need to recompile for each invocation. If it is done right it should perform better then an eval.
You could do something like that:
var formula = {
code : 'Math.pow(1.05, mainObj.smallObj.count)',
params : ['mainObj']
}
var params = formula.params.slice(0);
params.push('return '+formula.code);
var compiledFormula = Function.apply(window, params);
//now the formula can be called multiple times
var result = compiledFormula({
smallObj: {
count: 2
}
});
You can get the path part reconciled by recursively using the bracket notation:
window.mainObj = { smallObj: { count: 2 } };
var path = ["mainObj", "smallObj", "count"];
var parse = function (obj, parts) {
var part = parts.splice(0, 1);
if (part.length === 0) return obj;
obj = obj[part[0]];
return parse(obj, parts);
};
var value = parse(window, path);
alert(value);
Basically, parse just pulls the first element off the array, uses the bracket notation to get that object, then runs it again with the newly shortened array. Once it's done, it just returns whatever the result of the last run is.
That answers the bulk of your question regarding paths. If you're trying to interpret the rest of the string, #t.niese's answer is as good as any other. The real problem is that you're trusting code from an external source to run in the context of your app, which can be a security risk.

Javascript - Array of prototype functions

I'm a javascript newbie so I'm writing ugly code so far sometimes due to my lack of experience and how different it is to the languages I'm used to, so the code I'll post below works, but I'm wondering if I'm doing it the right way or perhaps it works but it's a horrible practice or there is a better way.
Basically, I have a little dude that moves within a grid, he receives from the server an action, he can move in 8 directions (int): 0:up, 1: up-right, 2: right... 7: up-left.
the server will send him this 0 <= action <= 7 value, and he has to take the correct action... now, instead of using a switch-case structure. I created a function goUp(), goLeft(), etc, and loaded them in an array, so I have a method like this:
var getActionFunction = actions[action];
actionFunction();
However, what to set all this up is this:
1) create a constructor function:
function LittleDude(container) {
this.element = container; //I will move a div around, i just save it in field here.
}
LittleDude.prototype.goUp() {
//do go up
this.element.animate(etc...);
}
LittleDude.prototype.actions = [LittleDude.prototype.goUp, LittleDude.prototype.goUpLeft, ...];
//In this array I can't use "this.goUp", because this points to the window object, as expected
LittleDude.prototype.doAction = function(action) {
var actionFunction = this.actions[action];
actionFunction(); //LOOK AT THIS LINE
}
Now if you pay attention, the last line won't work.. because: when i use the index to access the array, it returns a LittleDude.prototype.goUp for instance... so the "this" keyword is undefined..
goUp has a statement "this.element"... but "this" is not defined, so I have to write it like this:
actionFunction.call(this);
so my doAction will look like this:
LittleDude.prototype.doAction = function(action) {
var actionFunction = this.actions[action];
actionFunction.call(this); //NOW IT WORKS
}
I need to know if this is hackish or if I'm violating some sort of "DO NOT DO THIS" rule. or perhaps it can be written in a better way. Since it seems to me kind of weird to add it to the prototype but then treating it like a function that stands on its own.
What you are trying to do is one of the possible ways, but it is possible to make it more simple. Since object property names are not necessary strings, you can use action index directly on prototype. You even don't need doAction function.
LittleDude = function LittleDude(container) {
this.container = container;
}
LittleDude.prototype[0] = LittleDude.prototype.goUp = function goUp() {
console.log('goUp', this.container);
}
LittleDude.prototype[1] = LittleDude.prototype.goUpRight = function goUpRight() {
console.log('goUpRight', this.container);
}
var littleDude = new LittleDude(123),
action = 1;
littleDude[action](); // --> goUpRight 123
littleDude.goUp(); // --> goUp 123
actionFunction.call(this); //NOW IT WORKS
I need to know if this is hackish or if I'm violating some sort of "DO NOT DO THIS" rule. or perhaps it can be written in a better way.
No, using .call() is perfectly fine for binding the this keyword - that's what it's made for.
Since it seems to me kind of weird to add it to the prototype but then treating it like a function that stands on its own.
You don't have to define them on the prototype if you don't use them directly :-) Yet, if you do you might not store the functions themselves in the array, but the method names and then call them with bracket notation:
// or make that a local variable somewhere?
LittleDude.prototype.actions = ["goUp", "goUpLeft", …];
LittleDude.prototype.doAction = function(action) {
var methodName = this.actions[action];
this[methodName](); // calls the function in expected context as well
}

How do I dynamically generate code that will transfer an object to another Node process

I'm building a node server that needs to execute code that might be unsafe. In order to achieve this I'm using a Sandbox API that blocks attacks and returns the result and output from a script. It uses a modified global object to keep access hidden from the Node global object (and the use of require... etc).
My specific need right now is to take an object that is defined by a user (this is all trusted, nothing from random users on the internet so security isn't the biggest concern at the moment, right now it's to get it working) and create a dynamic bit of code that will "transfer" the object along with their code to a child Node process for safe execution (the security here is so that any errors don't crash the main process).
My current goal is to take an object, like the following:
obj = {
defaultName: "Unnamed",
hello: function(name) {
if (typeof name === "undefined" || name === null)
name = this.defaultName;
echo("Hello, " + name + "!");
}
}
(This is very simplistic, it's for testing)
I'm using FJSON to serialize the functions for transfer as well. My attempt at serializing this for transfer with the code is as follows:
// "code" is the users code
// "obj" is the object above
// "Extend" is a function defined by the Child process
var str = FJSON.funkify(obj);
code = "var temp = FJSON.unfunkify(\"" + str + "\"); Extend(this, temp); temp = undefined; " + code;
After doing this, and attempting to write it to the child I get weird (and cryptic errors) like: "Unexpected token {" or (rarely and more cryptic) "Unexpected token ILLEGAL '" (which, this is confusing because I've verified that nowhere in the code am I inserting a ' and there are none in the test code).
The funkified string is {"defaultName": "Unnamed","hello":{"FUNCTION":true,"params":["name"],"body":"\n\r if (typeof name === \"undefined\" || name === null)\n\r name = this.defaultName;\n\r echo(\"Hello, \" + name + \"!\");\n\r "}}
And finally, for the sake of testing, I've tried serializing a simple object (without functions using JSON, and with functions using FJSON) and then attempting to run eval on the string in the Node REPL but I keep getting ... when I try eval(JSON.stringify(objWithoutFunctions)); and the same with the FJSON.
I've struggled with this problem for several hours now and can't think of any other things to try/check. Any suggestions are appreciated.
UPDATE
I still have been unable to determine the most efficient way to do this, as stringifying the object and transferring it along with code was not working and I was unable to get it to work nicely I've reverted to converting the object into code, essentially looping through the properties and assigning the variables manually. To provide example:
The object:
obj = {
prop: "ItsValue",
otherProp: true
};
Would become:
this.prop = "ItsValue"; this.otherProp = true;
I found a workaround as listed in the Update, I just converted the object into code. It could have been issues with the FJSON library which I've fixed since then. This is no longer an issue but I still welcome any answers that may be able to address the original problem.

javascript get function body

I have a function e.g.
var test = function () {alert(1);}
How can I get the body of this function?
I assume that the only way is to parse the result of test.toString() method, but is there any other way? If parsing is the only way, what will be the regex to get to body? (help with the regex is extremly needed, because I am not familiar with them)
IF(!!!) you can get the toString(), then you can simply take the substring from the first indexOf("{") to the lastIndexOf("}"). So, something like this "works" (as seen on ideone.com):
var test = function () {alert(1);}
var entire = test.toString(); // this part may fail!
var body = entire.substring(entire.indexOf("{") + 1, entire.lastIndexOf("}"));
print(body); // "alert(1);"
2015 update
Upon revisiting the state of function decompilation, it can said that it's generally safe in certain well-considered use cases and enviroments (e.g: Node.js workers with user defined functions).
It should be put in the same bucket as eval, which is a powerful tool that has its place, but should only be used on rare occasions. Think twice, that's my only advice.
The conclusions from Kangax's new research:
It's still not standard
User-defined functions are generally looking sane
There are oddball engines (especially when it comes to source code
placement, whitespaces, comments, dead code)
There might be future oddball engines (particularly mobile or unusual
devices with conservative memory/power consumption)
Bound functions don't show their original source (but do preserve
identifier... sometimes)
You could run into non-standard extensions (like Mozilla's expression
closures)
ES6 is coming, and functions can now look very different than
they used to
Minifiers/preprocessors are not your friend
"function decompilation" — a process of getting
string representation of a Function object.
Function decompilation is generally
recommended against, as it is a
non-standard part of the language, and
as a result, leads to code being
non-interoperable and potentially
error-prone.
#kangax on comp.lang.javascript
Simplest Use-Case
If you just want to execute the body of the function (e.g. with eval or using the Worker API), you can simply add some code to circumvent all the pitfalls of extracting the body of the function (which, as mentioned by others, is a bad idea in general):
'(' + myFunction + ')()';
I am using this trick in this Worker-related JSFiddle.
Complete Function Serialization With Accurate Stacktrace
I also wrote a more complete library that can:
Serialize any kind of function to string
Be able to send that string representation anywhere else, execute it with any custom arguments, and be able to reproduce the original stacktrace
Check out my CodeBuilder code here.
Note that much of the code takes care of making sure that we get an accurate stacktrace, wherever we execute the serialized function at a later point in time.
This fiddle demonstrates a simplified version of that logic:
Use JSON.stringify to properly serialize the function (that comes in handy when, e.g., we want to make it part of a bigger serialization "data package").
We then wrap it in one eval to un-escape the "JSON-ish"-escaped string (JSON does not allow functions + code, so we must use eval), and then in another eval to get back the object we wanted.
We also use //# sourceMappingURL (or the old version //# sourceMappingURL) to show the right function name in the stacktrace.
You will find that the Stacktrace looks Ok, but it does not give you the correct row and column information relative to the file that we defined the serialized functions in, which is why my Codebuilder makes use of stacktracejs to fix that.
I use the CodeBuilder stuff in my (now slightly dated) RPC library where you can find some examples of how it is used:
serializeInlineFunction example
serializeFunction example
buildFunctionCall example
extending #polygenelubricants' answer:
using: .toString()
Testee:
var y = /* olo{lo} */
/* {alala} */function/* {ff} */ x/*{s}ls{
}ls*/(/*{*{*/)/* {ha-ha-ha} */
/*
it's a function
*/
{
return 'x';
// }
}
/*
*/
By indexOf and lastIndexOf:
function getFunctionBody(fn) {
function removeCommentsFromSource(str) {
return str.replace(/(?:\/\*(?:[\s\S]*?)\*\/)|(?:([\s;])+\/\/(?:.*)$)/gm, '$1');
}
var s = removeCommentsFromSource( fn.toString() );
return s.substring(s.indexOf('{')+1, s.lastIndexOf('}'));
};
getFunctionBody(y);
/*
"
return 'x'
"
*/
used: rm comments from js source
This code provides the body when using ES6 arrow functions like var testFn=(q)=>q+1;
function getFunctionBody(test){
var entire = test.toString(); // note: not safe-guarded; this part may fail like this!
return entire.substring((entire.indexOf("{")+1)||(entire.indexOf("=>")+2), entire.lastIndexOf("}")!==-1?entire.lastIndexOf("}"):entire.length);
}
//testing/showcase code
var tests = [
function () {alert(1);},
()=>{return 1;},
q=>q+1
];
for (var i=0;i<tests.length;i++){
console.log(tests[i],getFunctionBody(tests[i]));
}
I originally submitted this code as an edit to polygenelubricants accepted answer, but it was rejected as the changes were considered to be too drastic.
var fn1 = function() {};
var fn2 = function() { alert("lol!"); };
Function.prototype.empty = function() {
var x = this.toString().match(/\s*function\s*\w*\s*\(.*?\)\s*{\s*}\s*;?\s*/);
return x != null;
};
alert(fn1.empty()); // true
alert(fn2.empty()); // false
'
Solução proposta pelo Paulo Torres no grupo A.P.D.A. no facebook.
you can try this functiion:
function extractFunctionBody(fn) {
var reg = /function \((.*)\)[ ]?{(.*)}$/g;
var match = reg.exec(fn.toString().replace(/\n/g, ";"));
if (match){
return match[2];
} else {
return "";
}
}
Try this:
/\{(\s*?.*?)*?\}/g.exec(test.toString())[0]
test.toString() will hold your entire declaration.
/{(\s*?.?)?}/g will match everything between your braces

Categories

Resources