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 variableconsten todas partes y siempre. Excepto si la variable necesita ser cambiada. -
let: Si el valor de la variable necesita ser cambiado, usa la variablelet. -
var: evita esta variable, puede hacer que tu aplicación sea desordenada e impredecible porque puede sobrescribirse desde cualquier lugar.letyconstevitan 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.
Top comments (0)