ES6 (ECMAScript 2015) fue la mayor actualización de JavaScript en su historia. Introdujo una sintaxis más moderna, patrones más limpios y herramientas que hoy usamos a diario. En este artículo repasamos las features más importantes con ejemplos prácticos.
\nAntes de ES6, solo teníamos var para declarar variables. El problema era que var tiene scope de función, no de bloque, lo que causaba bugs inesperados.
// ❌ var — scope de función, se puede redeclarar\nvar nombre = "Ana";\nvar nombre = "Luis"; // No da error\n\n// ✅ let — scope de bloque, reasignable\nlet edad = 25;\nedad = 26; // OK\n\n// ✅ const — scope de bloque, no reasignable\nconst PI = 3.14159;\n// PI = 3; // ❌ TypeError: Assignment to constant variable\n | Característica | \nvar | \nlet | \nconst | \n
|---|---|---|---|
| Scope | \nFunción | \nBloque | \nBloque | \n
| Redeclarable | \nSí | \nNo | \nNo | \n
| Reasignable | \nSí | \nSí | \nNo | \n
| Hoisting | \nSí (inicializado como undefined) | \nSí (temporal dead zone) | \nSí (temporal dead zone) | \n
\n\nRegla general: Usa
\nconstpor defecto. Usaletsolo cuando necesites reasignar. Nunca usesvar.
Las arrow functions son una forma más concisa de escribir funciones. Además, no crean su propio this, lo que resuelve muchos problemas clásicos con callbacks.
// Función tradicional\nfunction sumar(a, b) {\n return a + b;\n}\n\n// Arrow function\nconst sumar = (a, b) => a + b;\n\n// Con un solo parámetro, los paréntesis son opcionales\nconst doble = x => x * 2;\n\n// Con cuerpo de múltiples líneas\nconst calcular = (a, b) => {\n const resultado = a * b;\n return resultado + 10;\n};\n this resuelto// ❌ Antes de ES6 — this se pierde en callbacks\nfunction Contador() {\n this.count = 0;\n setInterval(function () {\n this.count++; // 'this' NO es el Contador, es window/undefined\n }, 1000);\n}\n\n// ✅ Con arrow function — this se hereda del scope padre\nfunction Contador() {\n this.count = 0;\n setInterval(() => {\n this.count++; // 'this' SÍ es el Contador\n }, 1000);\n}\n Los template literals permiten crear strings con interpolación de variables y multilínea usando backticks.
\nconst nombre = "Carlos";\nconst edad = 30;\n\n// ❌ Concatenación clásica\nconst saludo = "Hola, me llamo " + nombre + " y tengo " + edad + " años.";\n\n// ✅ Template literal\nconst saludo = `Hola, me llamo ${nombre} y tengo ${edad} años.`;\n\n// Multilínea\nconst html = `\n <div class="card">\n <h2>${nombre}</h2>\n <p>Edad: ${edad}</p>\n </div>\n`;\n\n// Expresiones dentro de ${}\nconst mensaje = `En 5 años tendré ${edad + 5} años.`;\n El destructuring permite extraer valores de arrays y objetos en variables individuales de forma directa.
\nconst usuario = {\n nombre: "María",\n edad: 28,\n ciudad: "Madrid",\n trabajo: "Desarrolladora"\n};\n\n// ❌ Sin destructuring\nconst nombre = usuario.nombre;\nconst edad = usuario.edad;\n\n// ✅ Con destructuring\nconst { nombre, edad, ciudad } = usuario;\n\n// Renombrar variables\nconst { nombre: userName, edad: userAge } = usuario;\n\n// Valores por defecto\nconst { nombre, pais = "España" } = usuario;\n\n// Destructuring anidado\nconst empresa = {\n datos: {\n nombre: "TechCorp",\n direccion: { ciudad: "Barcelona", cp: "08001" }\n }\n};\n\nconst { datos: { direccion: { ciudad } } } = empresa;\n const colores = ["rojo", "verde", "azul", "amarillo"];\n\n// Extraer elementos\nconst [primero, segundo] = colores;\n// primero → "rojo", segundo → "verde"\n\n// Saltar elementos\nconst [, , tercero] = colores;\n// tercero → "azul"\n\n// Rest operator\nconst [cabeza, ...resto] = colores;\n// cabeza → "rojo", resto → ["verde", "azul", "amarillo"]\n\n// Intercambiar variables\nlet a = 1, b = 2;\n[a, b] = [b, a];\n// a → 2, b → 1\n Los tres puntos (...) sirven para dos cosas: spread (expandir) y rest (recoger).
// SPREAD — expandir arrays/objetos\n\nconst nums = [1, 2, 3];\nconst masNums = [...nums, 4, 5]; // [1, 2, 3, 4, 5]\n\n// Copiar un array (shallow copy)\nconst copia = [...nums];\n\n// Merge de objetos\nconst base = { color: "azul", tamaño: "M" };\nconst extra = { tamaño: "L", peso: "200g" };\nconst merged = { ...base, ...extra };\n// { color: "azul", tamaño: "L", peso: "200g" }\n\n// REST — recoger argumentos\nfunction sumarTodos(...numeros) {\n return numeros.reduce((acc, n) => acc + n, 0);\n}\n\nsumarTodos(1, 2, 3, 4); // 10\n Las promesas son el mecanismo estándar para manejar operaciones asíncronas en JavaScript.
\n// Crear una promesa\nconst obtenerDatos = () => {\n return new Promise((resolve, reject) => {\n setTimeout(() => {\n const datos = { id: 1, nombre: "Producto" };\n resolve(datos);\n // reject(new Error("Fallo al obtener datos"));\n }, 1000);\n });\n};\n\n// Consumir la promesa\nobtenerDatos()\n .then(datos => console.log(datos))\n .catch(error => console.error(error))\n .finally(() => console.log("Operación completada"));\n // Async/await hace que el código asíncrono parezca síncrono\nasync function cargarUsuario(id) {\n try {\n const response = await fetch(`/api/usuarios/${id}`);\n const usuario = await response.json();\n return usuario;\n } catch (error) {\n console.error("Error cargando usuario:", error);\n }\n}\n\n// Ejecutar varias promesas en paralelo\nasync function cargarTodo() {\n const [usuarios, productos] = await Promise.all([\n fetch("/api/usuarios").then(r => r.json()),\n fetch("/api/productos").then(r => r.json())\n ]);\n\n console.log(usuarios, productos);\n}\n ES6 introdujo un sistema de módulos nativo para JavaScript, permitiendo organizar el código en archivos separados.
\n// 📁 utils/math.js\nexport const PI = 3.14159;\n\nexport function sumar(a, b) {\n return a + b;\n}\n\nexport default function multiplicar(a, b) {\n return a * b;\n}\n\n// 📁 app.js\nimport multiplicar, { PI, sumar } from "./utils/math.js";\n\nconsole.log(sumar(2, 3)); // 5\nconsole.log(multiplicar(4, 5)); // 20\nconsole.log(PI); // 3.14159\n // Named exports — puedes tener varios por archivo\nexport const nombre = "valor";\nexport function fn() {}\n\n// Default export — solo uno por archivo\nexport default function principal() {}\n\n// Import con alias\nimport { sumar as add } from "./math.js";\n\n// Import todo el módulo\nimport * as MathUtils from "./math.js";\nMathUtils.sumar(1, 2);\n ES6 introdujo la sintaxis class como azúcar sintáctico sobre el sistema de prototipos de JavaScript.
class Animal {\n constructor(nombre, sonido) {\n this.nombre = nombre;\n this.sonido = sonido;\n }\n\n hablar() {\n return `${this.nombre} hace ${this.sonido}`;\n }\n\n // Getter\n get info() {\n return `${this.nombre} (${this.sonido})`;\n }\n\n // Método estático\n static crearPerro() {\n return new Animal("Perro", "Guau");\n }\n}\n\n// Herencia\nclass Gato extends Animal {\n constructor(nombre, color) {\n super(nombre, "Miau");\n this.color = color;\n }\n\n hablar() {\n return `${super.hablar()} 🐱`;\n }\n}\n\nconst michi = new Gato("Luna", "negro");\nmichi.hablar(); // "Luna hace Miau 🐱"\n // Map — diccionario con claves de cualquier tipo\nconst mapa = new Map();\nmapa.set("nombre", "Ana");\nmapa.set(42, "la respuesta");\nmapa.set(true, "booleano como clave");\n\nmapa.get("nombre"); // "Ana"\nmapa.size; // 3\n\n// Set — colección de valores únicos\nconst unicos = new Set([1, 2, 2, 3, 3, 3]);\n// Set {1, 2, 3}\n\nunicos.add(4);\nunicos.has(2); // true\nunicos.delete(1);\n // Symbol — identificador único e inmutable\nconst id = Symbol("id");\nconst usuario = {\n [id]: 123,\n nombre: "Pedro"\n};\n\nusuario[id]; // 123\n// El símbolo no aparece en for...in ni Object.keys()\n function crearUsuario(nombre, rol = "usuario", activo = true) {\n return { nombre, rol, activo };\n}\n\ncrearUsuario("Ana"); // { nombre: "Ana", rol: "usuario", activo: true }\ncrearUsuario("Luis", "admin"); // { nombre: "Luis", rol: "admin", activo: true }\n const nombre = "Sara";\nconst edad = 25;\n\n// ❌ Antes\nconst persona = { nombre: nombre, edad: edad };\n\n// ✅ ES6 shorthand\nconst persona = { nombre, edad };\n\n// Métodos shorthand\nconst calc = {\n sumar(a, b) { return a + b; },\n restar(a, b) { return a - b; }\n};\n ES6 transformó JavaScript de un lenguaje con muchas limitaciones a uno moderno y expresivo. Estas features no son solo azúcar sintáctico — cambian la forma en la que estructuramos, organizamos y pensamos nuestro código.
\nSi aún no estás usando todas estas características, el mejor momento para empezar es ahora. La mayoría de navegadores modernos y Node.js las soportan nativamente, así que no hay excusas.
\n¡Happy coding!
","wordCount":{"words":336},"frontmatter":{"title":"Guía esencial de ES6: Las features que transformaron JavaScript","date":"March 21, 2026","description":"Descubre las características más importantes de ECMAScript 2015 (ES6) que revolucionaron JavaScript: arrow functions, destructuring, template literals, promesas, módulos y mucho más.","lang":"es"},"tableOfContents":"