var vs let in JS：函数回调中的作用域

Question

以下代码段输出10,10,10,10,10,10,10,10,10,10

var fs = []

for (var i = 0; i < 10; i++) {
    fs.push(function() {return i;})
}

console.log(fs.map(function(f) {return f()}).join())

如果for循环中的var更改为let，如下所示，则输出为0,1,2,3,4,5,6,7,8,9

有人可以帮助理解这个范围问题以及JS工作的神秘方式吗？