Dominar las características de ECMAScript 6 es fundamental para cualquier desarrollador JavaScript moderno. Tres de los pilares más relevantes de esta versión son las clases, los módulos con import y export, y los generators. Cada uno resuelve necesidades distintas: estructurar objetos con herencia, separar la lógica en archivos independientes y controlar la ejecución secuencial de valores.
¿Cómo funcionan las clases en JavaScript?
Las clases en ES6 ofrecen una sintaxis más clara para crear objetos y manejar herencia, permitiendo aplicar programación orientada a objetos dentro de JavaScript. Se declaran con la palabra reservada class seguida de un nombre, y su estructura interna gira en torno a un constructor y los métodos que se necesiten.
El constructor es el método que se ejecuta al instanciar la clase. Dentro de él se inicializan las variables del scope global de la clase usando la palabra this [01:12]. Por ejemplo, al construir una calculadora:
javascript
class Calculator {
constructor() {
this.valueA = 0;
this.valueB = 0;
}
sum(valueA, valueB) {
this.valueA = valueA;
this.valueB = valueB;
return this.valueA + this.valueB;
}
}
this.valueA y this.valueB son las propiedades disponibles en toda la clase.- El método
sum recibe dos parámetros, los asigna a las propiedades internas y retorna la suma.
¿Cómo se instancia y utiliza una clase?
Para usar la clase se crea una nueva instancia con new [02:42]:
javascript
const calc = new Calculator();
console.log(calc.sum(2, 2)); // 4
El operador new genera un objeto basado en la clase Calculator, y a partir de ahí se accede a cualquier método definido. Se pueden añadir tantos métodos como sean necesarios: resta, multiplicación o cualquier otra operación.
¿Qué son los módulos con import y export?
Otra característica esencial de ES6 es la posibilidad de separar la lógica en módulos [03:28]. Esto significa dividir el código en archivos independientes, cada uno con una responsabilidad específica: peticiones a una API, cálculos matemáticos u otra funcionalidad.
Para crear un módulo se escribe la lógica en un archivo separado y se exporta con export default:
javascript
// module.js
const hello = () => {
return 'Hello!';
};
export default hello;
¿Cómo se importa un módulo en el archivo principal?
Desde el archivo principal se utiliza la palabra reservada import junto con from para indicar la ruta del módulo [04:14]:
javascript
import hello from './module';
console.log(hello());
- export default indica que ese es el valor principal exportado del archivo.
- import trae la función o el valor al documento donde se necesita.
Esta separación en módulos permite mantener un código organizado, reutilizable y fácil de mantener, ya que cada archivo se encarga de una sola tarea.
¿Qué son los generators y cómo se utilizan?
Los generators son una función especial que retorna una serie de valores según un algoritmo definido [05:08]. Su sintaxis se distingue por el asterisco (*) después de la palabra function, y utilizan yield para retornar valores de forma secuencial, guardando el estado interno entre cada llamada.
javascript
function* helloWorld() {
if (true) {
yield 'Hello';
}
if (true) {
yield 'World';
}
}
const generatorHello = helloWorld();
console.log(generatorHello.next().value); // Hello
console.log(generatorHello.next().value); // World
console.log(generatorHello.next().value); // undefined
- La palabra
yield pausa la ejecución y retorna un valor.
- El método
.next() reanuda la función desde donde se detuvo [06:10].
- Cuando ya no hay más valores por retornar, se obtiene
undefined.
Cada vez que se invoca .next(), el generator recuerda en qué punto se quedó y ejecuta el siguiente bloque. Un caso de uso muy popular es la secuencia de Fibonacci, donde cada llamada produce el siguiente número de la serie [07:22].
Estas tres características —clases, módulos y generators— fueron añadidas en ECMAScript 6, publicado en 2015, y sentaron las bases del JavaScript moderno. Si ya las dominas, el siguiente paso es explorar las novedades que llegaron con ES7. ¿Cuál de estas funcionalidades utilizas más en tus proyectos?
