Funciones Javascript

Una función JavaScript es un bloque de código diseñado para realizar una tarea en particular. Una función JavaScript se ejecuta cuando “algo” lo invoca (lo llama).

Ejm

function myFunction(p1, p2) {
  return p1 * p2;   // The function returns the product of p1 and p2
}

Sintaxis de las funciones Javascript

Una función JavaScript se define con la palabra clave function, seguida de un nombre, seguido de paréntesis ().

Los nombres de funciones pueden contener letras, dígitos, subrayados y signos de dólar (las mismas reglas que las variables).

Los paréntesis pueden incluir nombres de parámetros separados por comas:
(parámetro1, parámetro2, …)

El código que se ejecutará, por la función, se coloca entre llaves: {}

Sintaxis

function name(parameter1, parameter2, parameter3) {
  // code to be executed
}

Los parámetros de la función se enumeran entre paréntesis () en la definición de la función.

Los argumentos de la función son los valores recibidos por la función cuando se invoca.

Dentro de la función, los argumentos (los parámetros) se comportan como variables locales.

Una función es muy similar a un procedimiento o una subrutina, en otros lenguajes de programación.

Invocar a una función

El código dentro de la función se ejecutará cuando “algo” invoque (llame) la función:

  • Cuando ocurre un evento (cuando un usuario hace clic en un botón)
  • Cuando se invoca (llama) desde el código JavaScript
  • Automáticamente (auto invocado)

Función return

Cuando JavaScript alcanza una declaración return, la función dejará de ejecutarse.

Si la función fue invocada desde una declaración, JavaScript “regresará” para ejecutar el código después de la declaración de invocación.

Las funciones a menudo calculan un valor return. El valor return es “devuelto” a la “persona que llama”.

Ejm

Calcular el producto de 2 números y devolver el resultado.

<!DOCTYPE html>
<html lang="es">
	<body>
    	<h2>Funciones Javascript</h2>
        <p>Este ejm llama a una función la cual calcula y devuelve un resultado</p>
        
        <p id="demo"></p>
        
        <script>
			var x = myFunction(2 ,3);
			document.getElementById("demo").innerHTML = x;
			
			function myFunction(a,b)
			{
				return a * b;	
			}
		</script>
    </body>
</html>

Por qué funciones

Puedes reutilizar el código: define el código una vez y úsalo muchas veces.

Puedes usar el mismo código muchas veces con diferentes argumentos, para producir resultados diferentes.

Ejm: convertir de Fahrenheit a Celsius

<!DOCTYPE html>
<html lang="es">
	<body>
    	<h2>Funciones Javascript</h2>
        <p>Convertir de grados Fahrenheit a grados Celsius</p>
        
        <p id="demo"></p>
        
        <script>
			function toCelsius(f)
			{
				return(5/9) * (f-32);	
			}
			
			document.getElementById("demo").innerHTML = toCelsius(77);
		</script>
    </body>
</html>

El operador () invoca la función

Usando el ejemplo anterior, toCelsius se refiere al objeto de función, y toCelsius() se refiere al resultado de la función.

Acceder a una función sin () devolverá el objeto de función en lugar del resultado de la función.

Ejm

<!DOCTYPE html>
<html lang="es">
	<body>
    	<h2>Ejm con funciones</h2>
        <p>Acceder a una función sin () devolverá la definición de la función
        en lugar del resultado de la función.</p>
        
        <p id="demo"></p>
        
        <script>
			function toCelsius(f)
			{
				return (5/9) * (f-32);	
			}
			
			document.getElementById("demo").innerHTML = toCelsius;
		</script>
    </body>
</html>

Funciones utilizadas como valores variables

Las funciones se pueden usar de la misma manera que las variables, en todos los tipos de fórmulas, tareas y cálculos.

Ejm: En lugar de usar una variable para almacenar el valor de retorno de una función

<!DOCTYPE html>
<html lang="es">
	<body>
    	<h2>Funciones Javascript</h2>
        
        <p id="demo"></p>
        
        <script>
			document.getElementById("demo").innerHTML = 
			"La temperatura es " + toCelsius(77) + " Celsius";
			
			function toCelsius(fahrenheit)
			{
				return (5/9) * (fahrenheit-32);	
			}
		</script>
    </body>	
</html>

Puedes usar la función directamente como valor de una variable.

var text = "The temperature is " + toCelsius(77) + " Celsius";

Variables locales

Las variables declaradas dentro de una función JavaScript se vuelven LOCALES a la función.

Solo se puede acceder a las variables locales desde la función.

Ejm

<!DOCTYPE html>
<html lang="es">
	<body>
    	<h2>Funciones Javascript</h2>
        <p>Fuera de myFunction() carName es undefined (indefinido)</p>
        
        <p id="demo1"></p>
        
        <p id="demo2"></p>
        
        <script>
			myFunction();
			
			function myFunction()
			{
				var carName="Volvo";
				document.getElementById("demo1").innerHTML = typeof carName + "" + carName;	
			}
			
			document.getElementById("demo2").innerHTML = typeof carName;
		</script>
    </body>
</html>

Como las variables locales solo se reconocen dentro de sus funciones, las variables con el mismo nombre se pueden usar en diferentes funciones.

Las variables locales se crean cuando se inicia una función y se eliminan cuando se completa la función.