Modulo 01. Introduccion al ecosistema JavaScript

Objetivo del modulo

Entender que es JavaScript, donde se ejecuta, como se relaciona con el navegador y con Node.js, y por que TypeScript aparece como capa complementaria en proyectos modernos.

Resultados esperados

• Diferenciar lenguaje, runtime y herramientas del ecosistema.
• Explicar la diferencia entre navegador y Node.js.
• Conocer el papel de ECMAScript, V8, npm y TypeScript.
• Preparar un entorno minimo para empezar a practicar.

Desarrollo teorico

JavaScript es un lenguaje de programacion interpretado y estandarizado por ECMAScript. Durante años se asocio casi exclusivamente al navegador, pero hoy se ejecuta tambien en servidores, herramientas de build, scripts de automatizacion e incluso aplicaciones de escritorio. Esa evolucion explica por que hablar solo de "JavaScript" ya no basta: hay que entender en que runtime se esta ejecutando.

En el navegador, JavaScript vive junto a HTML y CSS. El navegador ofrece APIs como document, window, localStorage, fetch, history o eventos del DOM. En Node.js, en cambio, no existe el DOM; lo que existe es acceso al sistema de archivos, procesos, red, variables de entorno y un modelo pensado para backend y scripting. Ambos comparten lenguaje, pero no contexto. Veamos la diferencia concreta con codigo:

// En el navegador - acceso al DOM
const titulo = document.querySelector("h1");
titulo.textContent = "Hola desde el navegador";
console.log(window.location.href);
localStorage.setItem("usuario", "admin");

// En Node.js - acceso al sistema
const fs = require("fs");
const os = require("os");
console.log(`Hostname: ${os.hostname()}`);
console.log(`Plataforma: ${os.platform()}`);
const contenido = fs.readFileSync("config.json", "utf-8");
console.log(contenido);

Intentar usar document en Node.js o require("fs") en el navegador produce errores. Esa frontera es una de las primeras cosas que hay que interiorizar.

Otra pieza esencial es ECMAScript, la especificacion que define el lenguaje. Cuando se habla de ES6, ES2015 o versiones posteriores, se alude a evoluciones del estandar: let, const, arrow functions, clases, modulos, promesas y mucho mas. El motor JavaScript del navegador o de Node.js implementa ese estandar. Uno de los motores mas conocidos es V8, usado por Chrome y por Node.js. Veamos las diferencias entre JavaScript clasico y moderno:

// ES5 (antiguo) - var, function, concatenacion
var nombre = "Ana";
var saludar = function(n) {
    return "Hola, " + n;
};

// ES6+ (moderno) - const/let, arrow, template literals
const nombre = "Ana";
const saludar = (n) => `Hola, ${n}`;

// Desestructuracion
const usuario = { nombre: "Ana", rol: "admin", departamento: "IT" };
const { nombre: nombreUsuario, rol } = usuario;

// Modulos ES6
import { validarEmail } from "./validaciones.js";
export function crearUsuario(datos) { /* ... */ }

El ecosistema moderno incluye tambien un gestor de paquetes: npm. Aunque mucha gente lo asocia a "instalar librerias", su papel real es mayor. npm permite declarar dependencias, scripts de proyecto y versionado de paquetes. La pieza central es package.json:

{
  "name": "mi-proyecto",
  "version": "1.0.0",
  "scripts": {
    "dev": "node app.js",
    "test": "node --test tests/",
    "lint": "eslint src/"
  },
  "dependencies": {
    "express": "^4.18.0"
  },
  "devDependencies": {
    "eslint": "^8.56.0"
  }
}

Los scripts definidos en package.json se ejecutan con npm run <nombre>. Eso estandariza como se arranca, prueba y mantiene un proyecto. Flujo basico de inicio:

# Inicializar proyecto
mkdir mi-app && cd mi-app
npm init -y

# Instalar una dependencia
npm install express

# Instalar herramienta de desarrollo
npm install --save-dev eslint

# Ejecutar un script
npm run dev

TypeScript aparece porque JavaScript, siendo muy flexible, deja muchos errores para tiempo de ejecucion. Si una funcion espera un objeto con email y activo, pero recibe una cadena, el fallo se descubre tarde. TypeScript añade un sistema de tipos sobre JavaScript:

// TypeScript: los errores se detectan antes de ejecutar
interface Usuario {
    nombre: string;
    email: string;
    activo: boolean;
}

function mostrarUsuario(usuario: Usuario): string {
    return `${usuario.nombre} (${usuario.email})`;
}

// Error en compilacion, no en runtime:
// mostrarUsuario("Ana");  // Argument of type 'string' is not assignable
mostrarUsuario({ nombre: "Ana", email: "ana@test.com", activo: true }); // OK

TypeScript no cambia el lenguaje que corre finalmente en el browser o en Node; transpila a JavaScript. Su valor no es "hacer JavaScript mas dificil", sino hacer grandes partes del codigo mas predecibles.

Un flujo minimo razonable seria:

1. Instalar Node.js.
2. Comprobar version con node --version y npm --version.
3. Crear una carpeta de proyecto.
4. Ejecutar un archivo app.js con node app.js.
5. Abrir la consola del navegador y comparar el entorno disponible.

// app.js - primer script para Node.js
const nombre = process.argv[2] || "mundo";
console.log(`Hola, ${nombre}!`);
console.log(`Node.js version: ${process.version}`);
console.log(`Directorio actual: ${process.cwd()}`);

node app.js Ana
# Hola, Ana!
# Node.js version: v20.11.0
# Directorio actual: /home/user/mi-proyecto

Esa comparacion temprana evita dos confusiones habituales: pensar que document existe en Node o que require("fs") puede usarse en un script del navegador sin build ni bundling.

Contenido ampliado

• Diferencia entre libreria, framework y runtime.
• Para que sirve package.json.
• Relacion entre TypeScript y build/transpilacion.

Puntos clave

• JavaScript es el lenguaje; navegador y Node.js son entornos distintos.
• ECMAScript define el lenguaje, pero no las APIs del navegador.
• npm es una pieza central del flujo de trabajo moderno.
• TypeScript complementa JavaScript con tipos y mejor tooling.

Checklist operativa

• Instalar Node.js y verificar versiones.
• Crear un primer archivo .js ejecutable.
• Abrir consola del navegador y comparar contexto.
• Identificar que APIs son del browser y cuales de Node.

Errores frecuentes

• Mezclar APIs de navegador y Node.js.
• Pensar que npm solo sirve para "bajar librerias".
• Confundir JavaScript con TypeScript como si fueran runtimes distintos.
• Empezar a usar herramientas sin entender que problema resuelven.

Practica sugerida

Crea un archivo app.js, ejecutalo con Node, y luego prueba expresiones similares en la consola del navegador anotando diferencias de APIs disponibles.

Preguntas de autoevaluacion

• Que diferencia hay entre lenguaje y runtime.
• Por que document existe en el navegador pero no en Node.js.
• Que problema intenta resolver TypeScript.

Cierre

Antes de aprender sintaxis avanzada conviene situar el mapa: JavaScript es el lenguaje, pero el valor profesional aparece cuando entiendes donde se ejecuta y con que herramientas trabaja.

Modulo 02. Variables, tipos y control de flujo

Objetivo del modulo

Modelar datos y reglas basicas en JavaScript usando variables modernas, tipos fundamentales y estructuras de control claras.

Resultados esperados

• Diferenciar let, const y var.
• Reconocer tipos primitivos y referencias.
• Usar condicionales, comparaciones y bucles comunes.
• Evitar errores derivados de coercion y ambitos confusos.

Desarrollo teorico

JavaScript tiene fama de flexible y, a veces, de permisivo en exceso. Esa flexibilidad explica por que el lenguaje es productivo para prototipos, pero tambien por que el principiante debe aprender pronto a ser disciplinado. Uno de los primeros ejemplos es la declaracion de variables: var, let y const no son equivalentes. var tiene ambito de funcion y comportamientos historicos como hoisting que pueden generar codigo confuso. En desarrollo moderno, la regla general es usar const por defecto y let solo cuando el valor deba reasignarse.

// const: valor que no se reasigna (preferido por defecto)
const MAX_REINTENTOS = 3;
const API_URL = "https://api.ejemplo.com/v1";

// let: cuando el valor cambia
let intentos = 0;
let usuarioActual = null;

// var: evitar en codigo moderno
// var nombre = "Ana";  // ambito de funcion, hoisting confuso

// CUIDADO: const no congela objetos
const config = { puerto: 3000, debug: true };
config.debug = false;  // valido, la referencia no cambio
// config = {};         // ERROR: reasignacion no permitida

Los tipos primitivos mas comunes son string, number, boolean, undefined, null, bigint y symbol. A ellos se suma la categoria de objetos, arrays y funciones, que son referencias. Un punto especialmente importante es que number cubre enteros y decimales:

const edad = 30;          // number (entero)
const precio = 19.99;     // number (decimal)
const nombre = "Ana";     // string
const activo = true;      // boolean
let resultado;            // undefined (no asignado)
const vacio = null;       // null (ausencia intencional)

// typeof para inspeccionar tipos
console.log(typeof edad);      // "number"
console.log(typeof nombre);    // "string"
console.log(typeof activo);    // "boolean"
console.log(typeof resultado); // "undefined"
console.log(typeof vacio);     // "object" (quirk historico de JS)

La coercion de tipos es uno de los aspectos mas delicados de JavaScript. El lenguaje convierte valores automaticamente en muchos contextos:

// Coercion sorprendente
console.log("5" + 1);    // "51" (concatenacion de string)
console.log("5" - 1);    // 4   (resta numerica)
console.log("5" == 5);   // true (coercion con ==)
console.log("5" === 5);  // false (sin coercion con ===)

// Conversiones explicitas (preferido)
const entradaUsuario = "42";
const cantidad = Number(entradaUsuario);  // 42
const texto = String(cantidad);            // "42"
const esMayor = Boolean(cantidad);         // true

// parseInt y parseFloat para parsing mas controlado
const puerto = parseInt("3000abc", 10);  // 3000
const ratio = parseFloat("0.85");         // 0.85

En codigo profesional, la recomendacion es preferir igualdad estricta === frente a ==, salvo que tengas una razon muy concreta para aceptar coercion. Veamos un ejemplo completo de validacion:

function validarUsuario(usuario) {
    const errores = [];

    if (typeof usuario.nombre !== "string" || usuario.nombre.trim() === "") {
        errores.push("nombre es obligatorio");
    }
    if (typeof usuario.edad !== "number" || usuario.edad < 0) {
        errores.push("edad debe ser un numero positivo");
    }
    if (typeof usuario.email !== "string" || !usuario.email.includes("@")) {
        errores.push("email invalido");
    }

    return { valido: errores.length === 0, errores };
}

const resultado = validarUsuario({ nombre: "Ana", edad: 25, email: "ana@test.com" });
console.log(resultado);  // { valido: true, errores: [] }

const resultado2 = validarUsuario({ nombre: "", edad: -5, email: "sin-arroba" });
console.log(resultado2);  // { valido: false, errores: [...] }

El control de flujo se construye con if, else if, else, switch, for, while y recorridos sobre arrays. Igual que en Python, la dificultad real esta en expresar reglas legibles:

// Condicionales con variables intermedias para claridad
function determinarAcceso(usuario) {
    const estaActivo = usuario.activo === true;
    const esAdmin = usuario.rol === "admin";
    const noEstaBloqueado = !usuario.bloqueado;

    if (!estaActivo || !noEstaBloqueado) {
        return "denegado";
    }
    if (esAdmin) {
        return "acceso_total";
    }
    return "acceso_limitado";
}

El operador ternario es util para asignaciones condicionales simples, pero no debe abusarse:

// Ternario claro
const etiqueta = usuario.activo ? "Activo" : "Inactivo";

// Nullish coalescing (??) para valores por defecto
const puerto = config.puerto ?? 3000;  // usa 3000 solo si puerto es null/undefined

// Optional chaining (?.) para acceso seguro a propiedades
const ciudad = usuario?.direccion?.ciudad ?? "No especificada";

Los bucles modernos en JavaScript incluyen for...of para iterar valores y for...in para claves de objetos:

// for...of para arrays (preferido sobre for clasico)
const servidores = ["web-01", "db-01", "app-01"];
for (const servidor of servidores) {
    console.log(`Verificando: ${servidor}`);
}

// for...in para propiedades de objeto
const config = { host: "localhost", puerto: 3000, debug: true };
for (const clave in config) {
    console.log(`${clave}: ${config[clave]}`);
}

// while con condicion de salida clara
let intentos = 0;
while (intentos < MAX_REINTENTOS) {
    intentos++;
    console.log(`Intento ${intentos} de ${MAX_REINTENTOS}`);
    // si tiene exito, break
}

Tambien conviene entender la diferencia entre falsy y truthy. Valores como 0, "", null, undefined, false y NaN se evaluan como falsos. Eso permite escribir expresiones compactas, pero puede esconder bugs si no distingues "dato vacio" de "dato ausente".

Contenido ampliado

• Hoisting y por que var se evita en codigo moderno.
• Comparaciones estrictas y no estrictas.
• Cortocircuito con &&, || y ??.

Puntos clave

• const y let son la base del JavaScript moderno.
• La coercion automatica existe y hay que controlarla.
• === evita comparaciones ambiguas.
• El flujo debe reflejar reglas comprensibles, no acertijos.

Checklist operativa

• Usar const por defecto.
• Revisar comparaciones para evitar coercion accidental.
• Nombrar condiciones complejas antes de evaluarlas.
• Distinguir null y undefined segun el contexto.

Errores frecuentes

• Seguir usando var por costumbre.
• Confiar en == sin entender conversiones implicitas.
• Meter demasiada logica en un mismo if.
• Tratar todos los valores falsy como si significaran lo mismo.

Practica sugerida

Escribe un script que reciba un objeto usuario, valide campos requeridos y clasifique su acceso segun rol, estado y antigüedad.

Preguntas de autoevaluacion

• Que diferencia funcional hay entre const y let.
• Por que === suele ser mejor que ==.
• Que riesgo tiene apoyarse demasiado en truthy/falsy.

Cierre

Variables, tipos y flujo en JavaScript no son triviales; dominarlos evita una gran parte de los errores silenciosos que aparecen en aplicaciones reales.