Cómo Definir Funciones en JavaScript

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 sus 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.

definir una función

Las funciones se definen o declaran con la palabra clave 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 palabra clavefunction, 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 con frecuencia se escriben en mayúsculas y minúsculas. El nombre va seguido de un conjunto de paréntesis, que se pueden usar para parámetros opcionales. El código de la función está contenido entre corchetes, al igual que una instrucción for o una instrucción if.,

en nuestro primer ejemplo, haremos una declaración de función para imprimir una declaración de saludo en la consola.

// Initialize greeting functionfunction greet() { console.log("Hello, World!");}

Aquí tenemos el código para imprimir Hello, World! a la consola de contenidos dentro de la etiqueta greet() función. Sin embargo, nada sucederá y ningún código se ejecutará hasta que invoquemos o llamemos a la función. Puede invocar una función escribiendo el nombre de la función seguido de los paréntesis.

// Invoke the functiongreet();

ahora los juntaremos, definiendo nuestra función e invocándola.

// Initialize greeting functionfunction greet() { console.log("Hello, World!");}// Invoke the functiongreet();

Con la llamada greet();, la función se ejecuta y vamos a recibir el Hello, World! como el programa de salida.

Output
Hello, World!

Ahora tenemos nuestro código greet() contenido en una función, y podemos reutilizarlo tantas veces como queramos.

Usando parámetros, podemos hacer que el código sea más dinámico.

parámetros de función

en nuestro archivo greet.js, creamos una función básica que imprime Hello, World en la consola., Usando parámetros, podemos agregar funcionalidad adicional que hará que el código sea más flexible. Los parámetros son de entrada que se pasan a las funciones como nombres y se comportan como variables locales.

Cuando un usuario inicia sesión en una aplicación, es posible que queramos que el programa los salude por su nombre,en lugar de simplemente decir: «¡Hola, Mundo!”.

agregaremos un parámetro a nuestra función, llamadoname, para representar el nombre de la persona que se recibe.,

// Initialize custom greeting functionfunction greet(name) { console.log(`Hello, ${name}!`);}

el nombre de La función es greet, y ahora tenemos un único parámetro dentro de los 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 se comporta como una variable local.

notará que no hemos definido nuestro parámetroname en ningún lugar. Le asignamos un valor cuando invocamos nuestra función., Suponiendo que nuestro usuario se llame Sammy, llamaremos a la función y colocaremos el nombre de usuario como argumento. El argumento es el valor real que se pasa a la función, en este caso es la cadena "Sammy".

// Invoke greet function with "Sammy" as the argumentgreet("Sammy");

El valor de "Sammy" se pasa a la función a través de la etiqueta name parámetro. Ahora cada vez que name se usa en toda la función, representará el valor "Sammy". Aquí está todo el código.

cuando ejecutemos el programa anterior, recibiremos la siguiente salida.

Output
Hello, Sammy!

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 un valor de argumento.

además de los parámetros, las variables se pueden declarar dentro de funciones. Estas variables se conocen como variables locales, y solo existirán dentro del ámbito de su propio bloque de función., Variable scope determina la accesibilidad de las variables; las variables que se definen dentro de una función no son accesibles desde fuera de la función, pero se pueden usar tantas veces como su función se use en un programa.

devolver valores

Se puede utilizar más de un parámetro en una función. Podemos pasar múltiples valores a una función y devolver un valor. Crearemos una función para encontrar la suma de dos valores, representados por x y y.

// Initialize add functionfunction add(x, y) { return x + y;}// Invoke function to find the sumadd(9, 7);

En el programa anterior, hemos definido una función con los parámetros x y y, y luego pasó a los valores de 9 y 7 a la función. Cuando ejecutemos el programa, recibiremos la suma de esos números como salida.

Output
16

En este caso, con la etiqueta 9 y 7 pasa al sum() función, el programa devuelve 16.,

cuando se utiliza la palabra clave return, la función deja de ejecutarse y se devuelve el valor de la expresión. Aunque en este caso, el navegador mostrará el valor de la consola, no es lo mismo que usar console.log() imprimir en la consola. La invocación de la función generará el valor exactamente donde se invocó la función. Este valor se puede usar inmediatamente o colocar 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 mismo ejemplo de función add, podemos aplicar directamente el valor devuelto a una variable, en este caso sum.

// Assign add function to sum constantconst sum = function add(x, y) { return x + y;}// Invoke function to find the sumsum(20, 5);

Output
25

Ahora sum constante es una función. Podemos hacer que esta expresión sea más concisa convirtiéndola en una función anónima, que es una función sin nombre., Actualmente, nuestra función tiene el nombre add, pero con expresiones de función no es necesario nombrar la función y el nombre generalmente se omite.

// Assign function to sum constantconst sum = function(x, y) { return x + y;}// Invoke function to find the sumsum(100, 3);

Output
103

En este ejemplo, hemos quitado el nombre de la función, que fue add, y se convirtió en una función anónima. Una expresión de función con nombre podría usarse para ayudar en la depuración, pero generalmente se omite.,

funciones de flecha

hasta ahora, hemos pasado por cómo definir funciones usando la palabra clave function. Sin embargo, hay un método más nuevo y conciso para definir una función conocida como expresiones de función arrow a partir de ECMAScript 6. Las funciones de flecha, como se les conoce comúnmente, están representadas por un 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 functionconst multiply = (x, y) => { return x * y;}// Invoke function to find productmultiply(30, 4);

Output
120

en Lugar de escribir la palabra clave function, utilizamos la etiqueta => 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 funciones de flecha en la red de desarrolladores de Mozilla.

en el caso de un solo parámetro, se pueden excluir los paréntesis. En este ejemplo, estamos cuadrando x, que solo requiere que se pase un número como argumento., Se han omitido los paréntesis.

// Define square functionconst square = x => { return x * x;}// Invoke function to find productsquare(8);

Output
64

nota: en el caso de que no haya parámetros, se requiere un conjunto vacío de paréntesis () en las funciones de flecha.

con estos ejemplos particulares que solo consisten en una instrucción return, las funciones de flecha permiten reducir aún más la sintaxis. Si la función es solo una línea return, se pueden omitir tanto los corchetes como la instrucción return, como se ve en el ejemplo siguiente.,

// Define square functionconst square = x => x * x;// Invoke function to find productsquare(10);

Output
100

Todos los tres de estos tipos de sintaxis en la misma salida. Generalmente es una cuestión de preferencia o estándares de codificación de la empresa decidir cómo estructurará sus propias funciones.

conclusión

en este tutorial, cubrimos declaraciones de funciones y expresiones de funciones, devolviendo valores de funciones, asignando valores de funciones a variables y funciones de flecha ES6.

Las funciones son bloques de código que devuelven un valor o realizan una acción, haciendo que los programas sean escalables y modulares.