Funciones de JavaScript

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

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

<!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 functionpalabra clave, seguida de un nombre , seguido de paréntesis () .

Los nombres de 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 dentro de los paréntesis () en la definición de la función.

Los argumentos de una 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 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 returndeclaración, la función dejará de ejecutarse.

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

Las funciones suelen calcular un valor de retorno . El valor de retorno se "devuelve" al "invocador":

<!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

Puedes escribir código que pueda utilizarse muchas veces.

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

El operador ()

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

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

let value = toCelsius(77);

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

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

let value = toCelsius();

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

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

let value = toCelsius;

Nota

Como se puede ver en los ejemplos anteriores, toCelsiusse 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 utilizar de la misma manera que 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 utilizar la función directamente, como valor variable:

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

Variables locales

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

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

// code here can NOT use carName

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

// code here can NOT use carName

Dado que 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.



Comentarios

Publicar un comentario

Entradas populares de este blog

2-canvas

Imagen
Este código crea un lienzo en la página web y permite interactuar con él utilizando el ratón. Cuando cargas la página, la función inicializar()se ejecuta automáticamente gracias al atributo onloaden el cuerpo del HTML. Esta función configura el lienzo ( canvas) para escuchar eventos del ratón. Eventos que detectan: mousedown: Se dispara cuando haces clic sobre el lienzo. Al suceder, se ejecuta la función clickRaton()que muestra en la consola el mensaje "pulsando ratón". mouseup: Se activa cuando sueltas el botón del ratón. Llama a la función sueltaRaton(), que imprime "soltado ratón" en la consola. mousemove: Este evento detecta el movimiento del ratón mientras está sobre el lienzo. La función posicionRaton()obtiene la posición actual del ratón (coordenadas xe y) y las muestra en la consola. En resumen, este código registra interacciones básicas del ratón sobre un lienzo para capturar clics, movimientos y la acción de soltar el botón, mostrando los resultados en la ...
Leer más

8-vida protagonista

Imagen
  <!DOCTYPE html > <html lang = "en" > <head>     <meta charset = "UTF-8" >     <meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     <title> Protagonista y Disparos con Barra de Vida </title> </head> <body onload = " inicializa ()" >     <canvas id = "canvas" width = "500" height = "300" style = " border:2px solid #000" ></canvas> <script> let canvas , ctx ; let FPS = 50 ; let vida = 100 ; // Imagen del protagonista let imgMega = new Image (); imgMega . src = 'img/mega.jpg' ; // Inicialización function inicializa () {     canvas = document . getElementById ( "canvas" );     ctx = canvas . getContext ( "2d" );     setInterval ( principal , 1000 / FPS ); } // Clase Protagonista class Protagonista {     constructor ( x , y ) {         this . x = x ; ...
Leer más

5-Protagonista

Imagen
  Flujo del programa Al cargar la página, se ejecuta inicializa() . inicializa() : Configura el lienzo. Carga la imagen del protagonista. Establece un bucle con setInterval que llama a principal() 50 veces por segundo. En cada llamada a principal() : Se limpia el canvas con borraCanvas() . Se dibujan y actualizan las posiciones de los personajes ( per1 , per2 , per3 ). Se dibuja al protagonista ( prota ) en su posición actual. Resultado esperado Tres cuadrados amarillos se mueven horizontalmente dentro del canvas, rebotando entre los límites izquierdo ( x > 50 ) y derecho ( x < 400 ). Una imagen ( img/mega.jpg ) estática, que representa al protagonista, se dibuja en (200, 200) en cada frame. Por ahora, el protagonista no tiene movimiento ni interacción, pero está preparado para ser extendido con lógica adicional, como teclas para moverse. <!DOCTYPE html > <html lang = "en" > <head>     <meta charset = "UTF-8" >     <meta h...
Leer más