¡Hola! Me parece que andas usando un bloqueador de anuncios =( ¿Nos desbloqueas? ¿Por qué?
F13

Funcion 13

Aprende ES6 - Parámetros y propagación

Como ya sabrás, en Función 13 estamos embarcados en que aprendas todos los entresijos de ES6. En artículos anteriores hemos hablado sobre let, const y los ámbitos, las funciones flecha, que son realmente útiles, las Promesas y las Clases y cómo podemos usar la Desestructuración. Además hemos aprendido qué nuevas opciones tienen los objetos literales. Si esto no te suena de nada y estás intentando ponerle algún sentido a las siglas, ¡no te preocupes! Echa un vistazo a nuestra Introducción a ES6.

Valores por defecto para parámetros

Hasta ahora, cuando queremos que un parámetro de una función sea opcional, siempre hemos tenido que recurrir a este tipo de sintaxis:

function multiplicar (x, y) {  
    y = y || 1; // Si y no se pasa, es 1

    return x * y;
}

multiplicar(2); // 2  
multiplicar(2, 2); // 4  

En este ejemplo, la variable y será establecida como 1 en caso de que no se facilite ningún argumento. Lo cierto es que si usáramos este código, el resultado sería inesperado:

function multiplicar (x, y) {  
    y = y || 1; // Si y no se pasa, es 1

    return x * y;
}

multiplicar(2, 0); // 2 x 0 = 2 ??????  

Esto ocurre dado que la expresión y || 1 viene a decir, si y es falsy (es decir, null, 0, false o undefined) usemos 1. ¿Vaya, esto complicaría las cosas no?

function multiplicar (x, y) {  
    if (typeof y === 'undefined') {
        y = 1;
    }

    return x * y;
}

multiplicar(2, 0); // 0  

Mucho mejor, pero más complejo, ¿no te parece? ¡ES6 al rescate!

function multiplicar (x, y = 1) {  
    return x * y;
}

multiplicar(2, 0); // 0  
multiplicar(2); // 2  
multiplicar(2, 2); // 4  

¡Esto ya es otra cosa! Funciona igual que el ejemplo anterior (y más complejo) de ES5. Los parámetros con valores por defecto, son evaluados en el alcance exterior de manera que podemos usar otras variables:

(function(){
  const MULTIPLICADOR_POR_DEFECTO = 5;

  function multiplicar(x, y = MULTIPLICADOR_POR_DEFECTO) {
    return x * y;
  }

  multiplicar(5); // 25 (y toma el valor de 5)
  multiplicar(5, 2); // 10
})();

Resto de parámetros

A veces en JavaScript vemos que estamos tratando con multitud de argumentos y acabas usando la mágica variable arguments para trabajar con ellos.

Con ES6, aparece una sintaxis para definir el resto de parámetros y que además, nos facilita una Array real, por lo que se pueden aplicar métodos como map o join o lo que sea.

Vamos a ver un rápido ejemplo:

function unir(...palabras) {  
    return palabras.join(' ');
}

console.log(  
    unir('Hola', 'a', 'todos')
); // Hola a todos

Además, seremos capaces de extraer otros parámetros que nos interesen primero. Veamos un ejemplo:

function dice(personaje, ...palabras) {  
    return personaje + ' dice: ' + palabras.join(' ');
}

console.log(  
    dice('Arya', 'Valar', 'Morghulis')
); // Aria dice: Valar Morghulis

Como ves, el primer argumento en este caso, nos interesa así que le damos su propio nombre, y luego volvemos a usar la sintaxis para extraer el resto.

Operador de propagación (spread)

Mientras que el resto de parámetros nos permite combinar cero o más parámetros en un único parámetro convertido en una matriz, el operador de propagación hace justo lo contrario. Separa una matriz en cero o más parámetros.

En el caso de una llamada a una función, este parámetro nos permite evitar usar el método apply. Supongamos que queremos usar la función Math.max, esta función soporta una lista de argumentos indefinida y nos devuelve el número más grande. ¿Cómo lo usamos en una matriz de números?

Así lo haríamos con ES5:

var numeros = [5, 123, 495, 4, 12, 590];  
console.log(Math.max.apply(Math, numeros)); // 590  

Dado que apply usa una matriz como segundo parámetro, es una forma aceptable. No obstante, nos obliga a pasar el primer parámetro como valor this. Veamos cómo podríamos hacer esto con ES6:

let numeros = [5, 123, 495, 4, 12, 590];  
console.log(Math.max(...numeros)); // 590  

De esta manera, es mucho menos farragoso y no hay que especificar tantos parámetros, ¿no te parece?

Programador Front-end en First + Third y Potato. Trabajando con JavaScript y HTML5 desde el corazón de Sevilla.

Comentarios ¡Únete a la conversación!