JavaScript: Variables, tipos de dato, scope y el hoisting.
Tags: javascript, frontend, programming
Published: 2021-09-18 04:38:30

¡Hola de nuevo! :3

Algunas de las cosas básicas que tenemos que entender a la hora de querernos meter a aprender JavaScript son: variables, tipos de datos, scope y el Hoisting. En realidad, siempre estaremos o casi siempre estaremos en interacción con datos, ya sea que vengan del lado de nuestros servicios o datos con lo que tenemos que nos va a brindar el usuario. Así que como no podemos escapar de ellos, tenemos que aprender a manejarlos. 

### Tipo de datos

Los tipos de datos son importantes en cualquier lenguaje de programación. En el caso de JS, tenemos dos clases de datos: los primitivos y los de tipo objeto. Dentro de los primitivos podemos encontrar diferentes tipos de datos: 

* Booleano (Boolean): Pueden representar dos valores lógicos: verdadero (true) y falso (false).
* Null: Representa un valor nulo. 
* Undefined: Representa una variable que no ha sido asignada por un valor. 
* Número (Number): Como su nombre lo indica, podemos representar cualquier número.
* BigInt: En JS tenemos dos tipos de números, el BigInt representa un valor exacto como los exponentes, algo así como: 2n ** 53n.
* Cadena de texto (String): Representa datos textuales, por ejemplo: "Hola olla".

### Variables

Se pueden definir de dos maneras: 1) una variable es un espacio almacenado en la memoria, 2) una variable es un contenedor para algún dato o valor. En JS tenemos tres formas de declarar estos valores: 

* var
* let
* const

#### var 

Antes de EcmaScript 6 teníamos una manera de declarar nuestras variables y era con la palabra reservada "var". Pero eso nos daba un par de problemas; el primero era que podíamos
duplicar las declaraciones y podríamos reasignar los valores. Suena a que no es un problema, pero si no teníamos el cuidado suficiente al trabajar nuestras variables, éstas podrían cambiar sin darnos cuenta. Ya que "var" nos permite la reasignación y la redeclaración. 

```JS
//var

var sayHello = "Hola olla"

console.log(sayHello) // "Hola olla"

var sayHello= "Hi!"

console.log(sayHello) // "Hi"
```

#### let 

Con la llegada de ES6, el problema de reasignación de variables con var, termina. Especialmente cuando usamos la palabra reservada let dentro de las llaves { }. Así que además de darnos una keyword nueva, nos introduce a un nuevo scope; llamado: Block scope o alcance de bloque. 

```JS
//let 

let sayHello = "Hola olla"

console.log(sayHello) // "Hola olla"

sayHello = "Hi!"
console.log(sayHello) // "Hi"

let sayHello= "Hi!"

console.log(sayHello) // error: Identifier 'sayHello' has already been declared
```

#### const

La palabra reservada "const" nos ayuda a guardar valores que nunca tendrán que reasignarse. 

```JS
// const

const sayHello = "Hola olla"

console.log(sayHello) // "Hola olla"

sayHello = "Hi!" // error: Assignment to constant variable. 

const sayHello= "Hi!" // error: Identifier 'sayHello' has already been declared
```

### Scope

Ya llega la hora de hablar del scope. Entender el scope nos ayudará mucho a la hora  no solo de declarar nuestras variables, sino a entender muchas cosas a la hora de programar y pensar cómo solucionar nuestros problemas técnicos. El scope determina el alcance  de nuestras variables. Con JS tenemos tres tipos de scope: 1) global, 2) scope de función y 3) scope de bloque. Aunque en realidad podríamos agregar otros dos: local y de módulo.

* Alcance global: Cuando declaramos variables fuera de cualquier función, automáticamente se convierte en una variable de alcance global.

* Alcance de función: Cada vez que creamos funciones, se crea automáticamente un nuevo scope dentro de la nueva función. Eso significa que cada vez que declaramos variables dentro de una función, esa variable tendrá alcance o visibilidad dentro de esa función y no se podrá acceder a ella fuera de la función.

* Alcance de bloque: el alcance de bloque llega a JS en 2015 con ES6, cuando se introducen let y const. Esto significa que cualquier variable declarada dentro de las llaves { } sólo pueden ser visibles dentro de ellas. 

* Alcance de Módulo: Cuando creamos un nuevo módulo, todas las variables que estén dentro del archivo aunque se encuentren fuera de funciones o llaves, en teoría podrían ser consideradas como variables globales; sin embargo, esas variables sólo tienen alcance a nivel de módulo, excepto cuando importamos explícitamente el módulo en otro archivo. 

### Hoisting

A veces JS hace cosas raras. Creo que el Hoisting es una de esas y si no lo entendemos podemos cometer algunos errores o bueno, tener algunos bugs algo raros. El Hoisting es un comportamiento que JS tiene por defecto y lo que hace es elevar todas las declaraciones. Cuando digo "elevar", me refiero a que coloca todas las declaraciones al inicio de su scope. Ese elevamiento no es literal, justo pasa cuando JS está en el proceso de compilación cuando JS hace un chequeo de todas las variables que requieren de algún espacio en la memoria. 

Gracias por leer y con gusto espero feedback :D