Home > other >  Javascript function confused syntax
Javascript function confused syntax

Time:04-08

I am a little bit confused with the code below. It's obviously a two arrow function written in es6 code but I do not understand exactly some parts.

  1. The 2nd parameter named done is an empty function that does nothing? Or it is executed with a simple return as the result from the second arrow anonymous function?

  2. the XXXX.load is a promise function that returns some results. How the caller of the Index can get the results of the 2nd parameter done ie done(null, result) ?

  3. What is the equivalent code in es5?

const Index = (name, done = () => {}) => (dispatch, getState) => {
  
  return XXXX.load()
    .then((result) => {
      dispatch({type:OK});
      done(null, result);
    })
    .catch((error) => {
      dispatch({type:ERROR});
      done(error);
    });
};

CodePudding user response:

Let's go one by one:

  1. Index (name, done = () => {}) defines a default value for done in case none is provided when Index is called. This helps down to road to not do any checks in case done is null/undefined. You could also write it like this
const Index = (name, done) => (dispatch, getState) => {
  if (!done) {
   done = () => {}
  }
 }
  1. The caller will just pass a function as the second argument when calling Index.

A general note: Index actually returns a function that will expect a dispatch and/or a getState param.

CodePudding user response:

The 2nd parameter named done is an empty function that does nothing?

It's a parameter. It takes whatever value you give it.

The default value, which is assigned if the caller doesn't pass a second argument, is a function that does nothing. This lets it be called without throwing an undefined is not a function error or having an explicit test to see if it is a function or not.

How the caller of the Index can get the results of the 2nd parameter done ie done(null, result) ?

By passing its own function as the second argument.

What is the equivalent code in es5?

var Index = function(name, done) {
    if (!done) done = function() {};

    return function(dispatch, getState) {

        return XXXX.load()
            .then(function(result) {
                dispatch({
                    type: OK
                });
                done(null, result);
            })
            .catch(function(error) {
                dispatch({
                    type: ERROR
                });
                done(error);
            });

    }
};

CodePudding user response:

  1. The empty function is a default value for done. Default values prevents runtime crashes.

2 and 3 can be understood by seeing below code: (simply run it and see the consoles.

const DEFAULT_FUNCTION_VALUE = ()=> {};

const XXXX = {
  load: function() {
    return new Promise(function(resolve, reject) {
      setTimeout(function() {
         resolve({data: 'from XXXX.load'});
      },2000);
    });
  }
}

const Index = function(name='', done=DEFAULT_FUNCTION_VALUE) {
  return function(dispatch, getState) {
    return XXXX.load().then(function(result) {
      console.log({result});
      done(result);
    }).catch(function(error) {
        console.log(error);
    });
  }
}

function doneImplementation(data) {
  console.log('Data from done- ', data);
}

Index('', doneImplementation)();
  • Related