Creación de funciones en JavaScript

Una función es una pieza de código reutilizable que se ejecuta cuando la invocas. Las funciones le permiten reutilizar el código, haciéndolo más modular y más fácil de mantener.

Hay varias formas de crear funciones en JavaScript. Aquí aprenderá las diferentes formas de crear funciones y cómo usarlas.

Declaraciones de funciones: la forma sencilla

Una forma de crear funciones en JavaScript es a través de declaraciones de funciones. Una declaración de función es una función en JavaScript que sigue la siguiente sintaxis.

funciónnombre de la función(parámetros) {
// el código va aquí...
devolver"Esta es una declaración de función";
}

Los componentes del bloque de código anterior incluyen:

• El función palabra clave: Esta palabra clave declara una función.
• nombre de la función: Este es el nombre de la función. En la práctica, debe ser lo más descriptivo y significativo posible, indicando lo que hace la función.
instagram viewer
• parámetros: Esto representa los parámetros de la función. Los parámetros son una lista opcional de variables que puede pasar a una función cuando la llama.
• El cuerpo de la función: contiene el código que ejecutará la función cuando la llames. Está rodeado de llaves {} y puede contener cualquier código JavaScript válido.
• El devolver declaración: Esta declaración detiene la ejecución de una función y devuelve el valor especificado. En el caso anterior, llamar a la función devolvería la cadena "Esta es una declaración de función".

Por ejemplo, la siguiente declaración de función toma tres números como parámetros y devuelve su suma.

funciónañadirTresNúmeros(a B C) {
devolver a + b + c;
}

Para llamar a una declaración de función en JavaScript, escriba el nombre de la función seguido de un conjunto de paréntesis (). Si la función toma algún parámetro, páselo como argumento entre paréntesis.

Por ejemplo:

añadirTresNúmeros(1, 2, 3) // 6

El bloque de código anterior llama al añadirTresNúmero funciones y pasa 1, 2 y 3 como argumentos a la función. Si ejecuta este código, devolverá el valor 6.

polipastos de JavaScript declaraciones de funciones, lo que significa que puede llamarlas antes de definirlas.

Por ejemplo:

isHoisted(); // La función es izada
funciónisHoisted() {
consola.registro("La función está izada");
devolververdadero;
}

Como se muestra en el bloque de código anterior, llamar isHoisted antes de definirlo no arrojaría un error.

Expresiones de funciones: funciones como valores

En JavaScript, puede definir una función como una expresión. A continuación, puede asignar el valor de la función a una variable o utilizarlo como argumento para otra función.

También se conocen como funciones anónimas ya que no tienen nombres y solo puedes llamarlas desde la variable que les asignaste.

A continuación se muestra la sintaxis de una expresión de función:

constante nombrefuncion = función () {
devolver"Expresión de función";
};

Para llamar a una expresión de función en JavaScript, escriba el nombre de la variable que asignó a la función seguido de un conjunto de paréntesis (). Si la función toma algún parámetro, páselo como argumento entre paréntesis.

Por ejemplo:

nombre de la función(); // expresión de la función

Las expresiones de función son útiles cuando se crean funciones que se ejecutan en otras funciones. Los ejemplos típicos incluyen controladores de eventos y sus devoluciones de llamada.

Por ejemplo:

botón.addEventListener("hacer clic", función (evento) {
consola.registro("¡Hiciste clic en un botón!");
});

El ejemplo anterior usó una expresión de función que toma un evento argumento como una devolución de llamada al agregarEventListener función. No tiene que llamar a la función explícitamente cuando usa una expresión de función como devolución de llamada. Su función principal lo llama automáticamente.

En el caso anterior, cuando el detector de eventos recibe un hacer clic evento, llama a la función de devolución de llamada y pasa el evento objeto como argumento.

A diferencia de las declaraciones de funciones, las expresiones de funciones no se elevan, por lo que no puede llamarlas antes de definirlas. Intentar acceder a una expresión de función antes de definirla resultará en una Error de referencia.

Por ejemplo:

isHoisted(); // ReferenceError: No se puede acceder a 'isHoisted' antes de la inicialización
constante es izado = función () {
consola.registro("La función está izada");
};

Funciones de flecha: compactas y limitadas

ES6 introdujo una abreviatura para escribir funciones anónimas en JavaScript llamadas funciones de flecha. Tienen una sintaxis concisa que puede hacer que su código sea más legible, especialmente cuando se trata de funciones cortas de una sola línea.

A diferencia de otros métodos de creación de funciones, las funciones de flecha no requieren la función palabra clave. Una expresión de función de flecha consta de tres partes:

• Un par de paréntesis (()) que contiene los parámetros. Puede omitir los paréntesis si la función solo tiene un parámetro.
• Una flecha (=>), que consta de un signo igual (=) y un signo mayor que (>).
• Un par de llaves que contienen el cuerpo de la función. Puede omitir las llaves si la función consta de una sola expresión.

Por ejemplo:

// Parámetro único, retorno implícito
constante nombrefuncion = parámetro =>consola.registro("Función de flecha de parámetro único")
// Múltiples parámetros, retorno explícito
constante nombrefuncion = (parámetro_1, parámetro_2) => {
devolver"Función de flecha de parámetros múltiples"
};

Cuando omite las llaves, la función de flecha devuelve implícitamente la expresión única, por lo que no es necesario el devolver palabra clave. Por otro lado, si no omite las llaves, debe devolver explícitamente un valor usando el devolver palabra clave.

Las funciones de flecha también tienen un diferente este vinculante en comparación con las funciones regulares. En funciones regulares, el valor de este depende de cómo llames a la función. En una función de flecha, este siempre está ligado a la este valor del alcance circundante.

Por ejemplo:

constante foo = {
 nombre: "David",
 saludar: función () {
 establecerTiempo de espera(() => {
consola.registro(`Hola, mi nombre es ${este.nombre}`);
 }, 1000);
 },
};
foo.saludo(); // Registra "Hola, mi nombre es Dave" después de 1 segundo

En el ejemplo anterior, la función de flecha dentro de la saludar método tiene acceso a este nombre, a pesar de establecer tiempo de espera función lo llama. Una función normal tendría su este vinculado al objeto global.

Como su nombre lo indica, una función de invocación inmediata (IIFE) es una función que se ejecuta tan pronto como se define.

Aquí está la estructura de un IIFE:

(función () {
// código aquí
})();
(() => {
// código aquí
})();
(función (parámetro_1, parámetro_2) {
consola.log (parámetro_1 * parámetro_2);
})(2, 3);

Un IIFE consiste en una expresión de función envuelta dentro de un par de paréntesis. Sígalo con un par de paréntesis fuera del recinto para invocar la función.

Puede usar IIFE para crear ámbitos, ocultar detalles de implementación y compartir datos entre múltiples scripts. Alguna vez se usaron como sistema de módulos en JavaScript.

Crear una función de muchas maneras diferentes

Comprender cómo crear funciones en JavaScript es crucial. Esto es cierto para una función básica que realiza un cálculo simple o una función sofisticada que interactúa con otras partes de su código.

Puede usar las técnicas discutidas anteriormente para crear funciones en JavaScript y estructurar y organizar su código. Seleccione el enfoque que mejor se adapte a sus demandas, ya que cada uno tiene varios beneficios y aplicaciones.