JS 02: Variables y Tipos - Kit de Aprendizaje

Nomenclatura: ¿Cómo escribimos los nombres?

En programación, no podemos usar espacios en los nombres de variables (mi nombre daría error). Por eso usamos diferentes "estilos" para separar las palabras.

Los 5 Estilos Principales

camelCase (La Joroba del Camello): Es el estándar en JavaScript. La primera letra minúscula, y cada nueva palabra empieza con mayúscula.
```
let miNombreCompleto = "Juan";

let calcularPrecioTotal = 100;
```
PascalCase (La Cima de la Montaña): Similar a camelCase, pero la primera letra también es mayúscula. Se usa para nombrar Clases (y componentes en frameworks).
```
class UsuarioPremium { ... }
```
UPPER_SNAKE_CASE (El Grito): Todo en mayúsculas separado por guiones bajos. Se usa solo para Constantes Globales fijas y conocidas (configuración, colores fijos).
```
const COLOR_PRINCIPAL = "#FF0000";
const MAX_USUARIOS = 50;
```
snake_case (La Serpiente): Usamos guiones bajos para separar palabras. Es el estándar que usaremos en este curso para IDs y Clases de HTML y nombres de archivos.
```
<div id="mi_caja_roja">...</div>

nombre_archivo.html
```
kebab-case (El Pincho): Usamos guiones medios. Es el estándar en CSS.
```
background-color: red;

font-size: 16px;
```

¡Importante! En JavaScript, si intentas usar background-color fallará porque el guion - se confunde con una resta. Por eso JS transforma el CSS a camelCase: backgroundColor.

Las Variables: Cajas con Etiquetas

Imagina que te mudas de casa. Para organizar tus cosas, usas cajas. A cada caja le pones una etiqueta para saber qué hay dentro: "Libros", "Juguetes", "Ropa".

En programación, una variable es exactamente eso: una caja donde guardamos información para usarla más tarde.

¿Cómo creamos una caja (variable)?

Tenemos tres formas de hacerlo, pero hoy en día usamos principalmente dos:

let (La caja abierta): Es una caja normal. Puedes guardar algo, sacarlo y meter otra cosa diferente más tarde.
Ejemplo: La puntuación de un juego (cambia constantemente).
```
let puntuacion = 0;

puntuacion = 10; // ¡Ha cambiado!
```
const (La caja fuerte de cristal): Es una caja transparente y sellada. Puedes ver lo que hay dentro, pero NO puedes cambiarlo una vez que lo has guardado.
Ejemplo: Tu fecha de nacimiento (nunca va a cambiar).
```
const fechaNacimiento = "1990-01-01";

// fechaNacimiento = "2000-01-01"; // ¡ERROR! No se puede cambiar.
```
var (La caja vieja): Es la forma antigua de crear variables. Es un poco caótica y tiene reglas extrañas, así que intentamos no usarla en código moderno.

Curiosidad: ¿Puedo modificar una letra? (Mutabilidad)

Aquí hay una diferencia clave entre Texto y Arrays que confunde a muchos:

Arrays (Mutables): Puedes cambiar el contenido de una cajita individual usando su índice.
```
let lista = ["A", "B", "C"];
lista[0] = "Z"; // ✅ Funciona
console.log(lista); // ["Z", "B", "C"]
```

Strings (Inmutables): Aunque parecen arrays de letras, NO puedes cambiar una letra suelta. Tienes que reescribir toda la variable.

let texto = "Hola";
texto[0] = "B"; // ❌ NO hace nada (ni error, ni cambio)
console.log(texto); // Sigue siendo "Hola"

// Solución: Crear un nuevo string
texto = "B" + texto.slice(1); // "Bola"

🧠 Concepto Pro: Temporal Dead Zone (TDZ)

Seguro que has oído que let y const no tienen "hoisting". Pero la realidad es más interesante.

Sí tienen hoisting (JS sabe que existen), pero entran en la Zona Muerta Temporal. No puedes tocarlas hasta que el código llegue a la línea donde las declaras.

console.log(hola); // ❌ ReferenceError: Cannot access 'hola' before initialization
let hola = "Mundo";

Esto evita errores lógicos y hace que tu código sea más predecible que usando la vieja var.

🛡️ const vs Object.freeze()

Mucha gente piensa que const hace que los objetos sean inmutables. ¡Error!

const: Protege la variable. No puedes reasignar un nuevo objeto entero a esa variable.
Object.freeze(): Protege el contenido del objeto. Impide que cambies sus propiedades.

const user = { name: "Javi" };
user.name = "Pepe"; // ✅ Funciona (const no protege el interior)

Object.freeze(user);
user.name = "Juan"; // ❌ No hace nada (el objeto está congelado)

☠️ La Zona de Peligro: Variables Globales Implícitas

Si se te olvida poner let, const o var, JavaScript no da error (a menos que uses "use strict"), pero hace algo muy peligroso: crea una variable global (se pega al objeto window).

// ❌ MAL: Sin 'let' ni 'const'
nombre = "Pepe"; // Esto es window.nombre = "Pepe"

// ✅ BIEN: Siempre declara la variable
let nombre = "Pepe";

Evita esto siempre. Puede romper otras partes de tu web que usen el mismo nombre.

Tipos de Datos: ¿Qué podemos guardar en las cajas?

No guardarías agua en una caja de cartón, ¿verdad? En JavaScript, el tipo de dato importa.

String (Texto): Cualquier cosa entre comillas. Es como guardar una carta escrita.
```
let saludo = "¡Hola mundo!";
```
Number (Números): Para contar o calcular. No llevan comillas.
```
let edad = 25;

let precio = 9.99;
```
Boolean (Interruptores): Solo tienen dos estados: Verdadero (Encendido) o Falso (Apagado). Sirven para tomar decisiones.
```
let estaLloviendo = true;

let esDeDia = false;
```
Array (Listas): Una caja con compartimentos numerados. Ideal para listas de cosas.
```
let listaCompra = ["Pan", "Leche", "Huevos"];
```
Object (Objetos): Una caja compleja con muchas etiquetas dentro. Describe una "cosa" con sus propiedades.
```
let persona = {

    nombre: "Ana",

    edad: 30,

    esProgramadora: true

};
```
Tipos de "Nada": Null vs Undefined
En JavaScript, hay dos formas de expresar la ausencia de valor:
- undefined (No definido): Es como una caja que has comprado pero aún no has abierto. JavaScript lo asigna automáticamente cuando declaras una variable pero no le das valor.
  Significa: "No sé qué es esto todavía".
```
let cajaSorpresa;
console.log(cajaSorpresa); // undefined
```
- null (Nulo): Es una caja que has abierto y has comprobado que está vacía. Tú, como programador, lo asignas a propósito para decir "Aquí no hay nada".
  Significa: "Sé que esto no tiene valor conscientemente".
```
let cajaVacia = null; // Yo decido que esté vacía
```