Funciones de JavaScript

Tabla de contenido

Una función de JavaScript es un bloque de código diseñado para realizar una tarea particular.

Una función de JavaScript se ejecuta cuando "algo" lo invoca (lo llama).

Ejemplo

//  Function to compute the product of p1 and p2
function myFunction(p1, p2) {
    return p1 * p2;
}

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Functions</h1>

<p>Call a function which performs a calculation and returns the result:</p>

<p id="demo"></p>

<script>
function myFunction(p1, p2) {
  return p1 * p2;
}

let result = myFunction(4, 3);
document.getElementById("demo").innerHTML = result;
</script>

</body>
</html>

Sintaxis de funciones de JavaScript

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

Los nombres de las funciones pueden contener letras, dígitos, guiones bajos 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 a ejecutar, por la función, se coloca entre llaves: {}

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 recibido por la función cuando es invocada.

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

Invocación de función

El código dentro de la función se ejecutará cuando "algo" invoca (llama) al función:

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

Aprenderá mucho más sobre la invocación de funciones más adelante en este tutorial.

Función Retorno

Cuando JavaScript llega a 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 suelen calcular un valor de retorno. El valor de retorno es "regresó" a llamador":

Ejemplo

Calcula el producto de dos números y devuelve el resultado:

// Function is called, the return value will end up in x
let x = myFunction(4, 3);

function myFunction(a, b) {
// Function returns the product of a and b
    return a * b;
}

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Functions</h1>

<p>Call a function which performs a calculation and returns the result:</p>

<p id="demo"></p>

<script>
let x = myFunction(4, 3);
document.getElementById("demo").innerHTML = x;

function myFunction(a, b) {
  return a * b;
}
</script>

</body>
</html>

¿Por qué funciones?

Con funciones puedes reutilizar código

Puede escribir código que pueda usarse muchas veces.

Puede utilizar el mismo código con diferentes argumentos para producir resultados diferentes.

El operador

El operador() invoca (llama) a la función:

Ejemplo

Convertir Fahrenheit a Celsius:

function toCelsius(fahrenheit) {
    return (5/9) * (fahrenheit-32);
}

let value = toCelsius(77);

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Functions</h1>

<p>Invoke (call) a function that converts from Fahrenheit to Celsius:</p>
<p id="demo"></p>

<script>
function toCelsius(f) {
  return (5/9) * (f-32);
}

let value = toCelsius(77);
document.getElementById("demo").innerHTML = value;
</script>

</body>
</html>

Acceder a una función con parámetros incorrectos puede devolver una respuesta incorrecta:

Ejemplo

function toCelsius(fahrenheit) {
    return (5/9) * (fahrenheit-32);
}

let value = toCelsius();

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Functions</h1>

<p>Invoke (call) a function to convert from Fahrenheit to Celsius:</p>
<p id="demo"></p>

<script>
function toCelsius(f) {
  return (5/9) * (f-32);
}

let value = toCelsius();
document.getElementById("demo").innerHTML = value;
</script>

</body>
</html>

Acceder a una función sin() devuelve la función y no el resultado de la función:

Ejemplo

function toCelsius(fahrenheit) {
    return (5/9) * (fahrenheit-32);
}

let value = toCelsius;

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Functions</h1>

<p>Accessing a function without () returns the function and not the function result:</p>
<p id="demo"></p>

<script>
function toCelsius(f) {
  return (5/9) * (f-32);
}

let value = toCelsius;
document.getElementById("demo").innerHTML = value;
</script>

</body>
</html>

Nota

Como puede ver en los ejemplos anteriores, toCelsius se refiere al objeto de función y toCelsius() se refiere al resultado de la función.

Funciones utilizadas como valores variables

Las funciones se pueden usar de la misma manera que se usan las variables, en todo tipo de fórmulas, asignaciones y cálculos.

Ejemplo

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

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

Puedes usar la función directamente, como valor de variable:

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

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Functions</h1>
<p>Using a function as a variable:</p>

<p id="demo"></p>

<script>
let text = "The temperature is " + toCelsius(77) + " Celsius.";
document.getElementById("demo").innerHTML = text;

function toCelsius(fahrenheit) {
  return (5/9) * (fahrenheit-32);
} 
</script>

</body>
</html>

Aprenderá mucho más sobre las funciones más adelante en este tutorial.

Variables locales

Las variables declaradas dentro de una función de JavaScript se convierten en LOCAL a la función.

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

Ejemplo

// code here can NOT use carName

function myFunction() {
  let carName = "Volvo";
  // code here CAN use carName
}

// code here can NOT use carName

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Functions</h1>

<p>Outside myFunction() carName is undefined.</p>

<p id="demo1"></p>
<p id="demo2"></p>

<script>
let text = "Outside: " + typeof carName;
document.getElementById("demo1").innerHTML = text;

function myFunction() {
  let carName = "Volvo";
  let text = "Inside: " + typeof carName + " " + carName; 
  document.getElementById("demo2").innerHTML = text;
}

myFunction();
</script>

</body>
</html>

Dado que las variables locales sólo se reconocen dentro de sus funciones, las variables con el mismo nombre se pueden utilizar en diferentes funciones.

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