5 Características de Javascript (Es6+) Que Deberías Utilizar En 2019

by admin admin Date: 27-02-2019 javascript ecmascript es6 es2015


5 características de Javascript (ES6+) que deberías utilizar en 2019

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/es/docs/Web/JavaScript/Referencia

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 admin admin Date: 27-02-2019 javascript ecmascript es6 es2015 visitas : 1428  
 
 
 
 

Artículos relacionados