This question already has answers here:
What do multiple arrow functions mean in JavaScript?
(7 answers)
Closed 6 years ago.
Can anyone explain what the code is doing here
return () => next => action => {
const callAPI = action[CALL_API];
if (typeof callAPI === 'undefined') {
return next(action);
}
let { endpoint } = callAPI;
const { types, bailout } = callAPI;
It is initially returning a function but I don't get why there are two further fat arrows after the first.
If the arrow function has only one parameter, then the parameter around that is optional. You just need to have enough parenthesis to understand them better.
return () => (next) => (action) => {
it returns a function, which when invoked returns another function which accepts one parameter, next. Now when that function is invoked, it returns another function, which accepts another parameter action.
That code can be rewritten like below,
return function() {
return function(next) {
return function(action) {
It seems that the outer function returns a function with parameter next and that returns another one function with parameter action. That code in the link that you given has not minified, but that seems to be obfuscated.
Related
This question already has answers here:
stop settimeout in recursive function
(7 answers)
Javascript delete a function
(3 answers)
Closed 2 years ago.
const resumeInfinity = () => {
window.speechSynthesis.resume();
const timeoutResumeInfinity = setTimeout(resumeInfinity, 1000);
console.log(timeoutResumeInfinity);
}
utterThis.onstart = () => {
resumeInfinity();
};
need the (resumeInfinity) function to stop working after the speechSynthesi
To avoid error messages that resumeInfinity is not a function you shouldn't delete it but set it to an empty function. But as you set defined resumeInfinity as const you can't change that function.
So what you can do is to either change it to:
let resumeInfinity = () => {
// ... your code
}
And then do change it later to an empty function resumeInfinity = () => {}
But you need to keep in mind that if that original function was passed as callback earlier to somewhere else (e.g. like here setTimeout(resumeInfinity, 1000)) that this callback will still refer to the old function.
So a better solution would be to check if the function should still valid to be executed and do an early out otherwise.
const resumeInfinity = () => {
if( /* some check if isn't valid to call that function anymore */ ) {
return
}
window.speechSynthesis.resume();
const timeoutResumeInfinity = setTimeout(resumeInfinity, 1000);
console.log(timeoutResumeInfinity);
}
But all of these above solutions are in fact just a workaround, because if the logic of your application is correct then such a situation should never happen. So the need to do something like this indicates that you more likely need to think about restructuring your code.
If it is just about stopping the timeout then you need to call clearTimeout(timeoutResumeInfinity), and make timeoutResumeInfinity available at the place at which you know that the speechSynthesi finished.
This question already has answers here:
What do multiple arrow functions mean in JavaScript?
(7 answers)
Closed 3 years ago.
I am studying about the React using textbook. There are some codes I cant understand in the book.
const loggerMiddleware = store => next => action => {
}
I know the anonymous function in the javascript.
(a, b, c) => {
}
But, what is this?
store => next => action => {
}
please help me.
It's a higher-order function, i.e. a function that returns a function. It means the same as
store => next => {
return action => { }
}
This question already has answers here:
What's the meaning of "=>" (an arrow formed from equals & greater than) in JavaScript?
(14 answers)
Closed 4 years ago.
What is the use of 'cb => cb(snapshot)' ？
if (this._snapshotCallbacks.length > 0) {
const snapshot = gl.canvas.toDataURL();
this._snapshotCallbacks.forEach(cb => cb(snapshot));
this._snapshotCallbacks = [];
}
requestSnapshot (callback) {
this._snapshotCallbacks.push(callback);
}
this._snapshotCallbacks.forEach(cb => cb(snapshot));
can be rewritten as
this._snapshotCallbacks.forEach(function (callback) {
callback(snapshot)
});
i think it's clear when there is no arrow function?
this._snapshotCallbacks.forEach(cb => cb(snapshot));
means there is a collection of callbacks and the code here invokes them one after each other.
forEach is a function that exists on the array prototype that will take a function as a parameter and invoke this function for each element in the collection. When the function is invoked, the element is passed as the sole argument to the function that forEach took cb => cb(snapshot) is an es6 shorthand function definition.
So in your example, cb is a callback thats then invoked with the snapshot.
Basically, this is the same idea in a forloop
var function1 = (msg) => { alert(msg);}
var function2 = (msg) => { alert(msg.toUpperCase());}
var functions = [function1, function2];
for(var i = 0; i < functions.length; i++){
var fnToApply = functions[i];
fnToApply("hello world");
}
in which an array of functions is invoked in a loop, and each function is designed ahead of time to know what it takes as a param
This question already has answers here:
JavaScript: Passing parameters to a callback function
(16 answers)
Closed 4 years ago.
I tried this but it's immediately invokes addClass after opening website :
function onMouseOver(element, event) {
element.addEventListener("mouseover", () => {
event
})
}
onMouseOver(startAnim, addClass(panelLeft, 'hidden-l'));
onMouseOver(startAnim, addClass(panelRight, 'hidden-r'));
"bind" is what you are looking for and below you can see reference of how to use it.
function innerFn(a, b) {
console.log('Inner fn called with params ',a ,b)
}
function outerFn(c, fn) {
console.log('Outer fn called with params ',c)
fn()
}
outerFn('1', innerFn.bind(null, '2', '3'))
This question already has answers here:
What is 'Currying'?
(23 answers)
Closed 4 years ago.
I recently found JavaScript code like this:
someFunction()()
Function immediately invoked right after function without classic IIFE syntax.
What is that kind of syntax called? And how it works?
Its a function that returns another function.
Here is an example on how it works, this can help you to understand better.
function sum(x){
return function(y){
return x+y;
}
}
sum(3)(5); //8
For you code to work:
someFunction()();
You need to have code that looks like this:
function someFunction() {
console.log('someFunction()');
// do something before return
return function() {
console.log('someFunction()()');
// do something else here
}
}
someFunction()();
In this example you first call someFunction then you call the function that was returned by someFunction.
This can be good to do when you need to pass in a variable that will be used in the inner function but the inner function will be called in the future like this:
function someFunction(outerVal) {
console.log('Outer called.');
return function(innerVal) {
console.log('inner called.');
return outerVal * innerVal;
}
}
var inner = someFunction(12);
setTimeout(()=> {
console.log(inner(4));
}, 1000);
I use this often in Node.js for common middle-ware that needs a single value to be unique.
app.get('/dogs', myFn('woof'));
app.get('/cats', myFn('meow'));
app.get('/birds', myFn('tweet'));
function myFn(word) {
return function(req, res, next) {
res.write(word).end();
}
}
That is an over simplification, but can be vary powerful.