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.
¿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
- Usa la palabra clave función seguido del nombre de la función.
- Después del nombre de la función, abra y cierre los paréntesis.
- Después del paréntesis, abra y cierre las llaves.
- 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
undefineda menos que se proporcione un valor predeterminado, comogreetingestá aquí. - Los argumentos adicionales son ignorados por la lista de parámetros pero siguen siendo accesibles a través de la
argumentsobjeto dentro de cualquier función que no sea una función flecha. - Un parámetro rest escrito como
...valuesrecopila 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
vardentro de una función son visibles a lo largo de esa función, mientras queletyconstestá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.
