Photo by Christopher Robin Ebbinghaus on Unsplash

En este post aprenderás cómo funciona el alcance con las variables “global scope”, “funciones”, “var”, “let”, “const”. Qué puedes hacer con él y por qué es importante aprender este concepto.

TLDR

Para aquellos que no les gusta leer, usa esta lista cuando dudes de cuál elegir. Si desea aprender este tema en detalle, te recomiendo que te desplaces hacia abajo.

• const: intenta usar esta variable const en todas partes y siempre. Excepto si la variable necesita ser cambiada.
• let: Si el valor de la variable necesita ser cambiado, usa la variable let.
• var: evita esta variable, puede hacer que tu aplicación sea desordenada e impredecible porque puede sobrescribirse desde cualquier lugar. let y const evitan esto por defecto 👍

Tipos de Scopes

¿Cuál es el alcance? Una función se utiliza para crear un ámbito que decide la accesibilidad y la visibilidad de variables, funciones y objetos.

En JavaScript, tenemos 2 tipos de ámbitos.

• Scope global
• Scope local

Cual es el global scope

El alcance global es el objeto window. Que es accesible desde todas partes en tu aplicación. Si deseas que una variable, función u objeto sea visible para todos los demás ámbitos que no sea ponerlo en el ámbito global.

Pero ten en cuenta no poner todo en el ámbito global. El objeto window ya está lleno de mucha información. Entonces, si no lo necesitas en todas partes, colócalo en un ámbito local.

Cual es el local scope

Un ámbito local es creado por una función. Esa función puede hacer que las variables, los objetos y las funciones internas se oculten o sean visibles desde fuera de la función.

Como crear un scope

Para crear un ámbito solo necesitas una función. Donde puedes poner variables, funciones y objetos que luego no son accesibles fuera de la función. La única forma de hacerlo visible y accesible es devolviéndoles la declaración return.

La variable “var”

La palabra clave var se puede usar en todas partes. Puede contener cadenas, int, objeto, matriz, función.

Las variables se pueden usar para todo, pero también en todas partes. ¡Puedes acceder a una var desde dentro de una función, objeto, instrucción if-else, realmente en todas partes!

Eso puede sonar genial, pero puede tener un gran efecto en la previsibilidad de un sitio web o aplicación web.

Alcance global

Una var tiene o puede tener un alcance global. ¡Genial para acceder a todo desde cualquier cosa! Pero eso es bueno? Hay algunas alternativas por delante. Se llaman let y const y tienen un comportamiento diferente al de las var. Pero hablemos de eso más tarde.

“var” se puede cambiar más tarde

Una variable se puede definir con una cadena, más tarde, reasignada a un entero y más tarde podría ser una función. Ese es el poder pero también una debilidad.

var globalVariableglobalVariable = 'I Love Pizza!'console.log(globalVariable) // Will be 'I Love Pizza!'

Ahora definí una variable global (sí, me encanta la pizza :-)), justo después le agregué una cadena. Para que pueda ver, puede definirlo y luego cambiarlo al otro valor.

Entonces, adivina qué, globalVariable ha cambiado. Suena bien verdad! Bueno, si pretendías cambiarlo, ¡sí! Pero si no sabía que ya usaba esa variable, ¡entonces es un problema! ¡Ahí está la debilidad!

Puede tener alcance local

;(function() {  var var1 = 'variable 1 value in parent scope'  ;(function() {    // Scope 1    var1 = 'variable 1 value in scope 1'    console.log('scope 1: ', var1) // Is 'variable 1 value in scope 1'  })()  ;(function() {    // Scope 2    var1 = 'variable 1 value in scope 2'    console.log('scope 2: ', var1) // Is 'variable 1 value in scope 2'  })()  console.log('Parent scope: ', var1) // Is 'variable 1 value in parent scope'})() console.log('Global scope: ', var1) // Is undefined

Puede hacer que la variable tenga ámbito local, poniéndola dentro de una función. ¡Como en el ejemplo aquí, si ejecuta la función en su consola, el último console.log () con "Alcance principal" en él, será cambiado por el anterior!

La variable “let”

“let” tiene un alcance de bloque

Una variable let tiene un ámbito de bloque. Puede crear un alcance con cualquier {}. Con una función, for and while loop y mucho más.

Finalmente, un tipo de variable que no tiene alcance global sino local. 🎉

“let” se puede cambiar más tarde

Una variable let se puede cambiar más tarde, ¡pero solo si está en el mismo alcance que donde se declara! Se declara en el otro ámbito, es solo una nueva variable que se define.

Este ejemplo se ejecutará en la última versión de Google Chrome

;(function() {  let letVar1 = 'Let variable 1 value in parent scope'  ;(function() {    // Scope 1    let letVar1 = 'Let variable 1 value in scope 1'    console.log('scope 1: ', letVar1) // Is 'Let variable 1 value  in scope 1'  })()  ;(function() {    // Scope 2    let letVar1 = 'Let variable 1 value in scope 2'    console.log('scope 2: ', letVar1) // Is 'Let variable 1 value in scope 2'  })()  console.log('Parent scope: ', letVar1) // Is 'Let variable 1    value in parent scope'})()console.log('Global scope: ', letVar1) // Is undefined

Si trataste de pegar este fragmento en la consola de herramientas de desarrollo, verás que el alcance principal, el alcance 1 y 2 dan valores diferentes. Eso es porque tiene un alcance de bloque. El alcance global dará un error de que no está definido.

Con la var normal, puedes darle a letVar1 un nuevo valor. Pero dado que un let no se puede redefinir más tarde, esto no es posible para el let.

Si nos olvidamos de asignar letVar1 en el alcance 1, entonces la consola en el alcance 1 generará "Dejar el valor de la variable 1 en el alcance primario". Porque buscará en el ámbito primario.

“let” no se puede levantar

Si intenta elevar las variables let, obtendrá errores. Para definir un let y darle un valor. Si primero trata de definirlo y le da un valor más tarde, ¡terminará con errores!

La variable “const”

Lo que lees sobre const es que son inmutables. La mayoría de la gente piensa que significa que no puede cambiar el valor, sino que puede cambiar el valor. Pero no puede reasignar la referencia al const en sí.

“const” tiene un alcance de bloque

const tiene un alcance de bloque, igual que la variable let. En el otro ámbito, puede definir el const nuevamente. Pero no puede reasignar la misma constante en el otro ámbito.

;(function() {  const constVar1 = 'const variable 1 value in parent scope'  ;(function() {    // Scope 1    const constVar1 = 'const variable 1 value in scope 1'    console.log('scope 1: ', constVar1)    // scope 1:  const variable 1 value in scope 1  })()  console.log('Parent scope: ', constVar1)  // Parent scope:  const variable 1 value in parent scope})()

En este ejemplo, puedes ver que es posible asignar una constante con el mismo nombre en un ámbito diferente con el otro valor.

“const” no se puede reasignar

;(function() {  const constVar1 = 'const variable 1 value in parent scope'  ;(function() {    // Scope 1    console.log('scope 1: ', constVar1)    // scope 1:  const variable 1 value in parent scope    constVar1 = 'const variable 1 value in scope 1'    // Is Identifier 'constVar1' has already been declared    console.log('scope 1: ', constVar1)  })()})()

En este ejemplo, puede ver que no es posible reasignar la misma constante con un valor diferente.

“const” no se puede levantar

Debido a que no puede reasignar una constante, sabe que no es posible levantarlas. Para levantarlas, debe reasignar.

¡Buena suerte!

Si estás aprendiendo JavaScript en este momento, me imagino que

Si algo no es claro o confuso sobre var, let o const, por favor deja tus preguntas en los comentarios.