Un viaje a Traves del tiempo: La evolución de ECMAScript que dio Forma a JavaScript

Introducción

JavaScript es uno de los lenguajes de programación mas utilizados en el desarrollo web, fundamental para crear interfaces de usuario interactivas y dinámicas. Creado en 1995 por brendan Eich, paso por varios nombres (mocha, luego LiveScript) antes de establecerse como JavaScript.

Pero, ¿que es ECMAScrip? Es el estándar sobre el cual se basa JavaScript. Desarrollado y mantenido por la organización de estándares ECMA International, su designación oficial es ECMA-262. Cada nueva version de este estándar influye directamente en la evolución del lenguaje. En este articulo, exploraremos la cronología de ECMAScript y las actualizaciones clave que han mejorado JavaScript a lo largo de los años.

ECMAScript 1 (1997)

La primera edición del estándar conocida como ES1, se lanzo en 1997. Se baso en el lenguaje JavaScript existente e incluyo sus características fundamentales como variables, funciones y sentencias de control de flujo básicas.

// Ejemplo de una varaible en ES1
var nombre = "Dantech.dev";
console.log(nombre); // Salida: "Dantech.dev"

//Ejemplo de una funcion en ES1
function sumar(a,b) {
	return a + b;
}
console.log(sumar(1,2)); // salida: 3

ECMAScript 2 (1998) y ECMAScript 3 (1999)

La segunda version, ES2, fue una actualización menor lanzada en 1998 que se centro principalmente en hacer el estándar mas consistente.

Un años después, en 1999, llego ES3, que introdujo varias características importantes que hoy son fundamentales, como las expresiones regulares, las declaraciones try-catch para el manejo de errores y un manejo de cadenas de texto mejorado.

var texto = "Hola, mundo!";
var regex = /hola/;
console.log(regex.test(texto)); // salida: true

//Ejemplo de una declaracion try-catch en ES3
try {
	var x = y + 1 // 'y' no esta definida, lo que causara un error
} catch (error) {
	console.log(error) // Salida: ReferenceError: y es not defined
}

ECMAScript 4 (Nunca lanzado)

Se planeo una cuarta version con cambios muy significativos, como clases, interfaces y espacios de nombres (namespaces). sin embargo, la propuesta genero una gran oposición y su desarrollo fue finalmente abandonado, por lo que ES4 nunca vio la luz.

ECMAScript 5 (2009)

Tras una parga pausa, ES5 se lanzo en 2009. Esta version introdujo mejoras cruciales como:

• Modo estricto “use strict”, una forma de optar por una variante restringida de JavaScript para una escritura de código mas segura
• Soporte nativo para JSON, permitiendo analizar y convertir datos en este formato de manera sencilla
• Mejora en la manipulación de arrays, con nuevos métodos como indexOf() y map()

// Ejemplo de modo estricto en ES5
function sumar(a, b){
	"use strict";
	return a + b;
}
console.log(sumar(1,2)); // salida: 3

// ejemplo de soporte para JSON en ES5
var jsonTexto = '{"nombre":"dantech", "edad":26}';
var jsonData = JSON.parce(jsonTexto);

// Ejemplo de manipulacion de arrays mejorada en ES5
var numeros = [1,2,3,4,5];
console.log(numeros.indexOf(3)) // Salida: 2
console.log(numeros.map(function(numero){
	return numero * 2;
})); // salida: [2,4,6,8,10]

En 2011, se lanzo ES5.1 una actualización menor enfocada en corregir errores y mejorar la consistencia del estándar.

ECMAScript 6 (2015) - La gran Renovación

Conocido popularmente como ES6, su lanzamiento en 2015 marco la mayor actualización del lenguaje hasta la fecha. Introdujo una sintaxis mas moderna y potente con características como:

• Arrow Functions
• template literals para una mejor interpolación de cadenas
• clases, que ofrecen una sintaxis mas clara para la programación orientada a objetos

// Ejemplo de let y const en ES6
let nombre = "Dantech.dev"
const edad = 26

// Ejemplo de function de flecha o arrow function
let sumar = (a, b) => a + b;
console.log(sumar(1, 2)); // Salida: 3

// Ejemplo de plantillas literales en ES6
let mensaje = `¡Hola, ${nombre}!`;
console.log(mensaje); // Salida: "¡Hola, John Doe!"

// Ejemplo de una clase en ES6
class Persona {
  constructor(nombre, edad) {
    this.nombre = nombre;
    this.edad = edad;
  }
  saludar() {
    return `¡Hola, ${this.nombre}!`;
  }
}
let john = new Persona("John Doe", 30);
console.log(john.saludar()); // Salida: "¡Hola, John Doe!"

Otras características importantes de ES6 incluyen parámetros por defecto, desestructuración, y nuevas estructuras de datos como Map y Set

ECMAScript 2017 (ES8)

Esta version de 2017 trajo consigo mejorar importantes para la programación asíncrona y a manipulación de objetos.

• async/await: Una sintaxis mas limpia para trabajar promesas
• object.values() y object.entries(): Método para obtener los valores o los pares [clave, valor] de un objeto.
• Relleno de cadenas (padStart y padEnd)

// Ejemplo de Object.values() y Object.entries() en ES8
let persona = { nombre: "John Doe", edad: 30 };
console.log(Object.values(persona)); // Salida: ["John Doe", 30]
console.log(Object.entries(persona)); // Salida: [["nombre", "John Doe"], ["age", 30]]

// Ejemplo de relleno de cadenas en ES8
let texto = "Hola";
console.log(texto.padStart(10, '-')); // Salida: "-----Hola"
console.log(texto.padEnd(10, '-'));   // Salida: "Hola-----"

ECMAScript 20218 (ES9)

ES9, lanzada en 2018, continuo mejorando la asincronía y ma manipulación de objetos:

• iteración asíncrona con for-await-of
• Promise.prototype.finally(), que ejecuta código sin importar si una promesa se resolvió o fue rechazada
• Propiedades rest/spread para objetos

// Ejemplo de propeidades rest/spread en ES9
let persona = {nombre: "danilo macea", edad: 26, pais: "colombia"};
let {nombre, ...resto} = persona

// ejemplo de Promise.prototype.finally() en ES9
fetch('https://api.example.com/data')
	.then(data => console.log(data))
	.catch(error => console.log(error))
	.finally(() => console.log("!terminado"));

ECMAScript 2019 (ES10)

En 2019, ES10 añadió métodos útiles para trabajar con arrays y objetos

• Array.prototype.flatMap(), una combinación de map() y flat()
•  Object.fromEntries(), que crea un objeto a partir de una lista de pares [clave, valor]

// Ejemplo de flat() y flatMap() en ES10
let array = [1, 2, [3, 4]];
console.log(array.flat()); // Salida: [1-4]

let numeros = [1-4];
console.log(numeros.flatMap(x => [x, x * 2])); // Salida: [1, 2, 2-4, 4, 6, 7]

// Ejemplo de Object.fromEntries() en ES10
let entradas = [['nombre', 'John Doe'], ['edad', 30]];
console.log(Object.fromEntries(entradas)); // Salida: { nombre: "John Doe", edad: 30 }

ECMAScript 2020 (ES11)

ES11 introdujo características para manejar números grandes y valores nulos de forma mas segura

• BigInt para enteros de tamaño arbitrario
• Promise.allSettled()
• Operador de coalescencia nula (??)
• Encadenamiento opcional (?.)
• Campos privados en clases usando #

class Persona {
  #nombre = "danilo macea"
  #edad = 26;
  
  getNombre(){
    return this.#nombre
  }
  getEdad(){
    return this.#edad
  }
}
let persona = new Persona()
console.log(persona.getNombre()) // Salida: "Danilo macea"

// Ejmplo de coalescencia nula es ES11
let valor = null;
console.log(valor  ?? "default") // Salida: Default

ECMAScript 2021 (ES12)

Lanzada en 2021, esta version incluyo

• Operadores de asignación lógica (&&=, ||=)
• Separadores numéricos (_) para mejorar la legibilidad de números grandes
• Primise.any(), que se resuelve en cuanto una de las promesas del literal se cumple
• String.prototype.replaceAll() para reemplazar todas las ocurrencias de una sub Cadena

// Ejemplo de separadores numericos en ES12
let billon = 1_000_000_000;
console.log(billon) // Salida  1000000000

//Ejemplo de String.prototype.replaceAll() en ES12
let cadena = "foo foo foo";
console.log(cadena.replaceAll("foo", "bar")) // Salida: "bar, bar, bar"

ECMAScript 2022 (ES13)

La decimotercera edición trajo varias adiciones significativas, incluyendo:

• La capacidad de usar await en el nivel superior (fuera de una función async)
• Nuevos elementos de clase como campos y métodos privados y estáticos
• Bloques estáticos dentro de las clases para inicialización
• El método at() para String y Arrays, que permite indexación relativa (por ejemplo, array.at(1) para obtener el ultimo elemento
• Object.hasOwn, una alternativa mas conveniente a objetc.prototye.hasOwnProperty
• La propiedad cause en los objetos Error para registrar una cadena de casualidad en los errores

ECMAScript 2023 (ES14)

La version mas reciente, ES14, se centra en la inmutabilidad y la manipulación de arrays

• Nuevos métodos en Array.prototype que devuelven una nueva copia del array en lugar de modificar el original, como toSorted(), toReversed() y with()
• Métodos para buscar desde el final de un array: finLast() y findLastIndex()
• Soporte para comentarios #! ((hashbang/shebang), permitiendo que los archivos ECMAScript sean directamente ejecutables desde la Linea de comandos
• Permite el uso de la mayoría de los Símbolos como claves en colecciones débiles

// ejemplo del metodo toSorted() devuleve un nuevo array ordenado, dejando el original sin cambios
let arr = [1,2,3];
let sotedArr = arr.toSorted()
console.log(sotedArr)

// el metodo with() permite modificar un elemnto por su indice y devielve un nuevo array
let arr2 = ['manzana', 'banana','cereza']
let newArr2 = arr2.with(1, 'arandano')

console.log(newArr2) // Salida: [ 'manzana', 'arandano', 'cereza' ]

Existen mas versiones como las ES15 y la ES16 que salieron recientemente y comprenden los años 2024 y 2025, hablare sobre las novedades que se introdujeron en estas ultimas versiones en un proximo articulo, así Tambien como las propuestas que están abiertas para posibles implementaciones al lenguaje.

¿Como evoluciona ECMAScript?

El desarrollo de las especificaciones de ECMAScript es supervisado por el comité Ecma TC39

Sigue en proceso estructurado donde las propuestas avanzan por varias etapas, desde una idea inicial hasta convertirse en una característica finalizada, probada e implementada. Este proceso es transparente y permite la participación tanto de los miembros del comité como de la comunidad en general

Como hemos visto, la evolución de ECMAScript es un proceso riguroso de prueba y validación. Cada avance, como los de ECMAScript 2023, juega un papel crucial en hacer de JavaScript un lenguaje mas robusto, dinámico y capaz de enfrentar las cambiantes demandas del mundo digital.

En