¿Qué es el Scope?

Los alcances y los cierres no son increíblemente difíciles de entender. Son bastante simples una vez que sabes cómo verlos.

Cuando declara una variable en una función, solo puede acceder a ella en la función. Se dice que estas variables tienen un alcance para la función.

Si define cualquier función interna dentro de otra función, esta función interna se llama cierre. Conserva el acceso a las variables creadas en la función externa.

Depuración de ámbitos con DevTools

Las DevTools de Chrome y Firefox le facilitan la depuración de variables a las que puede acceder en el ámbito actual. Hay dos formas de usar esta funcionalidad.

La primera forma es agregar la palabra debugger clave en su código. Esto hace que la ejecución de JavaScript en los navegadores se detenga para que pueda depurar.

Aquí hay un ejemplo con prepareCake:

JavaScript

function prepareCake (flavor) {
  // Adding debugger  
  debugger 
  return function () {  
   setTimeout(_ => console.log(`Made a ${flavor} cake!`), 1000) 
  }
}​

const makeCakeLater = prepareCake('banana')

Si abre sus DevTools y navega a la pestaña Fuentes en Chrome (o la pestaña Depurador en Firefox), verá las variables disponibles para usted.

También puede cambiar la palabra debugger al cierre. Observe cómo las variables de alcance cambian esta vez:

JavaScript

function prepareCake (flavor) {
  return function () { 
   // Adding debugger    
   debugger    setTimeout(_ => console.log(`Made a ${flavor} cake!`), 1000)
   }
}

​const makeCakeLater = prepareCake('banana')

La segunda forma de usar esta funcionalidad de depuración es agregar un punto de interrupción a su código directamente en la pestaña de fuentes (o depurador) haciendo clic en el número de línea.