Saltar al contenido principal

Ámbito de bloque

@serverSerrverlesskiy

Alcance (alcance en inglés): una parte del programa dentro de la cual la variable está disponible para su uso. Al crear el archivo .js, creamos el alcance de todo el archivo, para crear alcance interno, debe declararlo usando corchetes { ... }.

file

// primer alcance
let fruit = 'Banana'
{
  // Segundo alcance
  let fruit = 'Apple'
  {
    // Tercer alcance
    let fruit = 'Lime'
  }
}

En este ejemplo, creamos tres variables en diferentes ámbitos, que contienen su propia versión de la variable fruta, por lo que no se producen errores , pero si intenta crear dos variables con el mismo nombre en el mismo ámbito , entonces ocurrirá un error 🙅.

// primer alcance
let fruit = 'Banana'
{
  // Segundo alcance
  let fruit = 'Apple'
  let fruit = 'Lime' // Aquí se producirá un error.
}

Cuando crea varias construcciones, también crea el alcance de esta construcción, porque usa un bloque de corchetes { ... }.

if (true) {
  // Alcance de una declaración condicional
}

for (let i = 0; i > 5; i++) {
  // Alcance de bucle
}

function test() {
  // Alcance de la función
}

En estos ejemplos, cada construcción tiene su propio alcance.

Video​

Alcance global​

Global

Cuando decimos alcance global, queremos decir que todos los demás alcances son hijos de este. El alcance global contiene variables declaradas fuera de todas las funciones⚙️ y bloques.

// Alcance global
let fruit = 'Banana'

Una variable creada en el ámbito global se denomina variable global . La variable global se puede utilizar en todos los ámbitos secundarios.

Editor en vivo
Resultado
Loading...

Ámbito local​

Local

El alcance local contiene variables declaradas en una determinada parte del código. Por ejemplo, las variables creadas dentro del bucle serán locales.

for (let i = 0; i > 5; i++) {
  // La variable i es local
}

Las variables locales solo pueden usarse dentro del bloque en el que fueron declaradas.

function learnJavaScript() {
  function showFruit() {
    // La variable fruit es local.
    let fruit = 'Banana'
  }
  // Por lo tanto, no podemos usarlo fuera de una función.
  return fruit
}

// ReferenceError: fruit is not defined

Ejemplos​

Math

Usamos dos variables con el mismo nombre en diferentes ámbitos. La función otherFruit() devuelve la variable fruts desde el ámbito en el que se inicializa como Lime

Editor en vivo
Resultado
Loading...

Si eliminamos let de la función otherFruit(), en lugar de crear una variable la sobrescribimos .

Editor en vivo
Resultado
Loading...

¿Qué sucede si tratamos de llamar a una variable local en el ámbito principal? Ocurre un error porque estamos tratando de llamar a una variable en el alcance global, que no creamos.

function learnJavaScript() {
  let num
  for (let i = 0; i != 5; i++) {
    num += i
  }
  return i
}

//ReferenceError: i is not defined

Primer

Prohibición de var​

eye

En el artículo Variable le dijimos que no usaremos var, está conectado solo con el alcance.

  1. Si crea dos variables con el mismo nombre en el mismo ámbito utilizando la palabra clave let o const, el intérprete nos advierte sobre esto mostrando un error.
function learnJavaScript() {
  let fruit = 'Banana'
  let fruit = 'Lime'
  return fruit
  // SyntaxError: Identifier 'fruit' has already been declared
}

Pero, si usando var creas variables con el mismo nombre, entonces las reasignará.

Editor en vivo
Resultado
Loading...

El error no ocurre porque var sobrescribió la variable fruit

  1. Habiendo creado una variable global usando var, podemos cambiarla desde el alcance local creando otra variable con el mismo nombre usando var. El alcance de var está limitado a una función o un script.
Editor en vivo
Resultado
Loading...
  1. Las variables creadas con var se consideran declaradas desde el comienzo de la ejecución del script, independientemente de dónde se encuentre la declaración.
Editor en vivo
Resultado
Loading...
  1. Antes de ES6, JavaScript no tenía alcances de bloque. Aquellos. cualquier variable creada con la palabra clave var dentro del bloque también será visible fuera del bloque.
if (true) {
  var fruit = 'Apple' // la variable será visible fuera de este bloque
}
console.log(fruit) // "Apple"

javascript

if (true) {
  let fruit = 'Apple' // la variable no será visible fuera de este bloque
}
console.log(fruit) // "Apple"

javascript

Debido a las razones anteriores, los desarrolladores han abandonado el uso de var

¿Problemas?​

Problem

Escribe en Discord o Telegram chat y suscríbete a nuestras noticias

JavaScript Camp

Preguntas​

Pregunta

¿Cuándo creamos el primer alcance?

  1. Al crear un bucle
  2. Al crear un archivo
  3. Al crear un bloque

Al crear una declaración condicional, ¿se crea un nuevo alcance?

  1. true
  2. false

¿Dónde se crea la variable local?

  1. Dentro del bloque en el que se declara
  2. Fuera de todos los bloques

Para comprender cuánto ha aprendido en esta lección, realice la prueba en aplicación móvil en nuestra escuela sobre este tema.

EnglishMoji!

Enlaces​

  1. JavaScript Scope
  2. Learn JavaScript
  3. MDN Web Docs

Contributors ✨​

Thanks goes to these wonderful people (emoji key):


IIo3iTiv

Dmitriy Vasilev
💵
Resoner2005
🐛 🎨 🖋
Navernoss
🖋 🐛 🎨

EnglishMoji!