Function defined inside conditionals can't be accessed outside

What ?

Sample code:

 const someCondition = true;
 if (someCondition) {
   function insideFunc() {
     console.log('inside func');
   }
 }

 function someOtherFunc() {
   if (someCondition) {
     insideFunc();
   }
 }

After babelifying gives output like this:

var someCondition = true;
if (someCondition) {
  var _insideFunc = function _insideFunc() {
    console.log('inside func');
  };
}

function someOtherFunc() {
  if (someCondition) {
    insideFunc();
  }
}

Notice the variable insideFunc this has been renamed inside the conditional with a suffix _ but the reference isn’t updated outside that conditional i.e inside someOtherFunc. This code throws an error when executing someOtherFunc, saying insideFunc is not defined.

My configurations

Package versions:

Gulp task

My attempt

1. the above is fixed if I define the insideFunc like this

 var insideFunc = function() {
};

1. If i exclude es2015 from presets in gulpfile, then the function names comes correctly

What could be permanent fix for this ?

Really appreciate any help 😃

[loganfsmyth]

The issue is that in JS versions before ES6, function declarations inside of if blocks (and any non-function-body) actually weren’t allowed at all and were not part of the specification.

Unfortunately, most of the engines had them anyway, but every engine treated them slightly differently. The “optional” feature I mentioned is the subset of behavior of all of the core engines that all behaved the same. It was specified as optional because it exists to define the behavior of existing engines in a standard way, not to be a requirement for future engines. That is also why the optional behavior is only for non-strict code.

[loganfsmyth]

This issue is tracked in https://github.com/babel/babel/issues/5266 but it’s not so much a bug as it is just currently unsupported and potentially something we won’t support.

The issue is that

const someCondition = true;
if (someCondition) {
  function insideFunc() {
    console.log('inside func');
  }
}

is like you had written

const someCondition = true;
if (someCondition) {
  let insideFunc = function() {
    console.log('inside func');
  };
}

so the insideFunc variable only exists within the scope of the if block.

So why does your code work without the es2015 transform? Because the specification allows this to optionally work, when code is not running in strict mode. Since it is optional, and quite complex, Babel doesn’t currently support it, and I honestly can’t say if we will or not.

The best thing to do would be to rewrite your code as

const someCondition = true;
let insideFunc;
if (someCondition) {
  insideFunc = function() {
    console.log('inside func');
  }
}

function someOtherFunc() {
  if (someCondition) {
    insideFunc();
  }
}