El ejemplo más sencillo para plantearlo mejor es con una función flecha suma
const suma = ({a, b}, c) => a + b + c;
console.log(suma({ a:10, b:17}, 100)); // 127
o ¿De qué manera funciona un argumento por separado?
Stack Overflow en español es un sitio de preguntas y respuestas para programadores y profesionales de la informática. Solo te toma un minuto registrarte.
Regístrate para unirte a esta comunidadEs importante mencionar que no hay ningún argumento por separado, se están pasando 2 argumentos a la función:
{ a, b }
)c
)Y entonces se está haciendo asignacion por destructuración. Esto es una expresión de JavaScript (también presente en otros lenguajes como Python o Perl) que permite la extracción de datos usando una sintaxis que equivale a la construcción de arreglos y objetos.
En este caso, se le está diciendo a la función que el primer parámetro va a ser un objeto que va a tener las propiedades a
y b
, y que lo desestructure para usar las variables a
y b
equivalentes a esas propiedades a
y b
del objeto.
Pero una ejemplo vale más que mil palabras. El código que tienes ahora mismo para suma
:
const suma = ({a, b}, c) => a + b + c;
equivaldría (más o menos) a hacer lo siguiente sin notación de flecha y sin destructuración:
const suma = function(obj, c) {
var a = obj.a;
var b = obj.b;
var c = c;
return a + b + c;
}
Puedes ver ambos métodos comparados aquí:
const suma = ({a, b}, c) => a + b + c;
console.log(suma({ a:10, b:17}, 100)); // 127
const suma2 = function(obj, c) {
var a = obj.a;
var b = obj.b;
var c = c;
return a + b + c;
}
console.log(suma2({ a:10, b:17}, 100)); // 127
Como nota, es importante indicar que los nombres de las propiedades usadas deben existir en el objeto o se producirán errores. Por ejemplo, este código fallará porque el objeto no tiene propiedad b
(sólo a
y d
):
const suma = ({a, b}, c) => a + b + c;
console.log(suma({ a:10, d:17}, 100)); // NaN porque b no existe
Y eso también funciona "al revés": se puede pasar un objeto con más propiedades y luego sólo usar unas pocas de ellas. En el siguiente ejemplo puedes ver como se le pasa un objeto a suma
que tiene las propiedades a
, b
y d
, pero sólo vamos a usar a
y b
que son las que se indican en el parámetro de la función flecha:
const suma = ({a, b}, c) => a + b + c;
console.log(suma({ a:10, b:17, d:10}, 100)); // 127 (d se ignora)
¿Cúal es la utilidad de tener un argumento por separado en una función en JavaScript?
Depende como requieras el método reciba los datos, en el caso que muestras, el segundo argumento es un valor que no es recibido como objeto en la función,
¿De qué manera funciona un argumento por separado?
La función obtiene los 2 valores del objeto ({a, b}
) los cuales suma entre si (a + b
) y estos a su vez los suma con el segundo valor que recibe la función (c
):
const suma = ({a, b}, c) => a + b + c;
console.log(suma({ a:10, b:17}, 100)); // 127
Puedes no usar un segundo argumento y agregar el valor del segundo argumento al objeto
, en este caso se obtienen los valores del objeto
y se suman, tu función recibiría solo un argumento:
const suma2 = ({a, b, c}) => a + b + c;
console.log(suma2({ a:10, b:17, c:100})); // 127