Video
El siguiente video es un complemento de los contenidos de la página anterior y en él te mostramos cuáles son los pasos que se dan al utilizar una función en un script y los elementos que involucra.
Ejercicio: función que devuelve varios valores
Hemos visto funciones que nos devuelven un resultado tras realizar unos cálculos, como en el caso del volumen de una esfera o el precio final de un producto, pero ¿qué ocurre si necesitamos que esa función nos devuelva más de un resultado? No podemos incluir varios ‘return’, ya que las funciones en JavaScript solo admiten uno. ¿Cuál puede ser la solución?
Para que lo puedas pensar con un ejemplo concreto, te planteamos que realices una ampliación del script que hemos visto en el video. En esta ocasión la función nos devolverá:
- El precio neto, es decir, aplicando el descuento pero no el impuesto del IVA
- La cantidad que corresponde al IVA (seguiría teniendo un valor del 21%)
- El precio final (PVP), es decir, el precio neto más el IVA calculado.
y el programa mostrará en pantalla cada uno de esos tres valores.
Puedes hacer las pruebas directamente en el editor online que insertamos aquí. Si tienes dudas, más abajo tienes una ayuda para realizar el ejercicio y también la solución completa, ¡ aunque te animamos a pensarlo tú mismo antes de consultarla !
Ayuda
Las pequeñas modificaciones que hay que hacer a la función para que calcule estos 3 valores son muy sencillas, pero si tienes dudas en esa parte, puedes verlo pinchando en esta ayuda, donde además te damos alguna pista para resolver el ejercicio:
Ayuda para resolver ejercicio (pincha para abrir)
Podrías plantear éstas (o similares) modificaciones a la función para calcular esas 3 cantidades:
|
function calculoPVP(precio, descuento) { var IVA = 0.21; var precioNeto = precio - descuento; var cantidadIVA = precioNeto * IVA; var PVP = precioNeto + cantidadIVA return.............; //aquí la función debe devolver los 3 valores: precioNeto, cantidadIVA, PVP } |
Comentarios:
- En este caso, asignamos al valor del IVA el porcentaje (21%), es decir ‘0.21’, que es la cantidad por la que multiplicaremos el precio neto. Antes le asignábamos ‘1.21’, porque hacíamos el cálculo de una sola vez, como puede verse desarrollando esta sencilla expresión:
PVP = precioNeto * 1,21 = precioNeto (1 + 0,21) = (precioNeto * 1) + (precioNeto * 0.21) = precioNeto + cantidadIVA
- Ahora tenemos tres valores y un solo ‘return’ para devolverlos. Algunos podrías pensar que la solución es:
return precioNeto, cantidadIVA, PVP; pero no es correcto porque son 3 variables distintas y no funcionaría. Ahora bien, ¿qué tipo de variable podría manejar varios valores?
- Si ya sabes la respuesta al punto anterior, ahora tienes que pensar como acceder/recuperar cada valor fuera de la función para mostrarlo en pantalla. Es una cuestión solo de notación…
Solución
Si no das con la solución del ejercicio, pincha aquí. Esta es la manera general en que podemos devolver varios valores desde una función y utilizarlos en el resto del script.
Solución del ejercicio (pincha para abrir)
Si para devolver un solo valor utilizábamos una variable ‘normal’, ¿cuál es el tipo de variable que nos permite almacenar varios valores? Efectivamente, un array.
Vemos cómo podría quedar el script completo:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
|
<script> var precio = prompt("Introduzca Precio producto (en euros): "); var descuento = prompt("Introduzca descuento (en euros): "); document.write("Precio neto= " + calculoPVP(precio,descuento)[0] + " €" + "<br>"); document.write("IVA = " + calculoPVP(precio,descuento)[1] + " €" + "<br>" ); document.write("PVP= " + calculoPVP(precio,descuento)[2] + " €"); function calculoPVP(precio, descuento) { var IVA = 0.21; var precioNeto = precio - descuento; var cantidadIVA = precioNeto * IVA; var PVP = precioNeto + cantidadIVA; var calculo = [precioNeto, cantidadIVA, PVP]; return calculo; } </script> |
Comentarios:
- Puedes ver que hemos declarado un array ‘calculo‘, cuyos 3 valores ([precioNeto, cantidadIVA, PVP]) corresponden a cada uno de los valores que hemos calculado dentro de la función
- Este array es la variable que devolvemos desde la función (
return calculo; ) con sus tres valores dentro
- Para utilizar estos valores fuera de la función usamos la notación que nos permite acceder a cada uno de los valores de un array: «nomArray[n]» recordando que el primer valor es n = 0, el segundo es n=1, etc…
- La particularidad es que en este caso no ponemos el nombre del array ‘calculo[n]‘, ya que el array está definido de forma local dentro de la función y el resto del script no lo conoce. Utilizamos pues, como hacíamos con las funciones que devuelven un solo valor, el nombre de la función ‘calculoPVP(precio, descuento)‘ añadiéndole la notación para recuperar cada uno de los valores:
-
calculoPVP(precio, descuento)[0] –> corresponde al valor de ‘precioNeto‘
-
calculoPVP(precio, descuento)[1] –> corresponde al valor de ‘cantidadIVA‘
-
calculoPVP(precio, descuento)[2] –> corresponde al valor de ‘PVP‘