No pude entender completamente la diferencia entre estos dos ámbitos, ya que algunas fuentes son antiguas y algunas cuentan cosas diferentes entre sí. ¿Podría explicarme la diferencia entre el alcance local y el alcance de la función de una manera simple?
No hay diferencia entre "ámbito local" y "ámbito de función".
Hasta ES5 inclusive, solo había dos ámbitos: global y "no global". Este último se llamaría "local" o "función". Ambos términos significan lo mismo:
var a = "this is global scope"; function foo() { var b = "this is local/function scope"; if (true) { var c = "this is in the same local/function scope as b"; } for (var i = 0; i < 4; i++) { var d = "this is also in the same local/ function scope as b and c"; } }Es función porque está dentro de la función.
A partir de ES6, el término alcance "local" puede ser un nombre poco apropiado, ya que hay más alcances que solo dos. Por ejemplo, el alcance del bloque para variables como let o const :
const a = "this is global scope";; function foo() { const b = "this is function scope"; if (true) { const c = "this is in block scope"; } for (let i = 0; i < 4; i++) { const d = "this is also in block scope but different to c"; } }así como el alcance del módulo para cualquier archivo que sea un módulo:
export const a = "this is in module scope";El alcance local solo se refiere al alcance disponible para una variable dada, pero el alcance de la función se referiría a las variables dentro de una función.
Aquí var x está dentro de una función, por lo que solo es accesible dentro de la función.
function hi() { var x = 'hello'; console.log(x); } hi(); console.log(x); // this will throw an error: "x is not defined"Aquí, var x tiene un alcance local para el objeto de la ventana, que también se denomina alcance global y, por lo tanto, está disponible dentro o fuera de la función:
var x = 'hello'; console.log(x); function hi() { x = 'world'; console.log(x); } hi(); console.log(x);