En esta entrada, vamos a ver varias novedades que presenta ES6. En las entradas anteriores, hemos visto las nuevas formas que introduce para declarar variables y las funciones flecha. En esta ocasión, veremos cómo declarar parámetros por defecto en las funciones y, también, veremos los parámetros REST y el operador SPREAD.
Parámetros por defecto
En la versión tradicional de JS para darle a un parámetro un valor por defecto, lo que se hacía era comprobar si era undefined y si era, se le ponía el valor por defecto que queríamos.
Ahora, con ES6, no hace falta que hagamos eso, porque se pueden poner valores por defecto directamente en los argumentos de la declaración de la función.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
// ES5 function foo(text) { text = typeof text !== 'undefined' ? text : 'world'; // comprobar si se está pasando el parámetro console.log('Hello ' + text); } foo(); // sin parámetro. Hello world foo('my friend') // con parámetro. Hello my friend // ES6 function bar(text = 'world') { console.log('Hello ' + text); } bar(); // sin parámetro. Hello world bar(undefined); // undefined. Hello world bar('my friend') // con parámetro. Hello my friend |
Ver código anterior en vivo: https://repl.it/@vreaxe/ES6-parametros-por-defecto
En el ejemplo anterior, se le está asignando una cadena de texto al parámetro como valor por defecto, pero se le podría asignar un array, un boleano, un número, etc.
Parámetros REST
Cuando en JS tradicional, queríamos pasarle un número indeterminado de paramétros a una función, para recogerlos desde dentro de la función utilizábamos el objeto arguments. Pero este objeto tiene ciertos problemas: no es un array real, por tanto, no tenemos acceso a ciertos métodos de Array y, además, recoge todos los argumentos de la función.
Para solventar esto, en ES6, existen los parámetros REST. Se declaran poniendo delante del último parámetro … (puntos suspensivos) y lo que hará será coger todos los parámetros extra que tenga la función y transformarlos en un array real (no como arguments):
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
// ES5 function foo(a) { console.log(a); // 3 console.log(arguments); // objeto con todos los parámetros } foo(3, 'hello', 6, 'world'); // ES6 function bar(a, ...b) { console.log(a); // 3 console.log(b); // array con los parámetros extra } bar(3, 'hello', 6, 'world'); |
Ver código anterior en vivo: https://repl.it/@vreaxe/ES6-Parametros-REST
Operador SPREAD
El operador SPREAD lo que nos permite es transformar un array a una lista de parámetros, es decir, hace lo contrario que los parámetros REST. Podríamos decir que mientras que REST agrupa todos los elementos en uno solo elemento, SPREAD los desagrupa en múltiples.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
// parámetro función function foo(a, b, c) { console.log(a); console.log(b); console.log(c); } var array = [1, 2, 3]; foo(array); // Resultado: [ 1, 2, 3 ], undefined, undefined foo(...array); // Resultado: 1, 2, 3 // array var array2 = [4, 5, 6]; console.log([...array, ...array2]); // Resultado: [ 1, 2, 3, 4, 5, 6 ] var array3 = [...array]; console.log(array3); // Resultado: [ 1, 2, 3 ] |
Ver código anterior en vivo: https://repl.it/@vreaxe/ES6-Operador-SPREAD
Como podemos ver en el ejemplo, también se puede utilizar para agrupar o copiar arrays.
-
- https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Funciones/Parametros_por_defecto
- https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Funciones/parametros_rest
- https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Operadores/Sintaxis_Spread
Si hay cualquier tipo de error en el post o te surge cualquier duda, no dudes en ponerlo en los comentarios o enviarme un correo desde la página de contacto.
CONTACTAR