JavaScript que define y llama funciones con un ejemplo

⚡ Resumen inteligente

JavaLas funciones de script agrupan bloques de código reutilizables que se ejecutan solo cuando se les llama, y ​​este tutorial muestra cómo declarar una, pasarle argumentos y devolver un valor a quien la llama.

  • 🔘 Sintaxis: La palabra clave `function`, un nombre, paréntesis y llaves definen toda función clásica.
  • ☑️ Vocación: Code El código dentro de una función se ejecuta solo cuando se invoca el nombre de la función entre paréntesis.
  • ✅ Argumentos: Los valores que se colocan dentro de los paréntesis pasan datos desde quien llama a la función al cuerpo de la misma.
  • 🧪 Regreso: La palabra clave `return` devuelve un valor a quien realiza la llamada y detiene la ejecución en ese punto.
  • 🛠️ Variantes: Las declaraciones, las expresiones, las funciones flecha, las IIFE y las funciones de devolución de llamada se adaptan a situaciones diferentes.
  • 📊 Alcance: Las declaraciones de funciones se elevan, mientras que las expresiones de función y las funciones flecha no.

JavaScript para definir y llamar a funciones

¿Qué es la función en Java¿Texto?

Las funciones son muy importantes y útiles en cualquier lenguaje de programación, ya que permiten reutilizar el código. Una función es un bloque de código que se ejecuta únicamente cuando se la llama. Si necesitas usar varias líneas de código repetidamente, puedes crear una función que incluya esas líneas y luego llamarla donde quieras.

Nada dentro de las llaves se ejecuta por sí solo. El navegador almacena el bloque con el nombre que le diste, y el código se ejecuta solo cuando ese nombre se escribe con paréntesis después, como por ejemplo: myFunction()Por lo tanto, las funciones se sitúan en el centro de todo. JavaScript programa, ya sea que el guion esté en funcionamiento dentro de la página o en un archivo externo.

Cómo crear una función en JavaScript

  1. Usa la palabra clave función seguido del nombre de la función.
  2. Después del nombre de la función, abra y cierre los paréntesis.
  3. Después del paréntesis, abra y cierre las llaves.
  4. Entre llaves, escriba sus líneas de código.

Sintaxis:

function functionname()
{

  lines of code to be executed

}

El siguiente ejemplo define myFunction() y luego la llama en la siguiente línea, por lo que el mensaje aparece tan pronto como se carga la página. Pruébalo tú mismo:

<html>
<head>
	<title>Functions!!!</title>
	<script type="text/javascript">
      function myFunction()
      {
      	document.write("This is a simple function.<br />");
      }
		myFunction();
	</script>
</head>
<body>
</body>
</html>

Función con argumentos

También puedes crear funciones con argumentos. Los argumentos deben especificarse entre paréntesis.

Sintaxis:

function functionname(arg1, arg2)

{

  lines of code to be executed

}

Aquí countVowels() Recibe el nombre que el visitante escribe en el campo correspondiente, recorre cada carácter e informa cuántas vocales contiene el nombre. Pruébalo tú mismo:

<html>
<head>
	<script type="text/javascript">
		var count = 0;
		function countVowels(name)
		{
			for (var i=0;i<name.length;i++)
			{
              if(name[i] == "a" || name[i] == "e" || name[i] == "i" || name[i] == "o" || name[i] == "u")
              count = count + 1;
			}
		document.write("Hello " + name + "!!! Your name has " + count + " vowels.");
		}
   	 	var myName = prompt("Please enter your name");
    	countVowels(myName);
	</script>
</head>
<body>
</body>
</html>

JavaValor de retorno del script

También puede crear funciones JS que devuelvan valores. Dentro de la función, necesitas usar la palabra clave volvemos seguido del valor a devolver.

Sintaxis:

function functionname(arg1, arg2)

{

  lines of code to be executed

  return val1;

}

En este último ejemplo returnSum() Devuelve el total a la línea que la llamó, de modo que el resultado se puede unir en una oración en lugar de imprimirse dentro de la función. Pruébalo tú mismo:

<html>
<head>
	<script type="text/javascript">
		function returnSum(first, second)
        {
          var sum = first + second;
          return sum;
        }
      var firstNo = 78;
      var secondNo = 22;
      document.write(firstNo + " + " + secondNo + " = " + returnSum(firstNo,secondNo));
	</script>
</head>
<body>
</body>
</html>

Tipos de funciones en JavaScript

Los tres ejemplos anteriores utilizan la declaración de función clásica, pero moderna. JavaScript ofrece varias otras formas. Se diferencian principalmente en si el motor las eleva y en cómo cada una trata el this palabra clave.

Tipo de función Sintaxis típica cuando se usa
Declaración de función función saludar() { } Lógica con nombre y reutilizable; elevada a la cima de su alcance.
Expresión de función const greet = function () { }; Almacenar una función en una variable; no se realiza un "hoisting" (elevación).
Función flecha (ES6) const greet = () => { }; Llamadas de retorno cortas; hereda esto del ámbito circundante.
Función anónima setTimeout(function () { }, 100); Lógica de un solo uso que se pasa directamente a otra función.
IFE (función () { })(); Se ejecuta inmediatamente y mantiene sus variables privadas.
Devolución de llamada elementos.forEach(showItem); Una función que se pasa a otra función y se invoca posteriormente.

Nota sobre los ejemplos anteriores: Las muestras históricas utilizan var y document.write()y ambos siguen funcionando en todos los navegadores. La práctica actual declara variables con let or const y imprime la salida a través de console.log() o estableciendo textContent en un elemento, porque document.write() borra una página que ya ha terminado de cargarse. type="text/javascript" Este atributo también es opcional en HTML5.

Parámetros de función, argumentos y valores predeterminados

Los parámetros son los nombres de marcador de posición que aparecen en la definición, mientras que los argumentos son los valores reales que se proporcionan cuando se llama a la función. En countVowels(name) arriba, name es el parámetro y el texto escrito en la solicitud es el argumento.

function greet(user, greeting = "Hello")
{
  return greeting + ", " + user;
}

greet("Ann");
greet("Ann", "Welcome");
  • Un parámetro sin argumento coincidente se convierte en undefined a menos que se proporcione un valor predeterminado, como greeting está aquí.
  • Los argumentos adicionales son ignorados por la lista de parámetros pero siguen siendo accesibles a través de la arguments objeto dentro de cualquier función que no sea una función flecha.
  • Un parámetro rest escrito como ...values recopila todos los argumentos restantes en un genuino matriz.

Alcance de la función y elevación en JavaScript

El lugar donde se escribe una función determina qué información puede obtener y cuándo puede ser llamada. Dos reglas explican casi todas las sorpresas con las que se encuentran los principiantes.

  • Elevación: Las declaraciones de funciones se mueven al principio de su ámbito antes de que se ejecute el script, por lo que pueden llamarse en una línea anterior a su definición. Las expresiones de función y las funciones flecha no se elevan y generan un error si se llaman prematuramente.
  • Alcance: variables declaradas con var dentro de una función son visibles a lo largo de esa función, mientras que let y const están limitados al bloque en el que se encuentran. Todo lo que se declara fuera de cada función es global.

El contador de vocales lo demuestra en la práctica. count La variable se declara fuera de la función, por lo que se llama countVowels() Una segunda vez en la misma página, el contador continúa sumándose al total anterior en lugar de reiniciarse a cero. Mover la declaración dentro de la función la reiniciaría en cada llamada.

Estos scoping Las reglas se trasladan también al código del lado del servidor, razón por la cual se aplica el mismo razonamiento cuando se escriben funciones para Node.jsy por qué el comportamiento funcional aparece tan a menudo en JavaPreguntas para la entrevista del guion.

Preguntas Frecuentes

La función sigue ejecutándose, pero devuelve undefinedAsignar esa llamada a una variable almacena undefined, por eso el ejemplo de suma utiliza return en lugar de imprimir el total dentro del cuerpo de la función.

Los asistentes de IA pueden sugerir el cuerpo de una función a partir de un comentario, explicar línea por línea una función de devolución de llamada desconocida y proponer entradas de prueba. Siempre ejecute la sugerencia, ya que el código generado puede asumir silenciosamente una variable o una API del navegador que la página no proporciona.

Generalmente sí. Copiloto de GitHub Completa la sintaxis de flecha y los patrones de devolución de llamada comunes desde el contexto. Compruebe el valor de this en el resultado, ya que una función flecha lo hereda mientras que una expresión de función clásica no.

Un cierre es una función que incluye las variables externas a las que hacía referencia al ser creada. La función interna continúa leyendo esas variables incluso después de que la función externa haya finalizado, que es como se construyen los contadores privados y las funciones de fábrica.

Sí, y eso se llama recursión. La función debe contener un caso base que detenga la cadena; de lo contrario, el navegador genera un error de rango una vez que se agota la pila de llamadas. La recursión es adecuada para problemas de recorrido de árboles y de cálculo de factoriales.

Una función asíncrona siempre devuelve una promesa. Dentro de ella, `await` pausa la función hasta que la promesa esperada se resuelva, permitiendo que el código asíncrono se lea de arriba abajo. El resto de la página sigue respondiendo mientras la función espera.

Adjúntelo a un detector de eventos: seleccione el botón y, a continuación, llame a addEventListener con el nombre del evento y la referencia a la función. El antiguo atributo onclick en línea también funciona, aunque ahora se prefiere separar el marcado del comportamiento.

Los paréntesis la invocan inmediatamente y producen su resultado. Escribir solo el nombre pasa la función misma, que es lo que necesitan las funciones de devolución de llamada. Agregar paréntesis por error dentro de setTimeout ejecuta el código de inmediato en lugar de más tarde.

Resumir este post con: