Funciones en JavaScript

Al realizar una aplicación compleja suele ser habitual la repetición de código que realiza la misma tarea, estas instrucciones repetidas hacen que el código sea mucho más largo y en caso de tener que modificar su funcionamiento es mucho mas complejo ya que hay que hacer el cambio en todas las secciones donde se debe de hacer la modificación. Las funciones en javascript (al igual que en el resto de lenguajes), son bloques de código diseñados para una tarea en particular que solo se ejecutan cuando son requeridos por el hilo de la aplicación.

Las funciones en javascript se declaran utilizando la palabra clave function seguida el nombre de la función paréntesis donde se introducen los parámetros (separados por comas , )y llaves donde se introduce el código a ejecutar:

function nombreFuncion(parametro1, parametro2, ...){
	//código a realizar
}

El código de la función solo se activa cuando esta es invocada o llamada, que como iremos viendo puede ser tres formas:

  • A través de código
  • Por medio de un evento como un click
  • Que se autoinvoque a la función

Nombrando una función

A la hora de ponerle nombre a una función hay varias recomendaciones a tener en cuenta.

  • siguen las mismas normas que las variables
  • suelen ser o constar de un verbo en infinitivo que define la acción que realiza la función

Argumentos

Las funciones más simples no necesitan ninguna información para producir resultados, pero esto no suele ser así. La gran mayoría de nuestras funciones en JavaScript necesitan tener acceso al valor de algunas variables. Estas variables se denominan argumentos. La función define cuantos necesita y como se llaman.

De modo que cuando vayamos a invocar a la función hay que incluir los valores que esta necesita. Pero veámoslo con un ejemplo.

function sumar(numero1, numero2){
	var resultado = numero1 + numero2;
	alert('El resultado de ' + numero1 + ' + ' + numero2 + " = " + resultado);
}

var numero1 = 4;
var numero2 = 5;
sumar(numero1, numero2);

 En este código vemos los siguientes pasos:

  • Líneas 1 – 4: Se declara y define la función, diciendo los argumentos que necesita, haciendo la operación y mostrándola por un alert.
  • Líneas 6 – 7:  Se declaran dos variables que van a ser utilizadas como argumentos
  • Línea 8: Se invoca la función con los dos argumentos para que esta ejecute el código

Para invocar una función solo es necesario poner el nombre de la función y entre los paréntesis los argumentos que necesitamos, como en el caso anterior sumar (numero1, numero2)

Particularidades de los argumentos

  • No es necesario pasar variables al invocar una función, también se pueden enviar valores o cadenas como por ejemplo sumar(4,5)
  • El número de argumentos debe de ser el mismo que el que necesita la función, no obstante pueden pasarse más, en cuyo caso serían o ignorados, dejando a null o cero los que falten
  • El orden de los argumentos que se envían deben de estar siempre en el mismo orden en el que están definidos en la declaración de la función.
  • Se pueden utilizar los argumentos que queramos, aunque con una lista muy grande de estos puede resultar tedioso y complicado el invocarla
  • No es obligatorio que coincida el nombre de los argumentos que se le pasan a la función, con el nombre de los que esta necesita.

Valores de retorno

Cuando una función termina su trabajo el código sigue ejecutándose desde el punto de la llamada lo cual es muy interesante si queremos recoger el valor de una función en una variable para seguir trabajando con ella.

Por ejemplo imaginemos que queremos obtener el precio de un producto con IVA:

function calcularIVA(precio){
	preciototal = precio * 1.21;
}

var precio = 23;
var precioIVA = calcularIVA(precio);
alert(precioIVA);

En este código todo parece estar correcto pero no es es así, nos aparecerá undefined como solución.

¿A que se debe esto? La respuesta es que la función guarda para sí el valor, no lo devuelve, a este código le hace falta una nueva instrucción; return junto a la variable que queremos devolver, la cual es devuelta al flujo del código y como en este caso, la guardamos en una variable con la cual podemos seguir trabajando tranquilamente. Vamos a ver como quedaría el código:

function calcularIVA(precio){
	preciototal = precio * 1.21;
	return preciototal;
}

var precio = 23;
var precioIVA = calcularIVA(precio);
alert(precioIVA);

Ahora vemos como nos da de resultado 27,83.

En el caso de que la función no hubiera sido invocada desde una variable (línea 7), el valor devuelto se hubiera perdido y no podría utilizarse en el resto del script.

Cuando una función encuentra un return dentro de su flujo interno devuelve el valor que tenga la variable que acompaña al return en ese momento y la ejecución del script vuelve al hilo principal.

Ámbito de las variables

El ámbito o scope (en inglés) es la zona del programa donde se tiene acceso a las variables.

En Javascript existen básicamente dos ámbitos, local y global.

  • Al declarar una variable fuera de una función, esta es denominada global y se tiene acceso a ella desde cualquier parte del código
  • Si declaramos una variable sin la palabra reservada var dentro de una función esta se convertirá en global, es decir podemos acceder a ella desde cualquier parte del código siempre que el flujo del script la haya declarado
  • Si declaramos una variable con la palabra reservada var dentro de una función está sera de ámbito local y solo puede utilizarse dentro de la propia función.

Hay que tener en cuenta que cuando una variable se redeclara el nuevo valor sustituye al antiguo por lo que hay que tener cuidado a la hora de utilizar variables globales en las funciones,

La recomendación general es definir como variables locales todas aquellas variables que sean de uso exclusivo de la función. Utilizando las variables globales como un método de compartir variables entre funciones.