Home>

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

    I will explain the function by adding 1 to the number n and then multiplying by 2.

      

    I thought the arrow function would be expressed as A = (args ...) =>{}

    That means you understand the following?

    const addOneThenDouble = (n) =>{return (n + 1) * 2;};
    addOneThenDouble (5);
    // =>12


    The arrow function can be written as() =>expressionwhen() =>{return expression;}.

    const addOneThenDouble = (n) =>(n + 1) * 2;
    addOneThenDouble (5);
    // =>12


    Also, when there is only one argument, such as(n) =>n + 42, the parentheses around the argument part are omitted as inn =>n + 42I can do it.

    const addOneThenDouble = n =>(n + 1) * 2;
    addOneThenDouble (5);
    // =>12


    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.

    const addXMulY = (x, y, n) =>(n + x) * y;
    addXMulY (1, 2, 5);
    // =>12


    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.)

    const addXMulY = (x, y) =>n =>(n + x) * y;
    const add1Mul2 = addXMulY (1, 2);
    add1Mul2 (5);
    // =>12
    // You can write the following without saving the function in the variable
    addXMulY (1, 2) (5);
    // =>12


    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" ".

    const addXMulY = x =>y =>n =>(n + x) * y;
    const add1MulY = addXMulY (1);
    const add1Mul2 = add1MulY (2);
    add1Mul2 (5);
    // =>12
    // You can write the following without saving the function in the variable
    addXMulY (1) (2) (5);
    // =>12


    When the last thing is rewritten with function, it becomes the following. Try rewriting other ones. I think that understanding will advance.

    const addXMulY = function (x) {
      return function (y) {
        return function (n) {
          return (n + x) * y;
        };
      };
    };
    const add1MulY = addXMulY (1);
    const add1Mul2 = add1MulY (2);
    add1Mul2 (5);
    // =>12
    addXMulY (1) (2) (5);
    // =>12

  • 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 andreturncan be omitted

    () =>process{statement}statement but return void 0

    () =>{return statement}Returns the result of the statement.

    () =>Same asstatement2. Can be omitted so you can write short

    Function argument: (left side of=>):
    functioncan 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
        }
    }