Sección 1: JavaScript

Lección 11: Funciones

¡Bienvenidos! Las funciones son la parte más difícil de aprender en JavaScript. Y realmente toma un tiempo entenderlas bien. De todas maneras, en esta lección vamos a tratar de hacerlo. Vamos a aprender sobre funciones en JavaScript. Bueno, comencemos con una pregunta:

¿Qué son las funciones? Las funciones no son ni más ni menos que una pieza de código que realiza algunas acciones. Sin las funciones JavaScript realmente no podría hacer algo. La importancia de las funciones radica en que pueden realizar una o más acciones.

Comencemos hablando sobre algunas funciones que ya hemos visto y utilizado anteriormente sin darnos cuenta que eran funciones: alert y prompt.

Como vemos JavaScript nos provee de algunas funciones realmente útiles, de manera que podemos usarlas cada vez que las necesitemos, sin necesidad de que creemos por nuestra cuenta funciones que realicen esas mismas acciones.

Por lo tanto con las funciones tenemos dos opciones:

• Usar las funciones existentes de JavaScript, como por ejemplo alert y prompt.

• Crear nuestras propias funciones.

Antes de ver cómo crear nuestras propias funciones, entendamos mejor cómo usamos las funciones que nos provee JavaScript. Como podemos apreciar, en los casos de alert y prompt, al lado del nombre de cada función tenemos un par de paréntesis, entre los cuales colocamos el texto que queremos mostrar.

¿Qué significan estos paréntesis? Estos paréntesis nos indican que estamos llamando a una función cuyo nombre se encuentra antepuesto a este par de paréntesis. A su vez, dentro de este par de paréntesis podremos incorporar una o más indicaciones a tener en cuenta por la función invocada.

Estas indicaciones se conocen con el nombre de argumentos. En el caso de prompt y alert el argumento que le pasamos a estas funciones les indica el texto que deben incorporar en las ventanas que mostrarán. Por ejemplo en el caso de console.log() el podemos ver que entre los paréntesis indicamos el texto que deseamos sea impreso en la consola.

Podemos ver que podemos enviar más de un parámetro a una función. Por ejemplo probemos enviar dos parámetros a console.log

Como podemos ver en el ejemplo anterior, podemos tener múltiples argumentos, separados por comas. Pero vale aclarar que esto depende de cómo esté definida la función.

Algunas funciones pueden estar definidas para recibir ninguno, uno o varios argumentos; otras funciones pueden no estar definidas de esta manera.

¡Ahora es tiempo de crear nuestras propias funciones! Para ello vamos a ver algo que se llama declaración de una función. Vamos a seguir usando el archivo “script.js” que usamos en la lección anterior. Borremos todo el contenido del archivo y definamos una función llamada decirHola()

Como podemos ver toda función definida por nosotros debe iniciar con la palabra “function” (función). Luego de esta palabra se deberá colocar el nombre de la función usando la nomenclatura camel case (todas las letras en mínúsculas a excepción de las primeras letras de la segunda palabra en adelante).

Luego colocamos los paréntesis. A continuación colocamos una llave de apertura, la cual indicará el inicio del bloque de sentencias que se ejecutará esta función. En este caso, esta función ejecutará una sola sentencia, la cual imprimirá en la consola el mensaje “Hola”

Finalmente debemos colocar la llave de clausura para indicar el fin del bloque de sentencias que ejecutará esta función, y además indicar el fin de la definición de dicha función.

Bueno, ahora guardemos este archivo JavaScript y recarguemos nuestra página web para ver qué sucede.

Como podemos apreciar no ocurre nada. Nuestra consola no muestra el saludo. Esto se debe a que, si bien la función se encuentra definida, ésta no es llamada desde ninguna parte.

¿Cómo podemos solucionar esto? Simplemente añadiendo un llamado a la función dentro de nuestro archivo de JavaScript.

Acabamos de ver una forma de crear funciones, llamada definición de funciones. Ahora veamos una segunda manera de hacerlo. Esta segunda forma se denomina expresión de función. Veamos con un ejemplo cómo se define una nueva función de esta manera.

Como podemos ver, en este caso comenzamos definiendo una variable a la cual llamamos decirChau y le asignamos el valor que retorna una función. Esta función como podemos ver está definida casi de la misma manera que la función decirHola, a diferencia que esta función no posee nombre alguno.

Este tipo de funciones se las conoce como funciones anónimas. De esta manera estamos asignando el resultado de esta función anónima a la variable que llamamos decirChau.

¿Cómo podemos usar la función que acabamos de crear? Para hacerlo vamos a utilizar el nombre de la variable seguida de los paréntesis.

De esta manera podemos llamar a una función anónima cuyo resultado fue asignado a una variable, mediante un proceso de definición de funciones como expresión de función.

Ahora guardemos nuestro archivo JavaScript y recarguemos nuestra página “index.html”.

Ahora que sabemos crear funciones, quizás nos preguntemos: ¿por qué necesitamos los argumentos? Intentemos crear una nueva función que se llame decirHolaJuan()

Ahora creemos una función para saludar a María.

Y ahora creemos una función para saludar a Pedro.

Imaginemos si queremos crear una función diferente por saludo personalizado para cientos de nombres que queramos hacer. Sería una tarea cansadora, ¿no? Los desarrolladores ponen constantemente en práctica una idea llamada DRY (Don’t Repeat Yourself - No te repitas).

Idealmente queremos programar tan eficientemente como sea posible. Una forma de hacerlo es añadiendo argumentos. De esta manera podemos añadir un argumento con el nombre de “nombre”, y usarlo cuando imprimimos nuestro saludo en la consola.

Veamos este ejemplo, pero antes eliminemos todo el código que teníamos para definir nuevamente nuestra función decirHola(), pero esta vez definida con el parámetro nombre.

Ahora, cada vez que queramos saludar a alguien por su nombre podremos ejecutar el siguiente código: decirHola(nombre);

Como vemos con los parámetros podemos ahorrarnos muchas líneas de código. Eso es lo que hacen los argumentos. Los argumentos nos permiten no repetir código innecesario, y hacer a nuestras funciones más útiles.

Ahora veamos otra cosa que podemos hacer con las funciones. Borremos todo el código de nuestro archivo JavaScript, y creemos la función multiplicar() de la siguiente manera:

Añadamos el llamado a nuestra función pasándole dos valores numéricos.

Guardamos nuestro archivo JavaScript, y recargamos la página “index.html” en nuestro navegador web.

Ahora en la consola de nuestro navegador escribamos: multiplicar

Como vemos, la salida consola nos indica con una letra “f” que se trata de una función, y además nos muestra toda su definición.

Ahora probemos ejecutar en la consola un llamado a esta función pasándole dos parámetros numéricos

Obtenemos “undefined” como salida. ¿Qué pasa si cambiamos los valores de los parámetros que escribimos?

Seguimos obteniendo “undefined”. ¿Por qué ocurre esto? Bueno, lo que vamos a hacer para averiguarlo se llama debugging (depuración). Investiguemos qué está pasando aquí. Para ello, vamos a añadir la sentencia console.log(a, b) para asegurarnos de que la función se ejecuta correctamente.

Guardamos nuestro archivo JavaScript y recargamos el archivo HTML en el navegador web.

Obtenemos la salida que buscábamos: la sentencia console.log(a, b) se ejecutó correctamente.

Probemos ejecutar la función nuevamente.

Vemos que la función está trabajando, pero sigue devolviéndonos “undefined”. Bueno, veamos esto en un diagrama para ayudarnos a entenderlo mejor.

Una función posee una entrada, la cual se indica dentro de los paréntesis. Esta entrada puede estar compuesta de cero, uno o varios parámetros. En nuestro ejemplo los parámetros son 5 y 10.

Luego la función lleva a cabo las acciones que han sido programadas en su interior. En en nuestro ejemplo la acción consiste en multiplicar el primer parámetro por el segundo.

Y finalmente obtenemos una salida.

En nuestro ejemplo no estamos obteniendo esa salida. ¿Por qué ocurre esto? Porque una función trabaja de la siguiente manera:

¿Qué significan todas las flechas del gráfico anterior? Bueno, analicemos este gráfico en detalle.

La entrada recibe dos parámetros:

5 y 10.

La función realiza algunas acciones, en el caso de nuestro ejemplo ejecuta la sentencia “console.log”, la cual imprime un mensaje en la consola.

Pero nunca hemos indicado el retorno de un valor. Cuando no retornamos un valor la salida de nuestra función será “undefined” (indefinida). En cambio, cuando retornamos algo, nuestra función retornará un valor.

En JavaScript la manera de retornar un valor en una función es colocando “return” dentro de ella. Probemos añadir este return al principio de la sentencia de la multiplicación de a y b. Eliminemos la sentencia console.log que usamos para la depuración.

Ahora guardemos nuestro archivo JavaScript, recarguemos nuestro archivo HTML y probemos nuevamente usar la función en nuestra consola.

Podemos ver que ahora si obtenemos el resultado buscado. Este es un concepto clave que necesitamos recordar siempre que queramos que nuestras funciones retornen un valor.

Ahora, ¿qué sucede si una misma función tiene más de una sentencia “return”? Probemos para ver qué sucede.

¿Qué sucede si cambiamos el orden de las sentencias “return”?

Como podemos ver, las funciones solo retornan un único valor. Return nos brinda una manera en la que podemos finalizar una función. Apenas se ejecuta una sentencia “return” dentro de una función, esta función finaliza su ejecución y retorna el valor correspondiente a la sentencia return.

En nuestro ejemplo ejecutamos la función multiplicar y le pasamos los parámetros 5 y 10. La función multiplicar toma el valor 5 como su parámetro “a” y el valor 10 como su parámetro “b”. Ahora dentro de la función ejecuta su primera sentencia: return a;

Esta sentencia indica que la función a finalizado su ejecución y retornará el valor del parámetro “a”, el cual en nuestro caso es 5.

Todas las demás sentencias que se encuentran después del primer return, no se ejecutarán.

Existen casos en los que es útil poseer más de una sentencia return. Añadamos una sentencia “if” a nuestro ejemplo:

Probemos multiplicar 5 y 4.

Como vemos obtuvimos 20. La multiplicación se realizó porque ni “a” es mayor que 10, ni “b” es mayor que 10.

Ahora multipliquemos 5 y 40.

Como vemos obtuvimos el texto “Es una multiplicación muy difícil”, debido a que “b” es mayor que 10.

Como podemos ver, en este caso tenemos dos sentencias “return”, cada una ubicada en una rama de la decisión de la sentencia “if”.

¿Qué sucedería si coloco una tercer sentencia “return” para que se ejecute luego de toda la sentencia “if”?

Esta tercer sentencia no se ejecutará nunca, ya que la ejecución de la función finalizará antes, cuando ejecute alguna de las dos sentencias “return” que se encuentran en las ramas de la sentencia “if”.

Ahora veamos las que se conocen como funciones internas. En JavaScript las funciones son consideradas variables. Eso significa que podemos asignar el resultado de una función a una variable.

De esta manera podemos llamar a la función multiplicar de la siguiente manera:

Acabamos de ver uno de los tópicos más difíciles de JavaScript, el cual es funciones. Es muy importante que entendamos bien las funciones, que serán el núcleo de este curso de JavaScript.

Bueno, eso es todo por esta lección.

Nos vemos en la siguiente.

¡Adios!