Introducción
Una función es un bloque de código que realiza una acción o devuelve un valor. Las funciones son códigos personalizados definidos por programadores que son reutilizables y, por lo tanto, pueden hacer que los programas sean más modulares y eficientes.
En este tutorial, aprenderemos varias formas de definir una función, llamar a una función y usar parámetros de función en JavaScript.
Definición de una función
Las funciones se definen o declaran con la palabra clave de function A continuación se muestra la sintaxis de una función en JavaScript.
function nameOfFunction() {
//Code to be executed
}La declaración comienza con la function, seguida del nombre de la función. Los nombres de las funciones siguen las mismas reglas que las variables: pueden contener letras, números, guiones bajos y signos de dólar y, a menudo, se escriben en mayúsculas. El nombre va seguido de una serie de paréntesis que se pueden utilizar para parámetros opcionales. El código de la función está encerrado entre corchetes, al igual que una instrucción for if.
En nuestro primer ejemplo, haremos una declaración de función (declaraciones de función) para imprimir una greeting en la consola.
//Initialize greeting function
function greet() {
console.log("Hello, World!");
}Aquí tenemos el código para imprimir Hello, World! en la consola contenida dentro de la función greet(). Sin embargo, no pasará nada y no se ejecutará ningún código hasta que invocamos (invocamos) o llamaremos a la función. Puede invocar una función escribiendo el nombre de la función seguido de paréntesis.
//Invoke the function
greet();Ahora los vamos a juntar, definiendo nuestra función e invocándola.
//Initialize greeting function
function greet() {
console.log("Hello, World!");
}
//Invoke the function
greet();Con la solicitud de greet();, la función se ejecutará y recibiremos la salida de Hello, World!.
Hello, World!
Ahora tenemos nuestro greet() contenido en una función y podemos reutilizarlo tantas veces como queramos.
Mediante el uso de parámetros, podemos hacer que el código sea más dinámico.
Parámetros de función
En nuestro greet.js, hemos creado una función básica que imprime Hello, World en la consola. Al usar parámetros, podemos agregar características adicionales que harán que el código sea más flexible. Los parámetros (parámetros) son entradas que se pasan a funciones como nombres y se comportan como variables locales.
Cuando un usuario inicia sesión en una aplicación, es posible que deseemos que el programa "le dé la bienvenida por su nombre", en lugar de simplemente decir " Hello, World! ".
Agregaremos un parámetro en nuestra función, llamado name, para representar el nombre de la persona a la que se saluda.
//Initialize custom greeting function
function greet(name) {
console.log(`Hello, ${name}!`);
}El nombre de la función es greet y ahora tenemos un solo parámetro entre paréntesis. El nombre del parámetro sigue las mismas reglas que el nombre de una variable. Dentro de la función, en lugar de una cadena estática que consiste en Hello, World, tenemos una cadena literal de plantilla que contiene nuestro parámetro, que ahora actúa como una variable local.
Notarás que no hemos definido nuestros name ninguna parte. Le asignamos un valor cuando invocamos nuestra función. Suponiendo que nuestro usuario llamado Noviello, llame a la función e inserte el nombre de usuario como argumento (argumento). El argumento es el valor real que se pasa a la función, en este caso es la cadena "Noviello".
//Invoke greet function with "Noviello" as the argument
greet("Noviello");El valor de "Noviello" se pasa a la función mediante el parámetro de name Ahora, siempre name toda la función, representará el valor "Noviello". Aquí está el código completo.
//Initialize custom greeting function
function greet(name) {
console.log(`Hello, ${name}!`);
}
//Invoke greet function with "Noviello" as the argument
greet("Noviello");Cuando ejecutemos el programa anterior, recibiremos el siguiente resultado.
Hello, Noviello!
Ahora tenemos un ejemplo de cómo se puede reutilizar una función. En un ejemplo del mundo real, la función extraería el nombre de usuario de una base de datos en lugar de proporcionar directamente el nombre como valor de argumento.
Además de los parámetros, las variables se pueden declarar dentro de funciones. Estas variables se conocen como variables locales (variables locales) y existen solo como parte de su bloque de funciones. El alcance de las variables determina la accesibilidad de las variables; las variables definidas dentro de una función no son accesibles desde fuera de la función, pero se pueden usar siempre que su función se use en un programa.
Valores devueltos
Se puede utilizar más de un parámetro en una función. Podemos pasar varios valores a una función y devolver un valor. Crearemos una función para encontrar la suma de dos valores, representados por x e y.
//Initialize add function
function add(x, y) {
return x + y;
}
//Invoke function to find the sum
add(9, 7);En el programa anterior, definimos una función con los parámetros x y y, a continuación, pasamos los valores de 9 y 7 a la función. Cuando ejecutamos el programa, recibiremos la suma de esos números como salida.
16
En este caso, con 9 y 7 pasados a la función sum(), el programa vuelve a 16.
return se utiliza la palabra clave return, la función deja de ejecutarse y se devuelve el valor de la expresión. Aunque el navegador mostrará el valor en la consola en este caso, no es lo mismo que usar console.log() para imprimir en la consola. Llamar a la función generará el valor exactamente donde se llamó a la función. Este valor puede usarse inmediatamente o insertarse en una variable.
Expresiones de función
En la última sección, usamos una declaración de función para obtener la suma de dos números y devolver ese valor. También podemos crear una expresión de función asignando una función a una variable.
Usando nuestro propio add, podemos aplicar directamente el valor de retorno a una variable, en este caso sum.
//Assign add function to sum constant
const sum = function add(x, y) {
return x + y;
}
//Invoke function to find the sum
sum(20, 5);25
Ahora la sum constante es una función. Podemos hacer esta expresión más concisa transformándola en una función anónima (función anónima), que es una función sin nombre. Actualmente, nuestra función tiene el nombre add, pero con las expresiones de función no es necesario nombrar la función y el nombre generalmente se omite.
//Assign function to sum constant
const sum = function(x, y) {
return x + y;
}
//Invoke function to find the sum
sum(100, 3);103
En este ejemplo, hemos eliminado el nombre de la función, que se add, y lo hemos convertido en una función anónima. Se puede usar una expresión de función nombrada para facilitar la depuración, pero generalmente se omite.
Funciones de flecha
Hasta ahora hemos visto cómo definir funciones usando la palabra clave function Sin embargo, existe un método más nuevo y conciso para definir una característica conocida como expresiones de funciones de flecha ( expresiones de función de flecha). Las funciones de flecha, como se las conoce comúnmente, están representadas por el signo igual seguido de un signo mayor que: =>.
Las funciones de flecha son siempre funciones anónimas y un tipo de expresión de función. Podemos crear un ejemplo básico para encontrar el producto de dos números.
//Define multiply function
const multiply = (x, y) => {
return x * y;
}
//Invoke function to find product
multiply(30, 4);120
En lugar de escribir la function, usamos la flecha => para indicar una función. De lo contrario, funciona de manera similar a una expresión de función regular, con algunas diferencias avanzadas sobre las que puede leer en Arrow Functions en Mozilla Developer Network.
En el caso de un solo parámetro, se pueden excluir los corchetes. En este ejemplo, estamos elevando x cuadrado, lo que solo requiere que se pase un número como argumento. Se han omitido los corchetes.
//Define square function
const square = x => {
return x * x;
}
//Invoke function to find product
square(8);64
Nota:()Con estos ejemplos particulares que consisten solo en una return, las funciones de flecha le permiten reducir aún más la sintaxis. Si la función es solo una return, puede omitir tanto las llaves como la return, como se muestra en el siguiente ejemplo.
//Define square function
const square = x => x * x;
//Invoke function to find product
square(10);100
Estos tres tipos de sintaxis producen el mismo resultado. Generalmente, es una cuestión de preferencia o estándar de codificación corporativa decidir cómo estructurar sus funciones.
Conclusión
En este tutorial, cubrimos declaraciones de funciones y expresiones de funciones, devolviendo valores de funciones, asignando valores de función a variables ES6 y funciones de flecha.
Las funciones son bloques de código que devuelven un valor o realizan una acción, lo que hace que los programas sean escalables y modulares.
