I have a question about the JavaScript arrow function.
After reading the React code, the following expression came out.
const navigateOnce = getStateForAction =>(action, state) =>{
const {type, routeName} = action;
if (state&&type === NavigationActions.NAVIGATE) {
// Disable transition if previous routeName and destination routeName are the same
if (routeName === state.routes [state.routes.length-1] .routeName) return null;
}
return getStateForAction (action, state);
};
I thought the arrow function would beA = (args ...) =>{}
.
This time,A = B =>(args ...) =>{}
, and I'm in trouble when I don't know how to interpret the relationship between A and B. Do you run B after A? Is it regarded as the same function as A = B? ... I'm confused. Can anyone give me advice? . Thank you.
-
Answer # 1
-
Answer # 2
It can be understood by expanding to the form of the anonymous function that is becoming the classic.
const navigateOnce = function (getStateForAction) { return function (action, state) { const {type, routeName} = action; if (state&&type === NavigationActions.NAVIGATE) { // Disable transition if previous routeName and destination routeName are the same if (routeName === state.routes [state.routes.length-1] .routeName) { return null; }} return getStateForAction (action, state); } };
The feature I learned while replacing the anonymous function was like this
Function processing (right side of
=>
):
When return is clear, block syntax andreturn
can be omitted() =>process
{statement}
statement but return void 0() =>
{return statement}
Returns the result of the statement.() =>Same as
statement
2. Can be omitted so you can write shortFunction argument: (left side of
=>
):
function
can be omitted, and if the number of arguments is 1, parentheses can be omitted.()
=>{};no argument(argument)
=>{};When there is one argument.argument
=>{};When there is only one argument, parentheses can be omitted(... args)
=>{} When giving arguments with the spread operator, treat them as multiple.Try writingnoop
() =>{}
// argument = 1. implementation = 1.() =>void 0
// Argument = 1. Implementation = 3. -
Answer # 3
Maybe it ’s like this.
const A = (B) =>{// B is a function passed as an argument return (action, state) =>{// The arrow function is returned to the first arrow function return B (action, state);// returns the result of the function in the first argument } }
Related articles
- javascript - i would like to ask you about functions
- javascript - about split assignment in arrow function
- javascript - about switching the display between desplay: none;and desplay: block;
- about javascript split assignment
- php - about javascript document
- javascript - about roulette creation error
- about formatting javascript data
- javascript - about initialization of app in expressjs (library code)
- javascript - about the order of push processing
- javascript - about the processing order of if statements
- javascript - about implementation of orbitcontrols in threejs and display of model
- javascript - i want to use gas functions in vue components
- about the message javascript error:'alert' is not defined
- javascript - i have a question about how to use modal with bootstrap
- javascript - i have a question about xmlhttprequest
- creating a simple quiz app about javascript
- javascript - about sending and receiving multiple forms using flask + websocket
- php - about compiling javascript code in laravel development
- about javascript syntax
- javascript - about sending and receiving files using json
- javascript : Receiving multiple requests in Redux
- javascript : Clearing redux state
- javascript : What is the correct way to make a copy of the state in the reducer?
- javascript : How do I make a copy of a state?
- javascript : Help me figure out JS array methods
- javascript : Why Reselect if you have a Memo?
- javascript : Looping through an array of objects
- javascript : File storage. React
- javascript : How to expand a block (div or other) to the other side? (HTML, CSS, React.js)
- javascript : How to mutate an object in store (redux) that is referenced?
I will explain the function by adding 1 to the number n and then multiplying by 2.
That means you understand the following?
The arrow function can be written as
() =>expression
when() =>{return expression;}
.Also, when there is only one argument, such as
(n) =>n + 42
, the parentheses around the argument part are omitted as inn =>n + 42
I can do it.Now, let's expand the function that adds 1 to the number n and then multiply by 2 to the function that adds X to the number n and then multiplies Y.
If the number to add and the number to multiply are fixed and n changes variously, it is troublesome to give 1,2 to the argument one by one.
So, you can create a "function that takes X and Y as arguments and returns a function that adds x to n and then multiply by Y" as shown below. (As a precaution, you can't do it because it's an arrow function. You can also do it with a function. That's what you write with an arrow function.)
You can also go ahead and create a "function that returns" a function that takes X as an argument, returns Y as an argument, and returns "a function that adds X to n and then multiply Y" ".
When the last thing is rewritten with function, it becomes the following. Try rewriting other ones. I think that understanding will advance.