I have the following function.the code does what i need it to do,however its not structured correctly because of the declarations therefore it gives "(ESLint) move function to body root" error :

This is my code:

function onSuccess(result) {

            if (result) {
                 function GetTotal(result) {

                    var totBal = 0;
                    var str = 'R';
                    for (var i = 0; i < result.length; i++) {
                        totBal += result[i].Price;
                    }
                    str += totBal.toFixed(2);
                    return str;
                }
                var span = document.getElementById("Total");
                span.innerHTML = GetTotal(result);
            }
        }

This is what i tried:

function onSuccess(result) {
        var fn;
        if (result) {
          fn=function GetTotal(result) {

                var totBal = 0;
                var str = 'R';
                for (var i = 0; i < result.length; i++) {
                    totBal += result[i].Price;
                }
                str += totBal.toFixed(2);
                return str;
            };
            var span = document.getElementById("Total");
            span.innerHTML = GetTotal(result);
        }
    }

the "(ESLint) move function to body root" gets solved But with the above it returns an error saying "getTotal is not defined"

I have the following function.the code does what i need it to do,however its not structured correctly because of the declarations therefore it gives "(ESLint) move function to body root" error :

This is my code:

function onSuccess(result) {

            if (result) {
                 function GetTotal(result) {

                    var totBal = 0;
                    var str = 'R';
                    for (var i = 0; i < result.length; i++) {
                        totBal += result[i].Price;
                    }
                    str += totBal.toFixed(2);
                    return str;
                }
                var span = document.getElementById("Total");
                span.innerHTML = GetTotal(result);
            }
        }

This is what i tried:

function onSuccess(result) {
        var fn;
        if (result) {
          fn=function GetTotal(result) {

                var totBal = 0;
                var str = 'R';
                for (var i = 0; i < result.length; i++) {
                    totBal += result[i].Price;
                }
                str += totBal.toFixed(2);
                return str;
            };
            var span = document.getElementById("Total");
            span.innerHTML = GetTotal(result);
        }
    }

the "(ESLint) move function to body root" gets solved But with the above it returns an error saying "getTotal is not defined"

• javascript
• eslint

• 5 Why define a function at all in such a limited scope? Why not just perform the calculation directly? You can't re-use the function anywhere, so you don't need the additional syntax of defining it. – David Commented May 30, 2019 at 12:56
• Alternately, why not just move the function to the body root? – Heretic Monkey Commented May 30, 2019 at 12:58

4 Answers 4

Then function declaration is on right hand side. It bees a local variable to the variable on left hand side. Use the name GetTotal instead of fn in the main function scope.

function onSuccess(result) {
        var GetTotal;
        if (result) {
          GetTotal = function(result) {

                var totBal = 0;
                var str = 'R';
                for (var i = 0; i < result.length; i++) {
                    totBal += result[i].Price;
                }
                str += totBal.toFixed(2);
                return str;
            };
            var span = document.getElementById("Total");
            span.innerHTML = GetTotal(result);
        }
    }

You can just move the function to the body root as suggested by ESLint like so

function onSuccess(result) {
  function GetTotal(result) {
    var totBal = 0;
    var str = 'R';
    for (var i = 0; i < result.length; i++) {
      totBal += result[i].Price;
    }
    str += totBal.toFixed(2);
    return str;
  }

  if (result) {
    var span = document.getElementById("Total");
    span.innerHTML = GetTotal(result);
  }
}

Or just get rid of the function as it's inside of a function anyway and you don't seem to be using it again.

function onSuccess(result) {
  if (result) {
    var totBal = 0;
    var str = 'R';
    for (var i = 0; i < result.length; i++) {
      totBal += result[i].Price;
    }
    str += totBal.toFixed(2);
    var span = document.getElementById("Total");
    span.innerHTML = str
  }
}

On your second example the function is now inside the variable fn. You can access it by calling fn(). Another option is to rename the variable to reflect the function behavior and then call it by its new name.

var fn;
fn=function GetTotal(result) {
  console.log('function called!');
}

fn();

Simgply add rules to disable the eslint rule. I.E. add "no-inner-declarations":[0, "always"], in .eslintrc.json