¿Cómo funciona ECMAScript 2015 (ES6)?

Autor: | Última modificación: 18 de marzo de 2024 | Tiempo de Lectura: 3 minutos
Temas en este post:

Algunos de nuestros reconocimientos:

Premios KeepCoding

ECMAScript 2015, comúnmente conocido como ES6, es una de las versiones más importantes y revolucionarias del lenguaje de programación JavaScript. Fue lanzado por Ecma International, la organización encargada de estandarizar el lenguaje ECMAScript. Esta actualización trajo consigo una serie de características y mejoras que hicieron que el desarrollo web con JavaScript fuera más eficiente, legible y poderoso.

En este artículo, exploraremos algunas de las características clave de ECMAScript 2015, incluyendo funciones arrow, valores por defecto, variables con let, template strings y mucho más. Si te interesa el mundo del desarrollo web y deseas dominar las últimas y más poderosas técnicas de JavaScript, sigue leyendo.

ECMAScript 2015

Funciones arrow en ECMAScript 2015

Una de las adiciones más destacadas de ECMAScript 2015 son las funciones arrow. Estas funciones proporcionan una sintaxis más concisa y clara para definir funciones en JavaScript. En lugar de utilizar la palabra clave function, las funciones arrow se representan mediante una flecha (=>) entre los parámetros y el cuerpo de la función.

//ECMAScript 2015
// Función tradicional
function sumar(a, b) {
  return a + b;
}

// Función arrow equivalente
const sumar = (a, b) => a + b;

Las funciones arrow también son útiles cuando se trata del manejo del contexto «this» en JavaScript, ya que heredan automáticamente el valor de «this» del ámbito en el que están definidas.

Valores por defecto

Otra característica importante de ECMAScript 2015 es la capacidad de asignar valores por defecto a los parámetros de una función. Antes de ECMAScript 2015, se solían usar trucos (como operadores ternarios) para lograr este comportamiento, pero ahora es mucho más sencillo y legible.

//ECMAScript 2015
// Función con valores por defecto
function saludar(nombre = 'usuario') {
  console.log(`Hola, ${nombre}!`);
}

saludar(); // Imprime: Hola, usuario!
saludar('Juan'); // Imprime: Hola, Juan!

Variables que se declaran con let y const

ECMAScript 2015 introdujo dos nuevas palabras clave para declarar variables: let y const. Ambas tienen diferencias importantes con la antigua var.

let

La declaración let permite crear variables con alcance de bloque, lo que significa que solo están disponibles dentro del bloque en el que se definen. Esto evita algunos problemas comunes asociados con var, como las variables globales no intencionadas.

//ECMAScript 2015
if (true) {
  let x = 10;
  console.log(x); // Imprime: 10
}

console.log(x); // Error: x is not defined

const

Por otro lado, const se utiliza para declarar variables que no pueden ser reasignadas después de su declaración, lo que las convierte en constantes. Esto es útil cuando queremos asegurarnos de que el valor de una variable no cambia accidentalmente.

//ECMAScript 2015
const PI = 3.1416;
PI = 3.14; // Error: Assignment to constant variable.

Template strings

Los template strings son una manera más legible y poderosa de concatenar cadenas en JavaScript. Se definen usando comillas invertidas («) en lugar de comillas simples o dobles y permiten el uso de expresiones dentro de ellas usando la sintaxis ${expresión}.

//ECMAScript 2015
const nombre = 'María';
const edad = 30;

// Uso de template strings
const mensaje = `Hola, mi nombre es ${nombre} y tengo ${edad} años.`;

console.log(mensaje); // Imprime: Hola, mi nombre es María y tengo 30 años.

Declarar variables con var vs. let y const

Cuando trabajas con ECMAScript 2015, es recomendable evitar el uso de var y en su lugar optar por let y const para declarar variables. Esto se debe a que var tiene un alcance de función y puede llevar a errores sutiles debido a la elevación de variables.

//ECMAScript 2015
// Evitar "var" y usar "let" o "const"
var numero = 10;

if (true) {
  var numero = 20;
  console.log(numero); // Imprime: 20
}

console.log(numero); // Imprime: 20 (el valor fue modificado accidentalmente)

Si reemplazamos var por let en el ejemplo anterior, el resultado sería diferente:

//ECMAScript 2015
let numero = 10;

if (true) {
  let numero = 20;
  console.log(numero); // Imprime: 20
}

console.log(numero); // Imprime: 10 (el valor original se mantiene)

¡Sigue aprendiendo!

ECMAScript 2015 ha traído consigo una gran cantidad de mejoras y características que hacen que el desarrollo web con JavaScript sea más eficiente y agradable. Desde las funciones arrow hasta las variables con let y const, pasando por los template strings y los valores por defecto en funciones, ES6 ha cambiado la forma en la que escribimos código JavaScript.

Si deseas convertirte en un experto en ECMAScript 2015 y en desarrollo web en general, no dudes en inscribirte en el Desarrollo Web Full Stack Bootcamp de KeepCoding. Durante este bootcamp, aprenderás todas las bases del desarrollo web moderno, incluyendo las últimas características de ES6. Al finalizar el bootcamp, estarás listo para enfrentar los desafíos del sector tecnológico, una industria en constante crecimiento y demanda de profesionales altamente capacitados. ¡Prepárate para cambiar tu vida y construir un futuro prometedor en el sector IT con KeepCoding!

¡CONVOCATORIA ABIERTA!

Desarrollo Web

Full Stack Bootcamp

Clases en Directo | Profesores en Activo | Temario 100% actualizado