JavaScript desde Cero

JavaScript es un lenguaje de programación interpretado, de alto nivel, dinámico y multi-paradigma que se ejecuta principalmente en navegadores web y servidores con Node.js.

Historia:

JavaScript fue creado por Brendan Eich en 1995 para Netscape Navigator en solo 10 días. Originalmente se llamó LiveScript, pero fue renombrado a JavaScript por motivos de marketing.

Evolución ECMAScript:

• ES1 (1997) - Primera estandarización
• ES5 (2009) - Strict mode, JSON, forEach
• ES6/ES2015 - Arrow functions, clases, módulos
• ES2020+ - Optional chaining, nullish coalescing

Instalar Node.js:

1. Descarga Node.js desde nodejs.org
2. Ejecuta el instalador
3. Verifica la instalación:

node --version
npm --version

En macOS con Homebrew:

brew install node

En Linux:

curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash -
sudo apt-get install -y nodejs

Inicializar proyecto:

npm init -y
npm install --save-dev nodemon

Variables y Tipos:

// Variables
let nombre = "Juan";      // String
const edad = 30;          // Number (inmutable)
var antiguo = "legacy";   // Var (evitar)
let activo = true;        // Boolean
let hobbies = ["leer"];   // Array
let persona = {           // Object
    nombre: "Juan",
    edad: 30
};
let nada = null;          // Null
let indefinido;           // Undefined

Estructuras de Control:

// Condicionales
if (edad >= 18) {
    console.log("Mayor de edad");
} else {
    console.log("Menor de edad");
}

// Switch
switch (dia) {
    case 1: console.log("Lunes"); break;
    default: console.log("Otro día");
}

// Bucles
for (let i = 0; i < 5; i++) {
    console.log(i);
}

while (contador < 10) {
    contador++;
}

Selección de Elementos:

// Métodos de selección
const elemento = document.getElementById('miId');
const elementos = document.querySelectorAll('.miClase');
const primero = document.querySelector('.miClase');

// Modificar contenido
elemento.textContent = 'Nuevo texto';
elemento.innerHTML = 'HTML';

// Modificar estilos
elemento.style.color = 'red';
elemento.classList.add('activo');
elemento.classList.remove('oculto');

Eventos:

// Agregar event listener
boton.addEventListener('click', (e) => {
    e.preventDefault();
    console.log('Click!');
});

// Eventos comunes
formulario.addEventListener('submit', manejarSubmit);
input.addEventListener('input', manejarInput);
window.addEventListener('load', iniciar);

LocalStorage:

// Guardar datos
localStorage.setItem('usuario', 'Juan');
localStorage.setItem('datos', JSON.stringify(objeto));

// Leer datos
const usuario = localStorage.getItem('usuario');
const datos = JSON.parse(localStorage.getItem('datos'));

// Eliminar
localStorage.removeItem('usuario');
localStorage.clear();

Arrow Functions:

// Función tradicional
function sumar(a, b) {
    return a + b;
}

// Arrow function
const sumar = (a, b) => a + b;

// Con múltiples líneas
const calcular = (a, b) => {
    const resultado = a + b;
    return resultado * 2;
};

Destructuring:

// Arrays
const [primero, segundo] = [1, 2];

// Objetos
const { nombre, edad } = persona;

// Parámetros
function mostrar({ nombre, edad }) {
    console.log(`${nombre} tiene ${edad}`);
}

Spread y Rest:

// Spread operator
const nuevoArray = [...array, 4, 5];
const nuevoObjeto = { ...objeto, prop: 'valor' };

// Rest parameters
function sumar(...numeros) {
    return numeros.reduce((a, b) => a + b);
}

Módulos ES6:

// Exportar
export const miFuncion = () => {};
export default class MiClase {}

// Importar
import { miFuncion } from './modulo.js';
import MiClase from './modulo.js';

Callbacks:

function procesarDatos(callback) {
    setTimeout(() => {
        callback('Datos procesados');
    }, 1000);
}

procesarDatos((resultado) => {
    console.log(resultado);
});

Promesas:

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

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

Async/Await:

async function obtenerDatos() {
    try {
        const respuesta = await fetch('https://api.ejemplo.com/datos');
        const datos = await respuesta.json();
        return datos;
    } catch (error) {
        console.error('Error:', error);
    }
}

Fetch API:

// GET
fetch('https://api.ejemplo.com/usuarios')
    .then(res => res.json())
    .then(data => console.log(data));

// POST
fetch('https://api.ejemplo.com/usuarios', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ nombre: 'Juan' })
});

Desarrolla una Single Page Application (SPA) completa integrando todos los conceptos aprendidos:

1. Configuración del proyecto con Vite o Webpack
2. Estructura de carpetas modular
3. Consumo de API REST con fetch/axios
4. Gestión de estado con localStorage
5. Routing básico con History API
6. Manejo de errores y loading states

Estructura sugerida:

mi-app/
├── index.html
├── js/
│   ├── main.js
│   ├── api.js
│   ├── storage.js
│   └── components/
│       ├── TaskList.js
│       └── TaskForm.js
└── css/
    └── styles.css

Métodos de Arrays:

const nums = [1, 2, 3, 4, 5];

// map - transformar
nums.map(n => n * 2); // [2, 4, 6, 8, 10]

// filter - filtrar
nums.filter(n => n > 2); // [3, 4, 5]

// reduce - acumular
nums.reduce((acc, n) => acc + n, 0); // 15

// find - encontrar
nums.find(n => n > 3); // 4

// some y every
nums.some(n => n > 4); // true
nums.every(n => n > 0); // true

Object Methods:

const persona = { nombre: 'Juan', edad: 30 };

// Keys y Values
Object.keys(persona);   // ['nombre', 'edad']
Object.values(persona); // ['Juan', 30]
Object.entries(persona); // [['nombre', 'Juan'], ['edad', 30]]

// Destructuring con objetos
const { nombre, edad } = persona;

// Spread operator
const copia = { ...persona, ciudad: 'Madrid' };

Optional Chaining:

// Antes
const ciudad = usuario && usuario.direccion && usuario.direccion.ciudad;

// Con optional chaining
const ciudad = usuario?.direccion?.ciudad;

Conceptos Fundamentales:

// Funciones puras
const sumar = (a, b) => a + b;

// Inmutabilidad
const agregarItem = (array, item) => [...array, item];

// Composición de funciones
const compose = (...fns) => x => 
    fns.reduceRight((v, f) => f(v), x);

Currying:

// Función currificada
const multiplicar = a => b => a * b;
const porDos = multiplicar(2);
porDos(5); // 10

// Uso práctico
const filtrarYOrdenar = predicado => 
                  ordenar => 
                  array => 
                  array.filter(predicado).sort(ordenar);

const positivoYAsc = filtrarYOrdenar(n => n > 0)(asc);
positivoYAsc([-1, 3, 2, -5]); // [2, 3]

Higher-Order Functions:

// Función que retorna función
const crearSaludo = saludo => nombre => `${saludo}, ${nombre}!`;

const saludarHola = crearSaludo('Hola');
saludarHola('Juan'); // "Hola, Juan!"

Clases Básicas:

class Persona {
    constructor(nombre, edad) {
        this.nombre = nombre;
        this.edad = edad;
    }
    
    saludar() {
        return `Hola, soy ${this.nombre}`;
    }
    
    static crear(nombre) {
        return new Persona(nombre, 0);
    }
}

const juan = new Persona('Juan', 30);
juan.saludar(); // "Hola, soy Juan"

Herencia:

class Estudiante extends Persona {
    constructor(nombre, edad, grado) {
        super(nombre, edad);
        this.grado = grado;
    }
    
    saludar() {
        return `${super.saludar()} y estoy en ${this.grado}`;
    }
}

const maria = new Estudiante('María', 20, '3er año');

Getters y Setters:

class Usuario {
    #password; // Campo privado
    
    constructor(email) {
        this.email = email;
        this.#password = '';
    }
    
    set password(p) {
        this.#password = hash(p);
    }
    
    get password() {
        return '********';
    }
}

Console Methods:

console.log('Info');
console.warn('Warning');
console.error('Error');
console.table([{a:1}, {a:2}]);
console.time('tarea');
// código
console.timeEnd('tarea');
console.assert(condición, 'Mensaje');

Debugging:

debugger; // Punto de quiebre en código

// En Chrome DevTools
// step over - siguiente línea
// step into - entrar en función
// step out - salir de función

Testing con Jest:

// suma.js
export const sumar = (a, b) => a + b;

// suma.test.js
import { sumar } from './suma';

test('sumar 1 + 2 es 3', () => {
    expect(sumar(1, 2)).toBe(3);
});

ES Modules:

// utils.js
export const API_URL = 'https://api.com';
export function fetchData() { ... }
export default function() { ... }

// index.js
import miDefault, { API_URL, fetchData } from './utils.js';

CommonJS (Node.js):

// utils.js
const utilidades = { ... };
module.exports = utilidades;

// index.js
const utils = require('./utils.js');

Vite (Bundler Moderno):

# Crear proyecto
npm create vite@latest mi-app -- --template vanilla

# Ejecutar desarrollo
npm run dev

# Build producción
npm run build

npm Scripts:

// package.json
{
    "scripts": {
        "dev": "vite",
        "build": "vite build",
        "preview": "vite preview",
        "test": "jest"
    }
}