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
yconst
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
yexport
.
// 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).
Top comments (0)