Características de JavaScript ES6
ECMAScript 6 (ES6) es una actualización importante del lenguaje JavaScript que introdujo muchas funciones 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, aportó muchas mejoras y nuevas funciones a JavaScript. Estos cambios han hecho que el lenguaje sea más moderno y más fácil de usar, mejorando tanto la legibilidad como el mantenimiento.
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. Estas nuevas palabras clave ofrecen mejores reglas de alcance y son esenciales para escribir código robusto.
Let
La palabra clave let te permite declarar variables cuyo alcance se limita al bloque, sentencia o expresión en la que se usan.
En el ejemplo anterior, x declarada dentro del bloque if es una variable distinta de x declarada fuera. Esto demuestra el alcance a nivel de bloque que proporciona let.
Const
La palabra clave const se usa para declarar variables cuyos valores no están destinados a cambiar nunca. Tiene alcance de bloque, igual que let.
En este ejemplo, intentar reasignar un valor a y provoca un error porque const declara una constante cuyo valor no puede cambiarse.
INFO
Usa siempre const para variables que no necesiten ser reasignadas para evitar cambios accidentales.
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. La sintaxis concisa hace que el código sea más legible y compacto.
INFO
Usa funciones flecha para una sintaxis concisa y para mantener el contexto léxico de this.
Literales de plantilla
Los literales de plantilla facilitan la creación de cadenas, especialmente al incrustar variables o expresiones. Usan comillas invertidas (```) en lugar de comillas.
Este ejemplo muestra cómo los literales de plantilla te permiten incrustar la variable name directamente en la cadena, mejorando la legibilidad y la comodidad.
Parámetros por defecto
Los parámetros por defecto permiten inicializar parámetros de 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, asegurando que la función siempre devuelva un resultado válido.
Asignación por desestructuración
La asignación por desestructuración es una forma práctica de extraer valores de arrays u objetos en variables distintas.
Desestructuración de arrays
Este ejemplo muestra cómo la desestructuración de arrays te permite asignar los valores del array numbers a las 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 separadas.
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.
INFO
Usa promesas para gestionar operaciones asíncronas de forma limpia y evitar el infierno de callbacks.
Clases
ES6 introdujo clases, proporcionando una sintaxis más clara y concisa para crear objetos y trabajar con 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 primitivas 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 reunir todos los argumentos en un array, lo que facilita realizar operaciones sobre ellos.
Operador spread
El operador spread (...) permite expandir un iterable (como un array) en lugares donde se esperan cero o más argumentos o elementos.
Este ejemplo muestra cómo se puede usar el operador spread para combinar arrays en un solo 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.
En este ejemplo, el iterador proporciona una forma de acceder a cada elemento del array de forma secuencial.
Generadores
Los generadores son funciones que pueden pausarse y reanudarse, proporcionando una forma potente de gestionar iterables.
Este ejemplo muestra cómo una función generadora puede producir valores uno a uno, pausando la ejecución entre cada yield.
Símbolos
Los símbolos son un nuevo tipo de dato primitivo introducido en ES6. Son únicos e inmutables, y a menudo se usan 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 en las que 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 añadió 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 funciones que hacen de JavaScript un lenguaje más robusto y eficiente. Al comprender y utilizar estas funciones, 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 para ayudarte a empezar.
Practice
Which of the following features were introduced in JavaScript ES6?