⚡ 1.8 · JavaScript ES6+: el lenguaje que mueve la web

🎯 Objetivo del tema

🗺️ Mapa del tema

JavaScript nació en 1995 como un lenguaje de 10 días para hacer formularios dinámicos. Hoy es el lenguaje más usado del mundo, presente en navegadores, servidores (Node.js), apps móviles (React Native), incluso en bases de datos (MongoDB). En 2015 recibió su mayor actualización: ES6, que modernizó el lenguaje. Desde entonces, cada año salen mejoras. En este tema dominarás ES6+ como base para todo lo demás.

1.8.1 Historia de JavaScript: de 10 días a estándar

En mayo de 1995, Brendan Eich, ingeniero de Netscape, creó JavaScript en 10 días. Su objetivo original: validar formularios y agregar interactividad básica a las páginas. No estaba pensado para ser un lenguaje serio. La ironía: 30 años después, es el lenguaje más usado del mundo.

Lo que hoy llamamos 'JavaScript moderno' es realmente ES6+ (ES2015 en adelante). Lo que se enseña en muchos cursos viejos (con var, function(), callbacks) es JavaScript pre-2015, que ya no se usa. Si ves código con 'var' en tutoriales de 2024, huye: es código de museo.

1.8.2 Variables: let, const, y el ocaso de var

Antes de ES6, solo existía var. Era problemático por su scope global y su comportamiento de hoisting. ES6 introdujo let y const, que respetan el block scope (el bloque { } donde se declaran). Regla de oro: usa const por defecto, let solo cuando necesites reasignar, NUNCA var.

// MAL: var tiene function scope, se 'escapa' de los bloques
function ejemploVar() {
  if (true) {
    var x = 10;  // declarada dentro del if
  }
  console.log(x);  // 10 — ¡se escapó del if!
}

// BIEN: let respeta el block scope
function ejemploLet() {
  if (true) {
    let x = 10;  // declarada dentro del if
  }
  console.log(x);  // ReferenceError — x no existe fuera del if
}

var vs let: el problema del scope

const con objetos y arrays: no es 'constante' del todo

const significa que la VARIABLE no puede reasignarse, pero el OBJETO al que apunta sí puede mutar. Es un detalle que confunde mucho al principio.

const usuario = { nombre: 'Ana', edad: 25 };
usuario.edad = 26;  // ✅ válido: mutaste la propiedad
usuario = { nombre: 'Luis' };  // ❌ TypeError: no puedes reasignar la variable

const lista = [1, 2, 3];
lista.push(4);     // ✅ válido: [1, 2, 3, 4]
lista = [];         // ❌ TypeError: no puedes reasignar la variable

const no hace inmutable al objeto, solo a la referencia

1.8.3 Funciones modernas: arrow functions

Las arrow functions (funciones flecha) son la forma moderna de escribir funciones. Más cortas, más legibles, y con un this léxico (que respeta el contexto donde se definen). Hay casos donde NO conviene usarlas, pero en el 80% de los casos son la mejor opción.

Las 3 formas de escribir una función

// 1. Función tradicional (museo)
function suma(a, b) {
  return a + b;
}

// 2. Función tradicional como expresión (también museo)
const suma = function(a, b) {
  return a + b;
};

// 3. Arrow function (moderna) — la que usarás el 90% del tiempo
const suma = (a, b) => a + b;  // return implícito si es una sola expresión

// Con cuerpo de varias líneas, usas {} y return explícito
const sumaCompleta = (a, b) => {
  const resultado = a + b;
  console.log(`Sumando ${a} + ${b}`);
  return resultado;
};

Función tradicional vs arrow function

Cuándo NO usar arrow functions

• Métodos de objetos que usan 'this' (el this de arrow no es el objeto).
• Constructores de clases (las clases usan métodos normales).
• Funciones que necesitan 'arguments' (las arrow no tienen su propio arguments).
• Cuando el nombre de la función importa para el stack trace de errores.

1.8.4 Template literals y desestructuración

Template literals y desestructuración son dos de las características más queridas de ES6. La primera elimina la concatenación fea de strings. La segunda te permite extraer valores de arrays y objetos en una sola línea.

Template literals: strings con superpoderes

// ANTES: concatenación fea y propensa a errores
const saludo = 'Hola ' + nombre + ', tienes ' + edad + ' años. ' +
             'Tu ciudad es ' + ciudad + '.';

// AHORA: template literals con backticks
const saludo = `Hola ${nombre}, tienes ${edad} años. Tu ciudad es ${ciudad}.`;

// Bonus: puedes hacer expresiones dentro de ${}
const mensaje = `El doble de 5 es ${5 * 2} y la próxima edad es ${edad + 1}`;

// Bonus 2: strings multi-línea sin concatenar
const html = `
  <div>
    <h1>${titulo}</h1>
    <p>${descripcion}</p>
  </div>
`;

Template literals vs concatenación

Desestructuración: extraer valores de un objeto o array

// ANTES: acceder a propiedades una por una
const usuario = { nombre: 'Ana', edad: 25, email: 'ana@mail.com' };
const nombre = usuario.nombre;
const edad = usuario.edad;

// AHORA: desestructuración en una línea
const { nombre, edad, email } = usuario;
console.log(nombre);  // 'Ana'
console.log(edad);    // 25

// Con arrays (por posición)
const coordenadas = [10, 20, 30];
const [x, y, z] = coordenadas;
console.log(x);  // 10

// Con valores por defecto (si la propiedad no existe)
const { nombre, rol = 'invitado' } = usuario;
console.log(rol);  // 'invitado' si no está definido

Desestructuración de objetos y arrays

1.8.5 Arrays y objetos: map, filter, reduce, spread

Los 4 métodos de array más importantes de JavaScript moderno. Combinados, reemplazan al 90% de los bucles for que veías en código viejo. Cada uno hace UNA cosa y la hace bien.

Ejemplo completo: procesar lista de usuarios

const usuarios = [
  { nombre: 'Ana', edad: 25, activo: true },
  { nombre: 'Luis', edad: 17, activo: true },
  { nombre: 'Sofía', edad: 30, activo: false },
  { nombre: 'Pedro', edad: 19, activo: true },
];

// 1. Obtener solo los nombres de usuarios activos mayores de edad
const nombres = usuarios
  .filter(u => u.activo)              // solo activos
  .filter(u => u.edad >= 18)          // solo mayores
  .map(u => u.nombre);                // solo el nombre
// Resultado: ['Ana', 'Pedro']

// 2. Calcular la edad promedio
const edadPromedio = usuarios.reduce((sum, u) => sum + u.edad, 0) / usuarios.length;
// Resultado: 22.75

// 3. spread: agregar un nuevo usuario sin mutar el original
const nuevosUsuarios = [...usuarios, { nombre: 'María', edad: 28, activo: true }];

filter + map + reduce + spread en acción

1.8.6 Módulos ES6: import y export

Antes de ES6, todo el código JavaScript de una página vivía en un solo archivo (o se cargaban con tags <script> múltiples que compartían el scope global, causando caos). Los módulos ES6 resolvieron esto: cada archivo es un módulo con su propio scope, y exporta/importa lo que necesita.

La forma moderna de organizar código

// archivo: matematicas.js
export const PI = 3.14159;
export const suma = (a, b) => a + b;
export const resta = (a, b) => a - b;

// export default: solo UNO por archivo, el principal
export default class Calculadora {
  static sumar(a, b) { return a + b; }
  static restar(a, b) { return a - b; }
}

Exportar desde matematicas.js

// archivo: app.js — usando las funciones de matematicas.js
import Calculadora, { PI, suma, resta } from './matematicas.js';

console.log(PI);             // 3.14159
console.log(suma(5, 3));     // 8
console.log(resta(10, 4));   // 6
console.log(Calculadora.sumar(2, 2));  // 4

Importar en app.js

📚 Contenido ampliado

Material adicional, referencias externas verificadas y ejemplos extendidos.