Definición de funciones JavaScript
En este tutorial aprenderemos cómo definir funciones en JavaScript, recomendaciones de sintáxis y el ámbito de las variables.
Definir una función
Una función en JavaScript se define con la palabra clave function seguido del nombre de la función y los paréntesis. Puede tener o no parámetros. Luego, entre llaves, un conjunto de instrucciones y opcionalmente la palabra clave return y el valor de retorno.
function nombreFunción(parámetros){
//Instrucciones
//[return valor];
}
Reglas básicas
Los nombres de las funciones deben cumplir una serie de reglas como que no puede empezar por número, no debe ser una palabra reservada del lenguaje o que no debe ser un nombre de función repetido.
Para invocar (llamar) a la función se escribe el nombre seguido de los paréntesis con los parámetros si los hay.
nombreFunción(parámetros);
Las funciones pueden recibir o no parámetros. Pueden actuar sin necesidad de que le pasemos ningún valor
//Función sin parámetros
function mostrarDia() {
var fecha = new Date();
alert("Hoy es día " + fecha.getDate());
}
//Llamada a la función.
mostrarDia();
//Función con parámetros
function areaCirculo(radio) {
var area = Math.PI * Math.pow(radio, 2);
alert("El área es: "+area);
}
//Llamada a la función.
areaCirculo(20);
Las funciones pueden devolver o no un valor. Si lo hace debemos recoger ese valor en el momento que se llama.
var resultado = nombreFunción(parámetros);
Ejemplos:
//Función que no devuelve nada
function suma(num1, num2) {
var total = num1 + num2;
alert(total);
}
//Llamada a la función.
suma(4, 6);
//Función que devuelve un valor
function resta(num1, num2) {
var total = num1 - num2;
return total;
}
//Llamada a la función. Recogemos el valor devuelto en resultado
var resultado = resta(8, 3);
alert(resultado);
Funciones anónimas
Una función puede ser anónima, es decir, no tener un nombre.
var cuadrado = function(number) {
return number * number;
}
//Llamada a la función
var resultado = cuadrado(4);
//resultado vale ahora 16
Diferencia entre una función con nombre y una anónima
Cuando declaramos una función anónima no puede ser procesada hasta que el intérprete llegue a donde está declarada. El navegador va leyendo la página de arriba abajo, entonces la llamada a la función anónima debe estar siempre más abajo.
En cambio, si se trata de una función con nombre, el intérprete lo primero que hace es buscar las declaraciones las variables y funciones que puedan existir. Después comienza a leer línea por línea. De modo que podemos poner la llamada a una función antes de que ésta haya sido declarada.
Una función puede llamar a otra función
//Primera función que devuelve un número aleatorio
function aleatorio(min, max) {
var num = Math.round(Math.random() * (max - min) + min);
return num;
}
//Segunda función que devuelve una vocal aleatoria
function vocal() {
//Declaración del array de vocales
var vocales = ("a","e","i","o","u");
//Llamada al método aleatorio
var num = aleatorio(0,4);
return vocales[num];
}
//Llamada al método vocal
var resultado = vocal(); //Resultado es una vocal
Ámbito de las variables
Las variables que se declaran dentro de una función sólo existen durante la ejecución de esa función. Son variables locales. Aunque exista otra variable con el mismo nombre fuera de la función, una no modifia a la otra.
function fechaHoy() {
//fecha es una variable local de la función
var fecha = new Date();
return fecha;
}
También podemos utilizar una variable global dentro de una función y que los cambios que se hagan afecten a la misma.
var fecha = "12/02/87"; //Variable fuera de la función
var edad = 23; //Variable fuera de la función
var nacim = 2000; //Variable fuera de la función
//Al declarar las variables dentro de la función son locales y no afectan a las que están fuera
function fechaNac(edad) {
var fecha = new Date();
var actual = fecha.getFullYear();
var nacim = actual - edad;
return nacim;
}
//Llamada a la función
alert(fechaNac(edad));
//Si se usan directamente son globales y modifican las que están fuera
var edad = 23;
function cambiaEdad(nuevaEdad) {
edad = nuevaEdad;
}
//Llamada a la función cambiaEdad
cambiaEdad(35);
//La variable global edad se ha modificado
Cuando pasamos por parámetro una variable, se crea una copia de la misma y los cambios que se realicen dentro de la función no afectan a la variable original
var edad = 23
function mayorEdad(edad) {
var mayor = false;
if(edad >= 18) {
mayor = true;
}
return mayor;
edad = 40; //Modificamos la variable edad
}
//Llamada a la función
alert(mayorEdad(edad)); //El resultado es true
alert(edad); //El resultado es 23. La variable no ha cambiado
Si lo que pasamos por parámetro es un array o un objeto, los cambios que se realizan sí que afectarán a los originales
var notas = [5,8,3]; //Array de 3 posiciones
function mayor(notas) { //Función que calcula el mayor
var mayor = notas[0];
for(var i=0;i<notas.length; i++){
if(mayor < notas[i]){
mayor = notas[i];
}
}
notas.push(12); //Añadimos un elemento más al Array.
return mayor;
}
//Llamada a la función
alert(mayor(notas)); //El resultado es 8
//Si volvemos a llamar vemos que el Array ha cambiado
alert(mayor(notas)); //El resultado es ahora 12
Si te ha gustado no olvides compartir en redes sociales.
[addthis tool=»addthis_inline_share_toolbox_6jt6″]
Espero que te haya servido. Cualquier duda deja un comentario. Un saludo