Cómo funciona el scope de JavaScript con las variables var, let y const — en 10 minutos
Published: 2019-10-29 20:59:12

![img](https://cdn-images-1.medium.com/max/800/0*ABaubFNk3u_frni3)Photo by [Christopher Robin Ebbinghaus](https://unsplash.com/@cebbbinghaus?utm_source=medium&utm_medium=referral) on [Unsplash](https://unsplash.com?utm_source=medium&utm_medium=referral)

### 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.