Comparación entre ECMAScript 5 (ES5) y ECMAScript 6 (ES6)

1. Declaración de Variables

ES5:

• Uso de var para declarar variables. Tiene función como ámbito y puede dar lugar a hoisting.

var nombre = 'Maria';

ES6:

• Introduce let y const que tienen bloque como ámbito, mejorando la seguridad en el manejo de variables.

let nombre = 'Maria';  // Variable que puede cambiar
const edad = 30;       // Constante, no puede cambiar

2. Funciones Flecha

ES5:

• Las funciones tradicionales requieren más código y su manejo de this puede ser confuso.

var suma = function(a, b) {
  return a + b;
};

ES6:

• Las funciones flecha son más concisas y no cambian el contexto de this.

const suma = (a, b) => a + b;

3. Cadenas Template (Template Strings)

ES5:

• La concatenación de cadenas se realiza usando el operador +.

var saludo = 'Hola ' + nombre + ', tienes ' + edad + ' años.';

ES6:

• Se utilizan backticks (`) para crear plantillas de cadenas, permitiendo interpolación.

const saludo = `Hola ${nombre}, tienes ${edad} años.`;

4. Parámetros por Defecto

ES5:

• No había soporte para parámetros por defecto, por lo que se implementaba de forma manual.

function saludo(nombre) {
  nombre = nombre || 'Invitado';
  return 'Hola ' + nombre;
}

ES6:

• Los parámetros por defecto se declaran directamente en la firma de la función.

function saludo(nombre = 'Invitado') {
  return `Hola ${nombre}`;
}

5. Clases

ES5:

• El concepto de clases no existía. Se usaban funciones constructoras y prototipos.

function Persona(nombre, edad) {
  this.nombre = nombre;
  this.edad = edad;
}

Persona.prototype.saludar = function() {
  return 'Hola, soy ' + this.nombre;
};

ES6:

• Se introducen las clases, una sintaxis más limpia y cercana a otros lenguajes de programación.

class Persona {
  constructor(nombre, edad) {
    this.nombre = nombre;
    this.edad = edad;
  }

  saludar() {
    return `Hola, soy ${this.nombre}`;
  }
}

6. Módulos (Import y Export)

ES5:

• No había soporte nativo para módulos. Se utilizaban bibliotecas como RequireJS o CommonJS.

// CommonJS
var modulo = require('modulo');
module.exports = modulo;

ES6:

• Introduce el soporte nativo para módulos con import y export.

// Exportar
export const suma = (a, b) => a + b;

// Importar
import { suma } from './modulo';

7. Promesas

ES5:

• No existía un manejo nativo de promesas. Se dependía de callbacks para manejar asincronía, lo que llevaba a problemas como el "Callback Hell".

function hacerAlgo(callback) {
  setTimeout(function() {
    callback('Hecho');
  }, 1000);
}

hacerAlgo(function(resultado) {
  console.log(resultado);
});

ES6:

• Se introducen las promesas para manejar operaciones asincrónicas de forma más limpia.

const hacerAlgo = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => resolve('Hecho'), 1000);
  });
};

hacerAlgo().then(resultado => console.log(resultado));

8. Operador Rest y Spread

ES5:

• No había soporte para combinar o separar arrays u objetos fácilmente. Se utilizaban técnicas como el uso de apply.

function sumar(a, b, c) {
  return a + b + c;
}

var numeros = [1, 2, 3];
sumar.apply(null, numeros);

ES6:

• Se introducen los operadores rest y spread para un manejo más sencillo de listas de argumentos y arrays.

// Spread
const numeros = [1, 2, 3];
const resultado = sumar(...numeros);

// Rest
function sumar(...numeros) {
  return numeros.reduce((a, b) => a + b, 0);
}

9. Desestructuración

ES5:

• La extracción de valores de objetos o arrays era manual y propensa a errores.

var persona = { nombre: 'Maria', edad: 30 };
var nombre = persona.nombre;
var edad = persona.edad;

ES6:

• Se introduce la desestructuración para extraer valores de objetos y arrays de forma más limpia.

const { nombre, edad } = persona;

Conclusión

ECMAScript 6 (ES6) trae una gran cantidad de mejoras sintácticas y funcionales que simplifican el desarrollo en JavaScript, lo hacen más legible, mantenible y eficiente en comparación con ECMAScript 5 (ES5).