webdevlog

Bloc de notas sobre desarrollo web, GNU/Linux, programación en general, y más.
mayo 17, 2020

Mejores características de ECMAScript 6

La versión 6 de ESMAScript o ES6 se encuentra implementada en todos los navegadores modernos como podemos ver en esta tabla. En este artículo voy a citar las features que podemos utilizar al desarrollar en JavaScript y que, sin lugar a dudas, nos dará por resultado un código más fácil de leer y mantener.

Deconstrucción de listas y objetos

Una de las características más útiles que se agregaron a ES6 es la posibilidad de deconstruir listas (arrays) y objetos.

Por ejemplo, si tenemos la lista:

let datos = [3, “red”, 14.6];

Podemos deconstruirla en variables de la siguiente forma:

let [cantidad, color, temperatura] = datos;
// cantidad = 3
// color = ‘red’
// temperatura = ‘14.6’

De la misma manera, dado un objeto:

let persona = { nombre: “Juan”, edad: “23” };
let { nombre, edad } = persona;
// nombre = ‘Juan’
// edad = 23

Arrow functions

Con la introducción de las arrow functions podemos crear funciones más compactas y legibles, antes era necesario definir la keyword function para declarar una función.

// javascript
function sumar(a, b) {
return a + b;
}
// ES6
let sumar = (a,b) => a + b;

Veamos que en la notación ES6 si se define la función con un cuerpo de una sola línea no es necesario escribir las llaves ni la keyword return.

Strings multilínea

Con ES6 podemos crear strings multilínea sin la necesidad de recurrir a concatenar strings, además podemos inyectar código JavaScript utilizando los caracteres ${}.

const website= "webdevlog.space";
let html = `<div>
<h1>Bienvenido a ${website}</h1>
</div>`;
console.log(html);

// Ejecutando en la consola del navegador veremos como resultado:
/*
<div>
<h1>Bienvenido a webdevlog.space</h1>
</div>
*/

Parámetros por defecto

function hello(name = "webdevlogspace") {
    console.log('Hello', name);
}
hello();
// ... y con parámetro
hello("world!");

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *