5 características de Javascript ES6 que deberías utilizar

by Janeth Kent Date: 23-05-2020 javascript ecmascript es6 coding

Nosotros, como desarrolladores, debemos estar tratando de usar las mejores herramientas y características de nuestra disposición para hacer nuestro trabajo más fácil y eficiente.

Aquí voy a explicar 5 características del Javascript moderno que son muy útiles y que vas a usar todo el tiempo:

  1. Palabras clave Let y Const
  2. Funciones Flecha (Arrow Functions)
  3. Desestructuración (Destructuring)
  4. el operador Spread
  5. Literales de Template (Template Literals)

Es 2019 y todos los navegadores modernos soportan todas estas características, así que no hay excusa.

Puede ejecutar todo el código de ejemplo en su browser Developer Tools

1. Las palabras clave let y const

En Javascript var era la única forma de declarar una variable, el problema con var es que no tiene alcance (scope) y se puede declarar la misma variable varias veces, por eso ahora tenemos palabras clave let y const .

let

let permite declarar variables cuyo alcance se limita al bloque, sentencia o expresión en la que se utiliza. Esto es diferente a la palabra clave var , que define una variable globalmente, o localmente a una función completa sin importar el alcance del bloque (block scope).[1]

Veamos un ejemplo:

var date = new Date("2015-01-01");
var region = "US";
if (region === "US") {
var date = new Date();
console.log("New date", date); // Obtenemos la fecha actual como se esperaba
}
console.log(date); //Esperabamos 2015-01-01T00:00:00.000Z pero tenemos la fecha actual

Nosotros, los desarrolladores, somos malos para nombrar y si trabajamos con otros, el problema se multiplica por 10. Así que no es raro que usemos el mismo nombre para cosas diferentes.

Veamos cómo funciona esto con let

let date = new Date("2015-01-01");
let region = "US";
if (region === "US") {
let date = new Date();
console.log("New date", date); // Obtenemos la fecha actual como se esperaba
console.log(date); //Obtenemos 2015-01-01T00:00:00.000Zcomo se esperaba :)

Para mí, el alcance (scoping) es la característica más importante de let. Otras características son

  1. Redeclaración: Si se declara una variable con el mismo nombre en la misma función o ámbito de aplicación del bloque (block scope), se obtiene un valor de SyntaxError. Bueno para dejar de usar las variables del mismo nombre.
  2. Alzamiento (Hoisting): Si se utiliza una variable antes de la declaración, se obtiene una ReferenceError.

const

const nos permite declarar una variable constante, un valor que no debería cambiar en nuestro código. Veamos un ejemplo:

const speedOfLight=299792458; //m*s-1
try {
speedOfLight=300;
} catch(error) {
console.log(error); // TypeError: Assignment to constant variable.
// Nota - los mensajes de error variarán dependiendo del navegador
}
console.log(speedOfLight); 
// Expected output 299792458

Otras características de const :

  1. Alcance (Scoping): las variables son también block-scoped.
  2. Immutable: El valor de una variable constante no puede cambiar.
  3. Redeclaración: Lo mismo que let una variable const no puede ser redeclarada y no puede ser redeclarado y levantará un un Syntax Error.

Nota: Otra buena práctica para las variables es siempre declarar variables en la parte superior de la función o alcance del bloque (block scope), es más fácil de seguir.

Para este 2019 por favor no use más var .

2. Funciones Arrow

Las funciones Arrow (también conocido como flecha gorda para el simbolo =>) tiene una sintaxis más corta que una función regular y nos permite escribir un código más conciso.

Veamos la diferencia entre expresiones de función antiguas y funciones de flecha (arrow functions):

//ES5
let doubleNumbers = [1,2,3,4,5].map(function(number) { 
return number*2;
});
//ES6 Arrow function
let doubleNumbers = [1,2,3,4,5].map((number) => { 
return number*2 
});

En las funciones de flecha, no necesitas paréntesis cuando sólo tienes un argumento y si tienes una expresión de una línea como ésta, puedes dejar caer el retorno y las llaves:

//ES6 Arrow function one-liner
let doubleNumbers = [1,2,3,4,5].map(number => number*2);
//ES6 Arrow function multiple arguments
handleClick((event, seconds) => {
event.preventDefault();
displayFireworks();
showAnimation(seconds);
});

Las funciones de flecha nos ahorran mucho escribir y también, en mi opinión, hacen que el código sea más legible.

Lo que perdemos con las funciones de flecha es que no tenemos referencia a this , arguments , super or new.target . Esto significa que si realmente necesita alguno de estos argumentos dentro de una función, debería utilizar las funciones tradicionales.

Mi recomendación es que utilice las funciones de flecha tanto como pueda. En el código, la legibilidad es la clave.

3. Desestructuración (Destructuring)

Esta es una de mis características favoritas de ES6.

Veamos primero un ejemplo:

// Método antiguo
const myArray = ['apple', 'pear', 'orange', 'banana'];
let fruit1 = myArray[0];
let fruit2 = myArray[1];
let fruit3 = myArray[2];
let fruit4 = myArray[3];
//ES6 destructuring
let [fruit1, fruit2, fruit3, fruit4] = myArray; // mucho mejor, ¿no? 

Podemos usarlo en objetos para:

let dog = {
name: 'Toby',
age: 3,
breed: 'Beagle',
features: {
color: 'White and brown',
favoriteToy: 'Plastic duck'
}
}
// Podemos obtener los valores así con la desestructuración
let {name, age, breed} = dog;
// ¿Y si sólo queremos el nombre y la edad y todo lo demás en otra variable?
let {name, age, ...info} = dog;

Así que lo que nos permite la asignación de desestructuración es extraer datos de matrices u objetos en distintas variables de una manera fácil y útil.

Lo uso todo el tiempo para los objetos JSON.

Bonus

También puedes ir al revés:

let firstName="Albert"
let lastName="Einstein"
let person = {firstName, lastName}
console.log(person.firstName); // "Albert"
console.log(person.lastName); // "Einstein"

4. Operador spread (operador de propagación)

El operador de propagación spread operator permite que una expresión sea expandida en situaciones donde se esperan múltiples argumentos (llamadas a funciones) o múltiples elementos (arrays literales).

Veamos un ejemplo (notar que los puntitos son parte del operador):

let first = [1,2,3];
let second = [4,5,6];
// Si hacemos esto
first.push(second);
// Conseguimos
console.log(first); // [1,2,3,[4,5,6]] eso no está bien
// Usando el spread operator
first.push(...second);
console.log(first); // [1,2,3,4,5,6] ¡Eso es lo que queríamos!

Usando el spread operator (…) logramos obtener cada elemento individual sin hacer una iteración, esto es muy útil en muchas situaciones. Veamos otro ejemplo:

let scores = [23, 45, 56];
function averageThreeScores(a, b, c) {
let sum = a + b + c;
return sum/3;
}
console.log(averageThreeScores(...scores)); // Resultado 41.333333...

Aquí estamos usando el operador spread para pasar argumentos a una función

El operador Spread también trabaja con objetos. Al igual que con las matrices, el operador de dispersión nos permite obtener cada elemento individual de un objeto:

let name='Toby';
let age=3;
let features = {race: 'Beagle', size: 'small'};
let dog = {name, age, ...features}; // Ampliamos las características objeto
console.log(dog); // {name: 'Toby', age: 3, race: 'Beagle', size: 'small'}

El operador Spread también nos permite clonar un objeto en lugar de usar Object.assign :

let dog = {name: 'Toby', age: 3, race: 'Beagle', size: 'small'}
let puppy = {...dog, name: 'Max', age: 1}; // Clone dog object and modify its properties
console.log(puppy); // {name: 'Max', age: 1, race: 'Beagle', size: 'small'}
console.log(dog); // {name: 'Toby', age: 3, race: 'Beagle', size: 'small'}

Como podemos ver, clonamos el objeto perro, y cambiamos el valor de edad y nombre sin modificar el objeto original.

5. Literales de Template (Template Literals)

Usamos cadenas en todas partes, y normalmente tenemos que pasar alguna variable a la cadena. Aquí es donde las plantillas literales vienen al rescate.

Los Template literals están encerrados por el carácter back-tick() en lugar de comillas dobles o simples.

Los Template literals pueden contener marcadores de posición. Estos están indicados por el símbolo del dólar y las llaves rizadas (${expresión}):

let a = 5;
let b = 10;
console.log(`La suma de a y b es ${a+b} y la multiplicación es ${a*b}`); 
// La suma de a y b es 15 y la multiplicación es 50

También podemos escribir textos multilínea como:

let name='Miguel';
let age=30;
let country='Spain';
console.log(`${name} tiene
${age} años y
vive en ${country}
`);
// Miguel tiene
// 30 años y vive
// en Spain

Aquí Javascript mostrará texto multilínea y respetará los espacios sin necesidad de caracteres especiales, tales como n.

Referencias:
https://developer.mozilla.org

Eso es, por ahora, espero que esto le resulte útil. Si tienes alguna pregunta o algo que quieras añadir, por favor deja un comentario!

 
by Janeth Kent Date: 23-05-2020 javascript ecmascript es6 coding visitas : 19023  
 
Janeth Kent

Janeth Kent

Licenciada en Bellas Artes y programadora por pasión. Cuando tengo un rato retoco fotos, edito vídeos y diseño cosas. El resto del tiempo escribo en MA-NO WEB DESIGN AND DEVELOPMENT.

 
 
 

Artículos relacionados

Crear PDF con Javascript y jsPDF

El formato PDF es muy útil para descargar datos de forma masiva en una aplicación web. Ayuda a los usuarios a descargar contenido dinámico en forma de archivo para que…

Como hacer tu propio cursor personalizado para tu web

Cuando empecé a ojear webs distintas y originales para aprender de ellas, de las primeras cosas que me llamaron la atención fue que algunas de ellas tenían sus propios cursores,…

Explorando la API de CSS Paint: Redondeo de formas parte 1

Añadir bordes a las formas complejas es un auténtico rollo (a veces), pero redondear las esquinas de las formas complejas es un suplicio jejeje. Por suerte, la API de pintura…

Cómo enviar un correo electrónico desde un formulario de contacto HTML

En el artículo de hoy vamos a escribir sobre cómo hacer un formulario que funcione y que al pulsar ese botón de envío sea funcional y envíe el correo electrónico…

Cómo hacer un sitio web multilingüe sin redireccionamiento

Hoy, vamos a hablar de cómo implementar un simple selector de idioma en el sitio web estático o básico, sin necesidad de ningún backend o llamadas a la base de…

Comenzando con Bootstrap-Vue paso a paso

Hoy te mostraremos cómo usar BootstrapVue, describiremos el proceso de instalación y mostraremos la funcionalidad básica. El proyecto está basado en el framework CSS más popular del mundo - Bootstrap, para…

Por qué los desarrolladores de JavaScript deberían preferir Axios a Fetch

Por qué los desarrolladores de JavaScript deberían preferir Axios a Fetch En mi artículo anterior, "Usando la Api Fetch Para Hacer Llamadas Ajax", hablé de los fundamentos de la API Fetch.…

Creación de un sencillo spinner-loader CSS

En el artículo de hoy mostraremos cómo animar un loader básico que gira cuando se define alguna acción predefinida, como cargar una imagen. Eso se puede utilizar en un sitio…

Los mejores selectores de fechas para Bootstrap y tu aplicación

Los selectores de fecha son widgets que permiten a los usuarios elegir una sola fecha o rango de fechas y horas. Es un elemento habitual para todo usuario de Internet,…

Validación de formularios HTML usando BULMA y vanilla JavaScript

Hoy vamos a escribir sobre los formularios de contacto y cómo validarlos usando JavaScript. El formulario de contacto parece ser una de las características principales de toda página web básica. Es…

Cómo usar el efecto Parallax.Js en tu sitio web

Hoy vamos a escribir sobre el efecto de parallax, similar al desplazamiento de parallax, y cómo implementarlo para mejorar su página de aterrizaje. En webdev, dicen que primero el móvil…

Usando la API FETCH para hacer llamadas AJAX - Una promesa cumplida

En este artículo hablamos sobre lo que son las llamadas AJAX y cómo utilizarlas de forma tradicional, utilizando el objeto XMLHttpRequest (XHR). En resumen, gracias a las llamadas AJAX una…

Clicky