关于es6中函数作用域的问题

Question

var x = 1;
function foo(x, y = function() { x = 2; }) {
  var x = 3;
  y();
  console.log(x);
}

foo() // 3 x // 1

阮一峰的es6入门里有这么一段代码，相关的解释是

上面代码中，函数foo的参数形成一个单独作用域。这个作用域里面，首先声明了变量x，然后声明了变量y，y的默认值是一个匿名函数。这个匿名函数内部的变量x，指向同一个作用域的第一个参数x。函数foo内部又声明了一个内部变量x，该变量与第一个参数x由于不是同一个作用域，所以不是同一个变量，因此执行y后，内部变量x和外部全局变量x的值都没变。

对此我的理解是函数参数那边形成一个父作用域，函数内部形成一个子作用域，但这样理解的话

function fn(x) {
    let x = 1;
}
// Uncaught SyntaxError: Identifier 'x' has already been declare

function fn(x) {
    var x = 1;
}
// 正常

第一种会报重复声明是为什么，就算let会暂时锁区，当他们难道不是父子作用域吗🤔

Answer 1

函数参数算是和函数体一个作用域,而var是可以多次声明同一个变量的所以即使在函数了写了var x = 3不会报错，而let就不行,建议永不不要用var
你可以参考下这段等价的代码

function test() {
   var x = 1;
   (() => {x = 2})()
   var x = 3;
   console.log(x)
}