Comparison between ECMAScript ESand ECMAScript ES6)

1. Declaration of Variables

ES5:

• Use of var to declare variables. It has function as a scope and can give rise to hoisting.

var nombre = 'Maria';

ES6:

• Introduces let and const that have block as scope, improving security in the handling of variables.

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

---

2. Arrow Functions

ES5:

• Traditional functions require more code and your handling of this can be confusing.

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

ES6:

• Arrow functions are more concise and do not change the context of this.

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

---

3. Template Strings

ES5:

• String concatenation is done using the .
operator

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

ES6:

• backticks (`) are used to create string templates, allowing interpolation.

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

---

4. Default Parameters

ES5:

• There was no support for default parameters, so it was implemented manually.

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

ES6:

• The default parameters are declared directly in the function signature.

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

---

5. Classes

ES5:

• The concept of classes did not exist. Builder functions and prototypes were used.

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

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

ES6:

• The classes are introduced, a cleaner syntax closer to other programming languages.

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

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

---

6. Modules (Import and Export)

ES5:

• There was no native support for modules. Libraries such as RequireJS or CommonJS were used.

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

ES6:

• Introduces native support for modules with import and export.

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

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

---

7. Promises

ES5:

• There was no native promise handling. Callbacks were relied on to handle asynchrony, leading to problems like "Callback Hell".

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

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

ES6:

• promises are introduced to handle asynchronous operations more cleanly.

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

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

---

8. Rest and Spread Operator

ES5:

• There was no support for easily combining or separating arrays or objects. Techniques such as the use of apply were used.

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

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

ES6:

• The rest and spread operators are introduced for easier handling of argument lists and arrays.

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

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

---

9. Destructuring

ES5:

• Extracting values ​​from objects or arrays was manual and error-prone.

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

ES6:

• destructuring is introduced to extract values ​​from objects and arrays in a cleaner way.

const { nombre, edad } = persona;

---

Conclusion

ECMAScript 6 (ES6) brings a large number of syntactic and functional improvements that simplify development in JavaScript, making it more readable, maintainable and efficient compared to ECMAScript 5 (ES5).

The above is the detailed content of Comparison between ECMAScript ESand ECMAScript ES6). For more information, please follow other related articles on the PHP Chinese website!