Читать книгу JavaScript: Guía completa - Alessandra Salvaggio - Страница 14

Funciones

En este capítulo hablaremos de funciones que permiten agrupar varias líneas de código para mantener el orden y reutilizar más fácilmente partes de código.

Temas tratados

•Definir y utilizar funciones

•Utilizar el operador ternario

•Pasar parámetros

•Arrays

•Funciones anónimas

•Área de validez de constantes y variables

Una función es un grupo de instrucciones que ejecuta una tarea o calcula un valor.

Para trabajar con funciones se precisan dos pasos:

•declarar la función y definir sus acciones

•llamar a la función en uno o varios puntos del código

Para explicar mejor el uso de funciones, empezaremos con un ejemplo:

<body><p id="output"></p><img id="carita" /><script type="text/javascript">function esFinDeSemana() {const dia = new Date().getDay();if (dia === 0 || dia === 6) return true;else return false}let valorSrc;if (esFinDeSemana() === true) valorSrc = 'CaritaFeliz.png';else valorSrc = 'CaritaTriste.png';document.getElementById('carita').src = valorSrc;</script></body>

Puedes encontrar este ejemplo en el archivo Funciones .html

Empezamos el análisis de este código precisamente por la función esFinDeSemana:

function esFinDeSemana() {const dia = new Date().getDay();if (dia === 0 || dia === 6) return true;else return false}

Observa que, para crear la función, se utiliza la palabra function seguida del nombre de la misma función y, a su vez, seguida de un par de paréntesis.

Todas las líneas de código que forman parte de la función se sitúan entre llaves.

Anteriormente hemos dicho que una función puede limitarse a ejecutar acciones, o bien puede devolver un valor, como la función que estamos analizando.

El valor devuelto se introduce con la palabra return.

La función utiliza un código que ya te debería ser familiar: tras haber leído el número del día de la semana, si es sábado (6) o domingo (0), la función devuelve true y, si no, devuelve false (es decir, un valor booleano).

En realidad, podríamos escribir la función evitando la instrucción if y utilizando una notación más resumida:

return dia === 0 || dia === 6;

Esta instrucción devuelve el resultado de la comparación dia === 0 || dia === 6, es decir, verdadero o falso, igual que la instrucción if que hemos escrito inicialmente.

Tanto si utilizamos una instrucción if, como si recurrimos a la forma más resumida, el valor que devuelve la función se utilizará posteriormente en una instrucción if para crear el nombre de la imagen que se desea cargar en el objeto <img> con el id = carita.

if (esFinDeSemana() === true) valorSrc = ‘CaritaFeliz.png’;else valorSrc = ‘CaritaTriste.png’;

Observa que el nombre de la función se debe llamar completo entre paréntesis.

En este ejemplo, para simplificar un poco la lectura, hemos ejecutado explícitamente la comparación esFinDeSemana() === true; sin embargo, normalmente, cuando la parte derecha de la comparación es un valor booleano, no se ejecuta la comparación de manera explícita, sino que basta con una notación más reducida:

if (esFinDeSemana()) valorSrc = 'CaritaFeliz.png';

Antes de continuar, queremos mostrarte un modo más sintético de escribir una instrucción if, una manera que se puede utilizar cuando se tiene una comparación booleana y, por tanto, una única expresión a valorar si la comparación es verdadera y una única expresión a valorar si es falsa.

Las expresiones en cuestión no pueden llevar a cabo una operación, solo devolver un valor.

Toda la instrucción if anterior puede ser escrita del modo siguiente:

const valorSrc = esFinDeSemana() ? 'CaritaFeliz.png' : 'CaritaTriste.png';

Esta notación se denomina habitualmente operador ternario porque se compone de tres partes:

test booleano ? valor si verdadero : valor si falso

El resultado de un operador ternario, que siempre es un valor, se asigna a una variable o a una constante (o se utiliza para ejecutar operaciones que todavía no hemos explicado), si no, se pierde. Nuestra función se utiliza una sola vez, pero nada nos impide utilizarla también en otras situaciones.

Por ejemplo, podríamos enriquecer nuestro código como se indica a continuación, para mostrar, además de una imagen, también un mensaje adecuado para el momento de la semana:

const valorSrc = esFinDeSemana() ? 'CaritaFeliz.png' : 'CaritaTriste.png';const mensaje = esFinDeSemana() ? 'Diviértete' : 'Venga, que ya falta poco';document.getElementById('carita').src = valorSrc;document.getElementById('output').innerHTML = mensaje;

Puedes encontrar este ejemplo en el archivo Funciones1 .html

Tratemos de complicar un poco nuestro ejemplo de uso de una función haciendo que nos muestre el nombre del día de la semana actual.

Puedes encontrar este ejemplo en el archivo FuncionesArray .html

La auténtica novedad de este código es la línea:

const nombreDia = ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'];

La constante nombreDia, a diferencia de las que hemos visto hasta hora, contiene un conjunto de datos.

Se define como array y contiene múltiples valores ordenados y colocados entre corchetes.

Dado que los valores de un array están dispuestos en un orden determinado, es posible acceder a él especificando su posición mediante un número de índice que empieza desde 0 (el primer elemento del array tiene el valor 0).

Para acceder a un elemento de un array, basta con poner entre los corchetes de dicho array el número de índice del elemento.

nombreDia[2]

devolverá el valor “Martes” que se encuentra en la posición 2 en el array (0 corresponde a domingo; 1, a lunes; 2, a martes... y 6, a sábado).

Nuestro array contiene los nombres de los días de manera que su posición corresponda al valor devuelto por getDay() y almacenado en la variable dia, que después podemos utilizar como índice de nuestro array.

nombreDia[dia]

Подняться наверх