Características de JavaScript ES6
Una guía práctica de JavaScript ES6 (ECMAScript 2015): let y const, funciones flecha, plantillas de cadena de texto, desestructuración, clases, módulos, promesas y más.
ECMAScript 6 (ES6) es una actualización significativa del lenguaje JavaScript que introdujo muchas funcionalidades nuevas, haciendo que JavaScript sea más potente y eficiente. Esta guía ofrece una exploración detallada de ES6, con explicaciones completas y múltiples ejemplos de código para ayudarte a dominar estas nuevas capacidades.
Introducción a ES6
ES6, también conocido como ECMAScript 2015, trajo muchas mejoras y funcionalidades nuevas a JavaScript. ECMAScript es el estándar oficial que implementa JavaScript, y ES6 fue su mayor revisión desde 1999. Estos cambios hicieron que el lenguaje fuera más moderno y más fácil de usar, mejorando tanto la legibilidad como el mantenimiento.
Esta guía recorre las funcionalidades que usarás con más frecuencia:
- Declaraciones de variables —
letyconst - Funciones — funciones flecha y parámetros predeterminados
- Cadenas de texto — plantillas de cadena de texto
- Trabajo con datos — desestructuración, literales de objeto mejorados, rest/spread
- Código asíncrono — promesas
- Código orientado a objetos — clases y módulos
- Nuevas colecciones y primitivos —
Map,Set,WeakMap,WeakSet,Symbol, iteradores, generadores y proxies
Hoy en día, todos los navegadores modernos y Node.js son compatibles con ES6 de forma nativa, por lo que puedes usar estas funcionalidades sin ningún paso de compilación. Cada ejemplo a continuación es ejecutable—edítalo y pulsa ejecutar para experimentar.
Let y Const
Uno de los cambios más notables en ES6 es la introducción de let y const para la declaración de variables. Antes de ES6, la única opción era var, que tiene ámbito de función y se eleva (hoisting) de una manera que a menudo produce errores sorprendentes. let y const tienen ámbito de bloque y se comportan de forma más predecible, razón por la cual el código moderno rara vez usa var.
Let
La palabra clave let te permite declarar variables cuyo ámbito está limitado al bloque, la sentencia o la expresión en la que se usan.
En el ejemplo anterior, la x declarada dentro del bloque if es una variable distinta de la x declarada fuera. Esto demuestra el ámbito de bloque que proporciona let. Con var, ambas asignaciones se referirían a la misma variable, y el console.log exterior imprimiría 20.
let y const también están sujetos a la zona muerta temporal (TDZ): la variable existe desde el inicio del bloque, pero no se puede leer ni asignar hasta que se ejecuta su declaración. Referenciarla antes lanza un ReferenceError, lo que detecta errores tipográficos que var convertiría silenciosamente en undefined.
Const
La palabra clave const se usa para declarar variables cuyos valores no están destinados a cambiar. Tiene ámbito de bloque, igual que let.
En este ejemplo, intentar reasignar un valor a y produce un error porque const declara una constante cuyo valor no se puede cambiar.
Un punto común de confusión: const impide la reasignación del enlace, no la mutación del valor. Un objeto o array declarado con const puede seguir teniendo su contenido modificado—simplemente no puedes hacer que la variable apunte a un objeto diferente.
Recurre a const por defecto y cambia a let solo cuando realmente necesites reasignar. Esto evita cambios accidentales y comunica la intención a quien lea el código.
Funciones Flecha
Las funciones flecha ofrecen una sintaxis concisa para escribir expresiones de función. También vinculan léxicamente el valor de this, lo que las hace especialmente útiles para escribir funciones cortas.
Aquí, la función flecha add toma dos parámetros y devuelve su suma. Cuando el cuerpo es una única expresión, puedes omitir las llaves y la palabra clave return—el valor de la expresión se devuelve automáticamente.
El mayor beneficio es que las funciones flecha no tienen su propio this; lo heredan del ámbito circundante. Antes de las funciones flecha, los callbacks a menudo perdían el this esperado y los desarrolladores lo solucionaban con const self = this o .bind(this). Las funciones flecha hacen que ese código repetitivo sea innecesario:
Como no tienen this propio, evita las funciones flecha para métodos de objeto que dependan de this, y para manejadores de eventos donde esperas que this sea el elemento. Usa una función normal en esos casos.
Plantillas de Cadena de Texto
Las plantillas de cadena de texto facilitan la creación de cadenas, especialmente al incorporar variables o expresiones. Usan comillas invertidas (```) en lugar de comillas normales.
Este ejemplo muestra cómo las plantillas de cadena de texto permiten incorporar la variable name directamente en la cadena, mejorando la legibilidad y la comodidad. El marcador ${ ... } puede contener cualquier expresión, no solo una variable—por ejemplo `Total: ${price * qty}`. Las plantillas de cadena de texto también pueden abarcar varias líneas sin \n, por lo que puedes escribir salidas con formato o pequeños fragmentos de HTML en línea.
Parámetros Predeterminados
Los parámetros predeterminados te permiten inicializar los parámetros de una función con valores predeterminados si no se proporcionan valores.
En este ejemplo, la función multiply asigna un valor predeterminado de 1 a b si no se proporciona un segundo argumento, garantizando que la función siempre devuelva un resultado válido.
Asignación por Desestructuración
La asignación por desestructuración es una forma cómoda de extraer valores de arrays u objetos en variables independientes.
Desestructuración de Arrays
Este ejemplo muestra cómo la desestructuración de arrays permite asignar los valores del array numbers a variables individuales a, b y c.
Desestructuración de Objetos
En este ejemplo, la desestructuración de objetos extrae las propiedades name y age del objeto person en variables independientes.
Literales de Objeto Mejorados
ES6 mejora los literales de objeto, permitiendo una sintaxis más concisa y legible.
Aquí, el objeto obj usa nombres de propiedades abreviados y definiciones de métodos, haciendo que el literal de objeto sea más conciso.
Promesas
Las promesas ofrecen una forma de gestionar operaciones asíncronas de manera más eficiente, evitando el infierno de callbacks y haciendo que el código sea más legible.
En este ejemplo, se crea una promesa que se resuelve después de 1 segundo con el mensaje 'Success!'. El método then se usa para gestionar el valor resuelto.
Usa promesas para gestionar operaciones asíncronas de forma limpia y evitar el infierno de callbacks.
Clases
ES6 introdujo las clases, proporcionando una sintaxis más clara y concisa para crear objetos y gestionar la herencia.
Este ejemplo demuestra cómo las clases en ES6 ofrecen una sintaxis limpia e intuitiva para definir objetos y su comportamiento.
Módulos
Los módulos te permiten dividir tu código en archivos separados e importar/exportar funciones, objetos o primitivos entre archivos.
Exportación
// math.js
export const add = (a, b) => a + b;Importación
// main.js
import { add } from './math.js';
console.log(add(2, 3)); // 5En estos ejemplos, la función add se exporta desde math.js y se importa en main.js, demostrando cómo los módulos facilitan la organización y reutilización del código.
Operadores Rest y Spread
Operador Rest
El operador rest (...) te permite representar un número indefinido de argumentos como un array.
En este ejemplo, la función sum usa el operador rest para agrupar todos los argumentos en un array, facilitando la realización de operaciones sobre ellos.
Operador Spread
El operador spread (...) permite que un iterable (como un array) se expanda en lugares donde se esperan cero o más argumentos o elementos.
Este ejemplo muestra cómo el operador spread se puede usar para combinar arrays en un único array, simplificando el código.
Iteradores y Generadores
Iteradores
Los iteradores son objetos que te permiten recorrer una colección, como un array o una cadena de texto.
En este ejemplo, el iterador proporciona una forma de acceder a cada elemento del array de forma secuencial.
Generadores
Los generadores son funciones que se pueden pausar y reanudar, ofreciendo una forma potente de gestionar iterables.
Este ejemplo muestra cómo una función generadora puede producir valores de uno en uno, pausando la ejecución entre cada yield.
Symbols
Los symbols son un nuevo tipo de dato primitivo introducido en ES6. Son únicos e inmutables, y se usan a menudo para crear claves de objeto únicas.
En este ejemplo, symbol1 y symbol2 son únicos, aunque tengan la misma descripción.
Maps y Sets
Maps
Los maps son colecciones de pares clave-valor donde las claves pueden ser de cualquier tipo.
Este ejemplo demuestra cómo crear un map, establecer pares clave-valor y recuperar valores.
Sets
Los sets son colecciones de valores únicos.
En este ejemplo, el set solo contiene valores únicos, aunque 3 se haya añadido dos veces.
Proxies
Los proxies te permiten crear un proxy para otro objeto, lo que te permite interceptar y redefinir operaciones fundamentales.
Este ejemplo muestra cómo un proxy puede interceptar el acceso a propiedades, proporcionando una respuesta personalizada cuando la propiedad no se encuentra.
WeakMap y WeakSet
WeakMap
WeakMap es similar a Map, pero solo permite objetos como claves y no impide la recolección de basura si no hay otras referencias al objeto clave.
WeakSet
WeakSet es similar a Set, pero solo permite objetos como valores y no impide la recolección de basura si no hay otras referencias al objeto.
Conclusión
ES6 aporta una gran cantidad de funcionalidades que hacen de JavaScript un lenguaje más robusto y eficiente. Al comprender y utilizar estas funcionalidades, los desarrolladores pueden escribir código más limpio y fácil de mantener. Esta guía ha ofrecido una mirada en profundidad a los aspectos más importantes de ES6, con ejemplos incluidos para ayudarte a empezar.
Para profundizar en los temas individuales, continúa con funciones flecha, asignación por desestructuración, parámetros rest y sintaxis spread, clases, módulos y promesas.