JavaScript Functions

JavaScript Functions

Contenido original de W3Schools


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" la invoca (la llama).


Ejemplo:

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

Ver ejemplo


Sintaxis de funciones de JavaScript

Una función de 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 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 que recibe la función cuando se invoca.

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


Invocación de 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 (autoinvocado)

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


Función de retorno

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

Si la función se invocó desde una declaración, JavaScript "volverá" a ejecutar el código después de la declaración que lo invocó.

Las funciones suelen calcular un valor de retorno. El valor de retorno se "devuelve" a la que "invocó":

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;
}

Ver ejemplo


¿Por qué funciones?

Con funciones puedes reutilizar código

Puedes escribir código que pueda usarse muchas veces.

Puedes 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);

Ver ejemplo


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();

Ver ejemplo


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;

Ver ejemplo


Nota: Como puedes 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 de 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:

Ejemplo:

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

Ver ejemplo

Aprenderás 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 vuelven LOCALES para 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

Ver ejemplo

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.


Traducido con 💚 desde W3Schools.com

Did you find this article valuable?

Support Santos Romero by becoming a sponsor. Any amount is appreciated!