◆ for 文の中で関数を作ったときに let で宣言した作ったループ変数を参照すると
  ◆ ループごとに別の変数になっていて次のループの値に変更されない
◆ Babel で IE 用に変更すると関数呼び出し形式になってる
◆ for の中で return や break 入れるとかなり複雑に

IE 11 を対象に Babel で変換します

シンプルなの

ループ変数を使った for 文の中で何もしない関数を作ります

for (let i = 0; i < 10; i++) {
const f = function () {}
}
"use strict";

for (var i = 0; i < 10; i++) {
var f = function f() {};
}

ここは普通です
let と const が var になりました

ループ変数を参照する

関数中でループ変数を参照するようにしてみます

for (let i = 0; i < 10; i++) {
const f = function () { i }
}
"use strict";

var _loop = function _loop(i) {
var f = function f() {
i;
};
};

for (var i = 0; i < 10; i++) {
_loop(i);
}

複雑になりました
次のループに進んでも関数内のループ変数は同じ値になるように _loop 関数にループ変数渡して実行するようになってます

return の追加

for の中身が _loop が関数になってますが for の中での return はどうなるのでしょう
for の中に return を追加します
return が使えるように全体を a という関数でラップします

function a() {
for (let i = 0; i < 10; i++) {
const f = function () { i }
return 1
}
}
"use strict";

function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }

function a() {
var _loop = function _loop(i) {
var f = function f() {
i;
};

return {
v: 1
};
};

for (var i = 0; i < 10; i++) {
var _ret = _loop(i);

if (_typeof(_ret) === "object") return _ret.v;
}
}

一気に長くなりました
typeof の新機能 (Symbol) 対応のためみたいです

_loop 関数が値を返すようになって その値を for の中で調べて return するようになってます

break も追加

せっかくなので for の中に break と continue も追加してみましょう

function a() {
for (let i = 0; i < 10; i++) {
const f = function () { i }
break
continue
return 1
}
}
"use strict";

function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }

function a() {
var _loop2 = function _loop2(i) {
var f = function f() {
i;
};

return "break";
return "continue";
return {
v: 1
};
};

_loop: for (var i = 0; i < 10; i++) {
var _ret = _loop2(i);

switch (_ret) {
case "break":
break _loop;

case "continue":
continue;

default:
if (_typeof(_ret) === "object") return _ret.v;
}
}
}

return の種類が増えて条件分岐が switch になりました
switch になったせいで for まで break できるように ラベル機能を使ってます
ラベルなんて JavaScript を長く使ってますが使ったことないです
むしろこの機能のせいで オブジェクトがオブジェクトとみなされなくて変なエラーになって要らないと思うほど
ただループ変数を保持するだけなのにこんな複雑になるのですね

ちなみにこの元のコードはそのままでも一応 IE11 で動きます
ループ変数が全部一緒になってますけど