Develop Reference

React Native: cannot use function as default state hook? issue with array computation and slow UI

I have a function that takes a few discounts and groups them by days, so the final result is an array of 7 representing each day with a few discounts or none in each index, for some reason this computation makes the UI don't feel very snappy, only fully completing when I press the UI and showing an uncompleted result UI before that...
I tried placing a function which gives me the resulting array to the default state of my state hook but I gwt the following error:
getVenueDiscounts is not a function
Before this I was using useEffect with empty array to get my array but as I said it didn't feel very snappy...
Here is my method, maybe the problem is I have not optimized my business logic, is it possible to do this calculations better , maybe with a lodash method?
My method for grouping discounts by week days:
const [ weekDiscounts, setWeekDiscounts ] = useState(getVenueDiscounts());
const getVenueDiscounts = () =>
{
if(discounts.length == 0)
{
var weekDiscountsCopy = [ [], [], [], [], [], [], [] ];
//let weekDiscountsCopy = [...weekDiscounts];
//let response = await venueStore.getVenueDiscounts({ id:1 });
console.log(response.data);
let allDiscounts = _.cloneDeep(venueStore.myDiscounts);
//let allDiscounts = response.data.discounts;
//Alert.alert(response.data.discounts.length+' discounts');
//setDiscounts(discounts);
console.log(response.data.discounts[0].days);
for(var i=0; i<response.data.discounts.length;i++)
{
let discountDays = allDiscounts[i].days;
for(var x=0; x<discountDays.length;x++)
{
if(discountDays[x].id == 1)
{
weekDiscountsCopy[0].push(allDiscounts[i]);
}
else if(discountDays[x].id == 2)
{
weekDiscountsCopy[1].push(allDiscounts[i]);
}
else if(discountDays[x].id == 3)
{
weekDiscountsCopy[2].push(allDiscounts[i]);
}
else if(discountDays[x].id == 4)
{
weekDiscountsCopy[3].push(allDiscounts[i]);
}
else if(discountDays[x].id == 5)
{
weekDiscountsCopy[4].push(allDiscounts[i]);
}
else if(discountDays[x].id == 6)
{
weekDiscountsCopy[5].push(allDiscounts[i]);
}
else if(discountDays[x].id == 7)
{
weekDiscountsCopy[6].push(allDiscounts[i]);
}
}
//setWeekDiscounts(weekDiscountsCopy);
setDiscounts(allDiscounts);
return weekDiscountsCopy;
}
}
};
Thanks in advance!

This is an issue of how and when your code gets interpreted.
Because getVenueDiscounts is a lambda assigned to a const, it gets hoisted to the top of the scope, but remains undefined until that code is actually executed on the second pass -- and the state hook is being initialized with that call before the function has been defined. One solution would be to just move getVenueDiscounts above the hook.
A more detailed description can be found here:
These variable declarations only become initialized when they are evaluated during runtime. The time between these variables being declared and being evaluated is referred to as the temporal dead zone. If you try to access these variables within this dead zone, you will get the reference error above.

Reason of error
Well, you missed on a fundamental concept of programming, that one should not access a variable, function, etc. before initialisation.
MCVE
A minimal, reproducible example of your error would be to try accessing bar before it's initialisation.
const foo = () => {
bar();
^^^^^ // Uncaught ReferenceError: Cannot access 'bar' before initialization
const bar = () => console.log('I worked!');
};
foo();
Solution
There can be two solutions for your problem:
Declare getVenueDiscounts() function before useState() hook.
const getVenueDiscounts = () => {
// logic goes here
}
const [ weekDiscounts, setWeekDiscounts ] = useState(getVenueDiscounts());
Better approach would be to use useMemo() hook which would return a cached value unless the dependencies in the array do not change.
const weekDiscounts = useMemo(() => {
// getVenueDiscounts() logic goes here
},[]); // list of dependencies on which weekDiscounts depends on

How to access array outside of a function in javascript

I'm just wondering how to figure this strange security/scope question out:
function vector() {
var array = [];
return {
append: function append(v) {
array.push(v);
},
get: function get(i) {
return array[i];
},
store: function store(i,v) {
array[i] = v;
}
};
}
This is the question asked:
Can you spot any security concerns with this approach? Mainly, can we get access to the array outside of vector? Note*: the issue has nothing to do with prototypes and we can assume that global prototypes cannot be altered. Hint*: Think about using this in a method invocation. Can we override a method of vector?
Example
var v = vector();
v.append(1);
v.append(2);
var internalData = exploitVector(v); // [1, 2]
My attempts + thoughts
Pretty sure I'm supposed to use the this keyword somehow as the hint says.
I'm a beginner at javascript so I don't fully understand the context that well. This code is written in a file with other functions on the text editor Atom, not a browser.
function exploitVector(v) {
v.get = function() {
return this.array;
};
console.log(v.get());
return v.get();
}
Also, this is just a fun exercise I saw on a github repo.

Vector.store() can be abused to modify the array methods (e.g. array.push), followed by a v.append() to trigger the modified array.push method. The modified push method can for example either do something like window.visiblearray=this after which, visiblearray can be accessed globally.
Or as in the example below, store this (Array instance) to visiblearray of local scope, and then return it.
function vector() {
var array = [];
return {
append: function append(v) {
array.push(v);
},
get: function get(i) {
return array[i];
},
store: function store(i,v) {
array[i] = v;
}
};
}
var v = vector();
v.append(1);
v.append(2);
var internalData = exploitVector(v); // [1, 2]
function exploitVector(v) {
var visible_array;
v.store('push', function(x){visible_array=this}) // modify array push
v.append(12) // trigger the modified array push
console.log(visible_array);
return visible_array
}

Why does console.log returns correctly but my function returns undefined?

I dont get why this function's console.log returns the value, and the typeof correctly, but its return value is invalid to use in another function
I'm attempting to use bubble event to collect the value of the clicked button.
<DIV class = "keys">
<button class = "key" id = "rock" value = "rock">Rock</button>
<button class = "key" id = "paper" value = "paper">Paper</button>
<button class = "key" id = "scissors" value = "scissors">Scissors</button>
</DIV>
Here is the JS:
const bubbleBar = document.querySelector(".keys");
bubbleBar.addEventListener("click", playerPlay);
bubbleBar.addEventListener("click", display);
function playerPlay(e){
let playerChoice = ""
console.log(e.target.value); //debugs correctly
playerChoice = e.target.value;
console.log(playerChoice, typeof playerChoice); //debugs correctly
return playerChoice; // apparently returns nothing
}
function display(){
console.log(playerPlay) // displays function playerPlay(e), not the result of the first function.
}

As stated in comments, returning a value from an event handler doesn't do anything with that value. The value is used to determine further event processing.
If you want the value you will have to store it somewhere from within the handler.
This code saves the value in a global variable chosenValue and also sets the value as the text within a <span> — what you actually do to store the value will depend on how you plan to make use of the value later.
let chosenValue;
const bubbleBar = document.querySelector(".keys");
bubbleBar.addEventListener("click", playerPlay);
bubbleBar.addEventListener("click", display);
function playerPlay(e) {
e.preventDefault();
let playerChoice = ""
console.log(e.target.value); //debugs correctly
playerChoice = e.target.value;
console.log(playerChoice, typeof playerChoice); //debugs correctly
document.getElementById('playerChoice').innerText = playerChoice;
chosenValue = playerChoice;
console.log(`chosenValue variable value is now ${chosenValue}`);
}
function display(e) {
e.preventDefault();
console.log(e.target.value);
}
<div class="keys">
<button class="key" id="rock" value="rock">Rock</button>
<button class="key" id="paper" value="paper">Paper</button>
<button class="key" id="scissors" value="scissors">Scissors</button>
</div>
<div>
Player's Choice: <span id="playerChoice">none</span>
</div>

A note on scope and return statements
Nested scopes can often be confusing, and where things return to isn't always clear. Here's some examples fo reference:
function simple(){ return 'foo' }
Returns "foo" when simple is called like simple()
(or simple("args", "aren't", "used", "but still are passed") or simple.call())
function nested(){
return function inner(){
return 'foo'
}
}
nested, when called, returns a function, but that function does not run immediately. so to get "foo" you would need to call it like this:
let outerResult = nested() // creates and returns a function
outerResult() // returns "foo"
//or more concisely
nested()() // calls both functions in order.
Here we see that return is always going to return to the function it is "closest" too, the inner-most function. return can't skip out of the function it is in.
function loop(){
let values = [1,2,3]
for (let value of values){
return value
}
}
Returns 1, and the loop does not run another time. So in this case the block does not change the scope of return.
function callbackLoop(){
let values = [1,2,3]
values.forEach(value => { return value })
}
This code has a bug. You might expect that this code would work the same as the regular loop, but it doesn't, and in fact, it can't. There is no way for the return in the function value => { return value } to cause the callbackLoop function to return. It can only return itself, same as the nested example. Sometimes functions that take callbacks will pass along the callback return value, but they don't have to if they don't want to. Since forEach is designed for side effects (functions that don't have return values) it doesn't do this, and neither does addEventListener, because it also is designed for side effects.
An example of a function that takes a "pure function" callback, instead of side effects, is Array.prototype.map:
const result = [1, 4, 9, 16].map(x => {return x * 2});
// `map` returns: [2, 8, 18, 32]
// (it gets the return value of the callback function for
// each item in the array, and uses that)
A "pure function" is a function that operates on only the inputs (x) in this case, and makes no changes to any variables. Multiplication "creates" a new value, and that is what is returned. The original x is not "mutated" (it is left unchanged). In order for pure functions to be useful, they need to return a value, and that value needs to be used in some way.

How to access variables from a function inside executed inside another function?

I am refactoring my https://github.com/perdugames/cacau test library, which I did to learn a bit more about JavaScript and testing. The problem is that I'm not liking how FIXTURE are currently working on it, so I decided to refactor, and I wanted to get the result below, but I still do not know how to make the "addTest" functions have access to "x".
const runner = new Runner();
runner.addSuite(() => {
console.log('Suite 1');
runner.addFixture(() => {
console.log('Suite');
const x = 10;
});
runner.addTest(() => {
console.log('Test 1');
console.log(x);
});
runner.addTest(() => {
console.log('Test 2');
console.log(x);
});
});
runner.run();
Note: Of course without the use of globals, and without adding to the scope of "runner".

Actually, you should be using contexts. Please read more about contexts in javascript. There's plenty of sites.
In your case you can call a context
obj.funcA(() => {
let ctx = this;
console.log('A');
obj.funcA1(() => {
let ctxFncA1 = this // context of previous level... etc.
console.log('A1');
const x = 10;
});
// ... you get the point.
});
In general what you're trying to do is not "ok". If you go build object class, the JavaScript language might allow you to do really anything, but you must not.
Probably you should look into object programmation in JavaScript (book or training website).
Actually you have an example describing pretty much what you desire on : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let (Code is copy/pasted from there.)
var Thing;
{
let privateScope = new WeakMap();
let counter = 0;
Thing = function() {
this.someProperty = 'foo';
privateScope.set(this, {
hidden: ++counter,
});
};
Thing.prototype.showPublic = function() {
return this.someProperty;
};
Thing.prototype.showPrivate = function() {
return privateScope.get(this).hidden;
};
}
console.log(typeof privateScope);
// "undefined"
var thing = new Thing();
console.log(thing);
// Thing {someProperty: "foo"}
thing.showPublic();
// "foo"
thing.showPrivate();
// 1

I do not believe this is physically possible. You would have to pass the the variable to the function in order to access it if you do not want a global variable, or have it accessible in the scope of a class or object.
While this variable should be in your heap, there is no way to communicate its address to the scope of the new function without passing something to it, either a pointer or the value itself.

I found two ways to resolve the issue, the first was:
function test(){
console.log(this.x * 2);
}
function fixture() {
this.x = 5;
}
test.call(new fixture()) // 10
This is the worst way I found, since I will always have to use "this", and I will still have to deal with FIXTURE as a constructor function, otherwise it would be better to use a literal object in this case.
The second way I chose it is simpler, and it already fits in with what I have ready:
const runner = new Runner();
runner.addSuite(() => {
console.log('Suite 1');
var x;
runner.addFixture(() => {
console.log('Suite');
x = 1;
x++;
});
runner.addTest(() => {
console.log('Test 1');
console.log(x); // 2
});
runner.addTest(() => {
console.log('Test 2');
console.log(x); // 2
});
});

How to curry a function that takes an options object as argument rather than several distinct arguments?

I have been looking into partial application and currying over the last few days.
I'm wondering how could I use these concepts with a function that only takes one options object as argument.
const myFunc = options => {
const options.option1 = options.option1 || 'default value';
const options.option2 = options.option2 || 'another default value';
// ... etc, it takes about 5 more options, all of which have a
// default fall-back value if not supplied
return doSometing(options);
}
In that case, I don't feel good changing the myFunc signature and pass every option as a separate argument because it's a pain to remember the order in which the options must be supplied.
I'd like to stick with a functional style and avoid instantiating objects with new ... just to keep state; I have a hunch this can be achieved with partial application. It keeps things simpler when it's time for testing, or to instantiate.
But then, I don't know how to do partial application properly without separate arguments.
How would you handle this refactor?

I would suggest that the equivalent of currying a function taking an option object would be the same as how to handle defaults. Consider this as a partial applier:
myFuncWithMyOptions(myFunc, myOptions) {
return function(options) {
return myFunc(Object.assign({}, myOptions, options));
}
}
If you want the options in myOptions not be be overridden by those in options simply swap the two arguments to Object.assign

Following on Dan D's answer and the comments, this technique would let you partially apply such a function repeatedly until all the required fields are supplied:
const vals = (obj) => Object.keys(obj).map(key => obj[key]);
const addDefaults = (() => {
const req = Symbol();
const addDefaults = (defaults, fn) => (options) => {
const params = Object.assign({}, defaults, options);
return (vals(params).includes(req))
? addDefaults(params, fn)
: fn(params);
};
addDefaults.REQUIRED = req;
return addDefaults;
})();
const order = addDefaults({
color: addDefaults.REQUIRED,
size: addDefaults.REQUIRED,
giftWrap: false,
priority: false
}, (opts) =>
`${opts.size}, ${opts.color}, ${opts.giftWrap ? '' : 'no'} wrap, priority: ${opts.priority}`
);
order({color: 'Red', size: 'Medium'}); // "Medium, Red, no wrap, priority: false"
const orderLarge = order({size: 'Large'}); // Options -> String
orderLarge({color: 'Blue'}); // "Large, Blue, no wrap, priority: false"

I don't think your problem is connected with partial application. What exactly does myFunc do actually?
it sets a couple of optional default values
it invokes another function
This is not much. And yet two problems arise:
the function composition is hard coded and hidden in the body of myFunc
it doesn't get apparent from the function signature which default values are overwritten
Simply put, a "proper" function reveals its functionality by its signature. So let's get rid of the myFunc wrapper:
const options = {
foo: 1,
bar: true,
bat: "",
baz: []
};
// function composition
const comp = (...fs) => x => fs.reduceRight((acc, f) => f(acc), x);
// applicator for partial application with right section
const _$ = (f, y) => x => f(x) (y); // right section
// `Object` assignment
const assign = o => p => Object.assign({}, o, p);
// specific function of your domain
const doSomething = o => (console.log(o), o);
// and run (from right-to-left)
comp(doSomething, _$(assign, {baz: [1, 2, 3], bat: "abc"})) (options);
Now you can exactly see what is going on without having to look into the function bodies. The property order of the options Object doesn't matter either.
A remark on _$. It has this odd name because I prefer a visual name over a textual one in this particular case. Given the function sub = x => y => x - y, _$(sub, 2) simply means x => x - 2. This is called the right section of the partially applied sub function, because the "left" argument is still missing.