"The Road" A JavaScript Adventure

Las variables son contenedores que almacenan valores. En JavaScript, puedes declarar variables usando var, let o const.

let nombre = "JavaScript";
const PI = 3.14159;
var edad = 25;

Tipos de declaración:

• let: Para variables que pueden cambiar su valor
• const: Para valores constantes que no cambian
• var: Forma antigua (evitar usar en código moderno)

Reglas importantes:

• Los nombres de variables son sensibles a mayúsculas y minúsculas
• Pueden contener letras, números, guiones bajos y símbolos de dólar
• No pueden empezar con números
• No pueden usar palabras reservadas de JavaScript

Las funciones son bloques de código reutilizables que pueden recibir parámetros y retornar valores.

function saludar(nombre) {
    return `¡Hola, ${nombre}!`;
}

// Función flecha (arrow function)
const sumar = (a, b) => a + b;

Tipos de funciones:

• Declaración: function nombre() {}
• Expresión: const nombre = function() {}
• Arrow function: const nombre = () => {}
• Método: Función dentro de un objeto

Los arrays son estructuras de datos que almacenan múltiples valores en una sola variable. Son fundamentales para manejar colecciones de datos.

let inventario = ['Espada', 'Escudo', 'Poción'];
let numeros = [1, 2, 3, 4, 5];
let mixto = ['texto', 42, true, null];

Métodos importantes:

• push(): Agrega elementos al final
• pop(): Remueve el último elemento
• shift(): Remueve el primer elemento
• unshift(): Agrega elementos al inicio
• splice(): Modifica elementos en cualquier posición

Los objetos son estructuras de datos que almacenan pares clave-valor. Son fundamentales para representar entidades complejas.

let personaje = {
    nombre: 'Aragorn',
    clase: 'Guerrero',
    nivel: 15,
    salud: 100,
    atacar: function() {
        return '¡Ataque con espada!';
    }
};

Acceso a propiedades:

• Notación de punto: personaje.nombre
• Notación de corchetes: personaje['nombre']
• Métodos: Funciones dentro del objeto

El scope (alcance) determina dónde las variables son accesibles en tu código. JavaScript tiene scope global, de función y de bloque.

let globalVar = 'Soy global';

function miFuncion() {
    let localVar = 'Soy local';
    console.log(globalVar); // ✅ Accesible
    console.log(localVar);  // ✅ Accesible
}

console.log(globalVar); // ✅ Accesible
console.log(localVar);  // ❌ Error: no definida

Tipos de scope:

• Global: Variables accesibles en todo el código
• Función: Variables solo accesibles dentro de la función
• Bloque: Variables solo accesibles dentro de bloques {}

El hoisting es el comportamiento de JavaScript de mover declaraciones al inicio de su scope antes de la ejecución del código.

// Esto funciona debido al hoisting
console.log(miVariable); // undefined
var miVariable = 'Hola';

// Esto NO funciona
console.log(miLet); // Error
let miLet = 'Hola';

Comportamiento del hoisting:

• var: Se eleva la declaración, no la inicialización
• let/const: Se elevan pero no se inicializan (Temporal Dead Zone)
• funciones: Se elevan completamente

Un closure es una función que tiene acceso a variables de su scope exterior, incluso después de que la función exterior haya terminado de ejecutarse.

function crearContador() {
    let contador = 0;
    
    return function() {
        contador++;
        return contador;
    };
}

let miContador = crearContador();
console.log(miContador()); // 1
console.log(miContador()); // 2

Características de los closures:

• Acceso a variables externas: Mantienen referencia a variables del scope padre
• Estado privado: Permiten crear variables "privadas"
• Memoria: Las variables se mantienen en memoria mientras exista la referencia

Un callback es una función que se pasa como argumento a otra función y se ejecuta después de que la función principal haya terminado.

function procesarDatos(datos, callback) {
    console.log('Procesando datos...');
    let resultado = datos.toUpperCase();
    callback(resultado);
}

function mostrarResultado(resultado) {
    console.log('Resultado:', resultado);
}

procesarDatos('hola mundo', mostrarResultado);

Usos comunes de callbacks:

• Operaciones asíncronas: Manejo de respuestas de APIs
• Eventos: Respuesta a clicks, teclas, etc.
• Filtros y mapeo: Personalización de operaciones
• Timers: Ejecución retardada

Las Promises son objetos que representan la eventual finalización (o fallo) de una operación asíncrona y su valor resultante.

let miPromise = new Promise((resolve, reject) => {
    let exito = true;
    
    if (exito) {
        resolve('Operación exitosa');
    } else {
        reject('Error en la operación');
    }
});

miPromise
    .then(resultado => console.log(resultado))
    .catch(error => console.log(error));

Estados de una Promise:

• Pending: Estado inicial, ni cumplida ni rechazada
• Fulfilled: Operación completada exitosamente
• Rejected: Operación falló

Async/await es una forma más elegante de trabajar con Promises, permitiendo escribir código asíncrono que se ve como código síncrono.

async function cargarUsuario() {
    try {
        const respuesta = await fetch('/api/usuario');
        const usuario = await respuesta.json();
        return usuario;
    } catch (error) {
        console.log('Error:', error);
    }
}

// Uso
cargarUsuario().then(usuario => {
    console.log(usuario);
});

Características de async/await:

• async: Declara una función asíncrona que retorna una Promise
• await: Pausa la ejecución hasta que la Promise se resuelve
• try/catch: Manejo de errores más natural
• Legibilidad: Código más fácil de leer y entender