Function declarations (with the function keyword) and variable declarations should preferably be in the root of a program or the body of a function. Having nested function declarations inside blocks may have unexpected results at runtime due to hoisting.

As a rule of thumb, if you ever find yourself needing to use nested functions:

Prefer const f = () => ... over function f() {...} for functions inside block-statements.
When using function or var, do not have any declarations that can possibly be accessed outside the block in which they're declared.

Note: Block bindings (let, const) are not hoisted and therefore they are not affected by this rule.

Bad Practice

function outer(test) {
  if (test) {
    // the declaration for "inner" can
    // be accessed outside the if-statement
    // only when `test` is truthy.
    function inner() {
      return "inner value";
    }

    inner();
  }

  // works only if `test` is true.
  return inner();
}

outer(true); // "inner value"
outer(false); // TypeError: inner is not a function

Recommended

inner should be moved out of the if block, or be declared with a const keyword.

// When `inner` is needed outside the `if` block:
function outer(test) {
  const inner = () => "inner value"

  if (test) {
    inner();
  }

  // always works.
  return inner();
}

// When `inner` is not needed outside the `if` block:
function outer(test) {
  if (test) {
    const inner = () => "inner value"
    inner();
  }

  return "outer value"
}

willtheorangeguy / willtheorangeguy.github.io

No ignore rules found