18. Nucleo de JavaScript: funciones

¿Qué es una función?

Sintaxis de la definición de una función:

Cuando una parte de nuestro programa realiza una tarea bien diferenciada  podremos crear una función.

JavaScript viene con muchísimas funciones definidas por defecto, por ejemplo "alert()", pero nosotros podemos definir las nuestras propias.

Cuando creemos una función será necesario asignarle un nombre que nos permita identificarla. Escogeremos un nombre que describa la/s tarea/s que la función realiza en su interior.

Ejem: el siguiente código declara 2 variables y suma sus valores.

  var a = 5;
  var b = 8;
  var c = a + b;

En dicho código, la linea "var c = a + b;" suma el valor de las variables "a" y "b". Para crear nuestra primera función, sustituiremos dicha linea por la llamada a una función llamada "suma()" que previamente tendremos que definir así:

   function suma(x, y) {
    var resultado = x + y;
    return resultado;
  }

Como se puede ver, el nombre asignado a la funcion es "suma", ya que la función realiza una operación de suma. Entre parentesis aparece la declaración de los llamados parametros de la función separados por comas ("x" e "y"), que en realidad son simples variables pero sin la palabra clave "var" delante. En el interior de la función, declaramos la variable "resultado" a la que le asignamos el resultado de sumar "x" e "y". Por último, se ejecuta la sentencia "return resultado;" que devuelve el valor de variable "resultado".

Veamos como quedaría nuestro programa que suma dos numeros, pero esta vez llamando a función "suma()" que acabamos de definir:

  var a = 5;
  var b = 8;
  var c = suma(a, b);

En este caso, a la función "suma()" le pasamos las variables "a" y "b", y el valor retornado por la funcíón (13) se lo asignamos a la variable "c".

Cuando se hace uso de una función, se suele utilizar la expresión "llamar a la función" o "invocar a la función". Debemos de saber distinguir entre lo que es la definición de la función y la llamada a la función.

El código resultante sería este:

Crear funciones para reutilizar un código

Una vez que hemos creado una función podemos llamarla cuantas veces deseemos en otras partes de nuestro código.. Por ejemplo:

  var a = 5;
  var b = 8;
  var c = suma(a, b);
  var d = 6;
  var e = suma(a, d);

De esto se desprende, que otra buena razón para crear una función, además de la esgrimida al principio de este artículo, puede ser la de no repetir el mismo trozo código multiples veces en nuestro programa.

Por ejemplo, en las aplicaciones de gestión de la Seguridad Social, será necesario calcular en multiples ocasiones el tiempo que le queda a una persona para jubilarse en días. También es probable, que la legislación se cambie. En ese caso, por cada una de las veces donde aparecen las sentencias que realicen dicho calculo, será necesario acudir a ellas y realizar el cambio.

Si las sentencias que realizan dicho calculo, las metemos en una función (por ejemplo "tiempoParaJubilarseEnDias"), cada vez que la legislación se modifique, tan solo tendremos que hacer el cambio dentro de dicha función. De esta manera, además, cada vez que en la aplicación queramos calcular el tiempo que le queda a una persona para jubilarse, tan solo tendremos que llamar a la función "tiempoParaJubilarseEnDias()"

Alcance de los parametros de una función y de las variables definidas en el interior

Las variables que se declaran como parametros de una función o en el interior de la misma, no son accesibles desde fuera de esa función.

Ejemplo: imaginemos que en el código anterior, hacemos referencia a la variable x de la función suma, fuera de la misma:

  function suma(x, y) {
    var resultado = x + y; 
    return resultado;
  }

  var a = 5;
  var b = 8;
  var c = suma(a, b); 
  console.log(x);

El sentencia "console.log(x)" del anterior codigó muestra la palabra "undefined", ya que la variable "x" se ha declarado como un parametro de la función suma(), por tanto solo es accesible dentro de la función suma(). Decimos que "x" es una variable de ambito LOCAL a la función.

Lo mismo ocurre con las variable "resultado" que se han definido dentro de la función: si escribimos la función "console.log(resultado)" a continuación del código anterior, en la consola de nuestro navegador aparecerá el mensaje "ReferenceError: resultado is not defined".

Sin embargo, aquellas variables que declaremos fuera de las funciones, SÍ pueden usarse dentro de la función suma(). Ejemplo:

  function suma(x, y) {
    var resultado = x + y; 
    console.log(a);
    return resultado;
  }

  var a = 5;
  var b = 8;
  var c = suma(a, b); 
  console.log(x);

En el anterior ejemplo, hemos accedido a la variable "a" en el interior de la función suma(). Cuando declaramos una variable fuera del interior de una función, decimos que es de ambito GLOBAL.

Conclusiones

Las funciones son una recurso que debemos saber utilizar para poder sacarle provecho. En este caso, la experiencia resulta fundamental.


No se debería de crear una función por cada una de las lineas de un programa, sino cuando esta aporte mayor sencillez y claridad a un programa, lo que redundará en un mejor mantenimiento del mismo.


Ejercicio: crea una función llamada "resta" que reste dos números. A continuación realiza una llamada para comprobar su funcionamiento. Dificultad: facil.

Ejercicio: crea una función llamada "sumaElementosArray" que sume los elementos de un array. A continuación realiza una llamada para comprobar su funcionamiento. Pista: en el interior de la función, utiliza un bucle que acceda los distintos elementos del array. Puedes conocer la longitud del array a través de la propieadad "length", ejemplo mi_array.length. Dificultad: media-dificil.

Ejercicio:  crea una función que convierta las letras de una cadena de caracteres a mayusculas. A continuación realiza una llamada para comprobar su funcionamiento. Dificultad: dificil.