Funciones de JavaScript ES6: las buenas partes

ES6 ofrece algunas características funcionales nuevas y geniales que hacen que la programación en JavaScript sea mucho más flexible. Hablemos de algunos de ellos, específicamente, parámetros predeterminados, parámetros de descanso y funciones de flecha.

Consejo divertido : puede copiar y pegar cualquiera de estos ejemplos / código en Babel REPLy puede ver cómo el código ES6 se transpila a ES5.

Valores de parámetros predeterminados

Las funciones de JavaScript tienen una característica única que le permite pasar cualquier número de parámetros durante la llamada a la función (parámetros reales) independientemente del número de parámetros presentes en la definición de la función (parámetros formales). Por lo tanto, debe incluir parámetros predeterminados en caso de que alguien olvide pasar uno de los parámetros.

Cómo se implementarían los parámetros predeterminados en ES5

Lo anterior parece estar bien cuando lo ejecutamos. number2no se aprobó y lo comprobamos usando el ||operador ' ' para devolver el segundo operando si el primero es falso. Por lo tanto, se asignó '10' como valor predeterminado ya number2que no está definido.

Sin embargo, solo hay un problema. ¿Qué pasa si alguien pasa '0' como segundo argumento? ⚠

El enfoque anterior fallaría porque se asignaría nuestro valor predeterminado '10' en lugar del valor pasado, como '0'. ¿Por qué? ¡Porque '0' se evalúa como falso!

Mejoremos el código anterior, ¿de acuerdo?

¡Agh! Eso es demasiado código. No está nada bien. Veamos cómo lo hace ES6.

Parámetros predeterminados en ES6

function counts(number1 = 5, number2 = 10) { // do anything here}

number1y se number2les asignan valores predeterminados de '5' y '10' respectivamente.

Bueno, sí, esto es todo. Corto y dulce. No hay código adicional para verificar si falta un parámetro. Esto hace que el cuerpo de la función sea agradable y breve. ?

NOTA: Cuando undefinedse pasa un valor de para un parámetro con argumento predeterminado, como se esperaba, el valor pasado no es válido y se asigna el valor del parámetro predeterminado . Pero si nullse pasa, se considera válido y el parámetro predeterminado no se usa y se asigna un valor nulo a ese parámetro.

Una característica interesante de los parámetros predeterminados es que el parámetro predeterminado no tiene que ser necesariamente un valor primitivo, y también podemos ejecutar una función para recuperar el valor del parámetro predeterminado. He aquí un ejemplo:

Los parámetros anteriores también pueden ser parámetros predeterminados para los parámetros que vienen después de ellos así:

function multiply(first, second = first) { // do something here}

Pero lo inverso arrojará un error. Es decir, si el segundo parámetro se asigna como valor predeterminado para el primer parámetro, se produce un error porque el segundo parámetro aún no está definido mientras se asigna al primer parámetro.

function add(first = second, second) { return first + second;}console.log(add(undefined, 1)); //throws an error

Parámetros de descanso

Un parámetro de descanso es simplemente un parámetro con nombre que está precedido por tres puntos (…). Este parámetro con nombre se convierte en una matriz que contiene el resto de los parámetros (es decir, aparte de los parámetros con nombre) pasados ​​durante la llamada a la función.

Solo tenga en cuenta que solo puede haber un parámetro de descanso , y tiene que ser el último parámetro. No podemos tener un parámetro con nombre después de un parámetro de descanso.

He aquí un ejemplo:

Como puede ver, hemos usado el parámetro rest para obtener todas las claves / propiedades que se extraerán del objeto pasado, que es el primer parámetro.

La diferencia entre un parámetro rest y el 'objeto de argumentos' es que este último contiene todos los parámetros reales pasados ​​durante la llamada a la función, mientras que el 'parámetro rest' contiene solo los parámetros que no son parámetros con nombre y se pasan durante la llamada a la función.

Funciones de flecha ➡

Las funciones de flecha, o "funciones de flecha gruesa", introducen una nueva sintaxis para definir funciones que es muy concisa. Podemos evitar escribir palabras clave como function, returne incluso corchetes { }y paréntesis ().

Sintaxis

La sintaxis viene en diferentes sabores, dependiendo de nuestro uso. Todas las variaciones tienen una cosa en común , es decir, comienzan con los argumentos , seguidos de la flecha ( =>), seguida de la función b ody.

Los argumentos y el cuerpo pueden tomar diferentes formas. Este es el ejemplo más básico:

let mirror = value => value;
// equivalent to:
let mirror = function(value) { return value;};

El ejemplo anterior toma un único argumento "valor" (antes de la flecha) y simplemente devuelve ese argumento ( => value;). Como puede ver , solo existe el valor de retorno, por lo que no es necesario utilizar una palabra clave de retorno o llaves para cerrar el cuerpo de la función.

Dado que solo hay un argumento , tampoco es necesario utilizar paréntesis “()”.

Aquí hay un ejemplo con más de un argumento para ayudarlo a comprender esto:

let add = (no1, no2) => no1 + no2;
// equivalent to:
let add = function(no1, no2) { return no1 + no2;};

Si no hay ningún argumento, debe incluir paréntesis vacíos como a continuación:

let getMessage = () => 'Hello World';
// equivalent to:
let getMessage = function() { return 'Hello World';}

Para un cuerpo de función con solo una declaración de retorno, las llaves son opcionales .

Para un cuerpo de función que tiene algo más que una declaración de retorno, debe envolver el cuerpo con llaves al igual que las funciones tradicionales.

Aquí hay una función de cálculo simple con dos operaciones: sumar y restar. Su cuerpo debe estar envuelto en tirantes:

let calculate = (no1, no2, operation) => { let result; switch (operation) { case 'add': result = no1 + no2; break; case 'subtract': result = no1 - no2; break; } return result;};

Ahora, ¿qué pasa si queremos una función que simplemente devuelva un objeto? El compilador se confundirá si las llaves son del objeto ( er}) o las llaves del cuerpo de la función.()=>{id: numb

La solución es envolver el objeto entre paréntesis. Así es cómo:

let getTempItem = number => ({ id: number});
// effectively equivalent to:
let getTempItem = function(number) { return { id: number };};

Let’s have a look at the final example. In this we’ll use filter function on a sample array of numbers to return all numbers greater than 5,000:

// with arrow functionlet result = sampleArray.filter(element => element > 5000);
// without arrow functionlet result = sampleArray.filter(function(element) { return element > 5000;});

We can see how much less code is necessary compared to the traditional functions.

A few things about arrow functions to keep in mind though:

  • They can’t be called with new, can’t be used as constructors (and therefore lack prototype as well)
  • Arrow functions have their own scope, but there’s no ‘this’ of their own.
  • No arguments object is available. You can use rest parameters however.

Since JavaScript treats functions as first-class, arrow functions make writing functional code like lambda expressions and currying much easier.

"Las funciones de flecha fueron como el combustible de un cohete para la explosión de la programación funcional en JavaScript". - Eric Elliott

¡Bueno, allá vas! Quizás es hora de que empieces a utilizar estas funciones.

Las características de ES6 como estas son un soplo de aire fresco y a los desarrolladores les encanta usarlas.

¡Aquí está el enlace a mi publicación anterior sobre declaraciones de variables y elevación!

Espero que esto te motive a enfrentarte a ES6 si aún no lo has hecho.

Paz ✌️️