Develop Reference

How do we overwrite a function stored in an array in Javascript?

I am writing a language parser in javascript and went with the functional approach of constructing nested functions to increase scalability.
My code currently looks like the following
const parseDate = (query) => {
return query.match(/stuff/)
}
const parseAuthor = (query) => {
return query.match(/stuff/)
}
const parseTags = (query) => {
return query.match(/stuff/)
}
//...
const transform = (match) => {
const target = match?.[0]?.trim()
// some more post processing that modifies "target"
return target;
}
const parsers = [parseAuthor, parseTags, parseReviewer, parseSearch, parseAfter].map(parser => {
return (query) => transform(parser(query))
})
I am trying to creplace function parseDate in the array with another function that will take the output of parseDate and turn it into ISO format.
parsers[4] = (query) => {
return new Date(parsers[4](query)).toISOString();
};
This causes a RangeError: Maximum call stack size exceeded which I assume is coming from the fact that javascript is constructing a recursive function that takes the output of the old parseDate function and runs it again through the new function, and that output to the same function ... and so on.
That is not what I want. I just want to replace the parsers[4] function with a new one.
I tried duplicating the function but had no luck and getting the same error
parsers[4] = (query) => {
return new Date(parsers[4].bind({})(query)).toISOString();
};
How do we exactly do this?

Since you are adding a function to the list (which is not automatically evaluated while being assigned), your reference to object at the 4th index inside parsers will point to the current state of parsers when executing, which makes it a self reference (leading to an infinite recursion loop causing the stack size to explode).
You could simply use parseDate itself if you have a reference to it or store the current object in parsers[4] in a temporary variable before using it:
var temp = parsers[4]
parsers[4] = (query) => {
return new Date(temp(query)).toISOString();
};

The problem with either form of the definition you're trying to provide is that you're defining a function - parsers[4] - that unconditionally calls itself. Try reading it through and pretending you're the Javascript engine - in order to compute parsers[4](query), you're going to need to first compute parsers[4](query) and so on, infinitely. (The use of .bind doesn't fix that all - yes you're making a new reference to the same function object, but in order to execute that function it still needs to reference the same function you're defining.)
As for how to solve it - there are quite a few ways I can think of. Probably the most simple-minded - but perfectly good enough if you're just doing this once - is to make a temporary copy:
const oldParser = parsers[4];
parsers[4] = (query) => {
return new Date(oldParser(query)).toISOString();
};
You could also write this as a "decorator" or function transformation:
const transformFunction = (func) => (query) => {
return new Date(func(query)).toISOString();
};
parsers[4] = transformFunction(parsers[4]);
Note that the above doesn't lead to infinite recursion - or indeed any recursion at all - even though it may look similar to the original. That's because the original was referring to parsers[4] while executing, while this only refers to it once, when defining the new function. It will simply, under the covers, store a reference to the old function (which I've labelled func), much as the first approach did.
One advantage of this is that, if you needed to transform the whole array in the same way, you could then do it as simply as parsers = parsers.map(transformFunction).

why doesn't toFixed() work in my React functional component?

I have a number passed down in props to a functional component, and in it, I'm trying to make it so that it has only 2 decimal places. I wanted to use the toFixed() function for that, but I get the error:
TypeError: props.data.price.toFixed is not a function. I tried to save this number from the props into a local variable and then call toFixed() on it, but the result is the same...
My functional component body:
import React from 'react';
import classes from './Order.module.css';
const order = (props) =>{
let keyTable = [];
for(let igKey in props.data.ingredients){
keyTable.push(igKey, "("+props.data.ingredients[igKey].toString()+")")
}
let ingredientsString = keyTable.join(' ')
return (
<div className={classes.Order}>
<p>Ingrediends: {ingredientsString}</p>
<p>Price: <strong>USD {props.data.price.toFixed(2)}</strong></p>
</div>
);
}
export default order;
The number sent in props: 6.22223
I'd like to just make the number have only 2 decimal places, and rather without using Math.round(). Does anyone know how to do that?
Edit: The problem is fixed when I turned the variable into a number. The error was there because the variable was of type string, and you can't call toFixed() on a string.
Thanks for help everyone! My first question on StackOverflow was resolved in 3 minutes!

You'll get this error if price is not a number. If it looks like a number but isn't, then it is most likely a string.
To convert it to a number, you can use Number(), and then apply toFixed():
var str = '6.22223';
var num = Number(str);
console.log(typeof(num));
console.log(num);
console.log(num.toFixed(2));

Calling a variable from inside another function is bad?

I want to make my JS code to be less repetitive with an organized look. But I don't know if calling a function from inside another function is a bad practice, like Global Variables.
I share a piece of the code here.
thanks.
function getEx() {
return document.getElementById('example')
}
function getExTwo() {
return document.getElementById("exampleTwo");
}
function getTheValue() {
let getExValue = getEx();
let getExTwoValue = getExTwo();
}

Calling a function from within another function is absolutely not bad coding. That's part of what functions are for, really -- breaking up logical processes into smaller pieces.
Here's an example of how this can work.
// Note: This is new ES6/ES7 syntax for writing JavaScript functions.
// I'm using it here because it's very terse.
const add = (a, b) => a + b;
const multiply = (a, b) => a * b;
const square = (a) => multiply(a, a);
const sumOfSquares = (arr) => {
let sum = 0;
arr.forEach(number => sum += square(number));
return sum;
};
In the (simplified) example above, we use different functions to break up the distinct logical pieces of the problem into smaller, more manageable problems. For example, to calculate the sum of the squares of the array [1, 10, 12], we want to be able to add things and we want to be able to square things, so it's a good idea to create functions for performing each of those steps. We might even want to use other functions within those functions (e.g. calling multiply from within square).
Now, is it possible to go overboard with creating new functions? Yes. Try to avoid writing multiple functions that are basically the same. But otherwise... go nuts!

Calling a function from within another function is not bad. It is a recommended way of reducing repetition by breaking your code into smaller pieces, each handling some specific logic.
Here is a simplified version of your code:
// ps: $ is not from jquery it is just a normal variable.
const $ = document.querySelector
const getValues = () => {
const firstVal = $('#example')
const secondVal = $('#exampleTwo')
}

Force specific input with JSVerify

I'm starting to use JSVerify for property based testing.
Given a function (just an example) that accepts a string as parameter, I use JSVerify to pass in a large number of arbitrary strings and see if the function behaves as intended for all of them. It turns out that there are some strings that make the test fail: so far I've found that if the string contains \0000, \0001 or \n, the test fails.
I want to correct my code so that this cases are handled accordingly, but in order to prevent regression, I want to make sure that each one of this cases is included in every test run. I also want to avoid hardcoding the number generator's seed (rngState) since that would prevent the discovery of additional corner cases in the future.
To clarify: suppose that I'm testing my function foo():
jsc.assert(jsc.forall("string", (str) => {
const result = foo(str)
return (/* some expression that evaluates whether the result is correct */)
}))
This test is feeding 100 random strings into foo() every time a run the test suite. Initially it's passing. After some runs it suddenly fails because, precisely this time, the random string generator has generated a string containing the character \0000, which my function doesn't handle as expected. From now on, I would like that my test uses this string as input every time, plus the usual 100 random inputs.
Is there a built-in way to do this using JSVerify? Or should I just treat these inputs as separate test cases?

This is how i'm addressing the problem you mentioned. Instead of testing specific values, my code can specify as many "bad" seeds as needed, in addition to running a random one with each test invocation.
Notes:
1) I am using Mocha
2) I am using async code, so I return a promise
3) the JSON.stringify allows me to easily see the seed given the above
You can still use this method without 1,2,3 above with some refactoring:
const _ = require('lodash');
var jsc = require('jsverify');
// mocha's describe
describe("StackOverflow", function () {
it('example1', function(done) {
let t = jsc.forall('array nat', function (in1) {
let asComplex = foo(in1);
let backAgain = bar(asComplex);
return new Promise(function(resolve, reject) {
setTimeout(() => {
resolve(_.isEqual(backAgain,in1));
},500); // setTimeout
}); // promise
}); // forall
let props = {size:0xffffffff, tests: 1000};
jsc.check(t, props).then( r => r === true ? done() : done(new Error(JSON.stringify(r))));
props.tests = 3;
jsc.check(t, props).then( r => r === true ? done() : done(new Error(JSON.stringify(r))));
props.rngState = "8e1da6702e395bc84f";
jsc.check(t, props).then( r => r === true ? done() : done(new Error(JSON.stringify(r))));
// add more seeds here
}); // it
}); // describe

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.