Funciones en JavaScript
Este artículo explica las funciones en JavaScript.
YouTube Video
Funciones en JavaScript
Funciones en JavaScript son bloques de código reutilizable que se usan para realizar tareas específicas. Usar funciones mejora la legibilidad del código y facilita su mantenimiento. Las funciones se pueden definir de varias maneras y manipular de forma flexible utilizando argumentos y valores de retorno.
Formas de Definir Funciones
Declaración de Funciones
Las funciones se pueden definir usando la palabra clave function. Las declaraciones de funciones son elevadas (hoisted) antes de que el código se ejecute, por lo que se pueden llamar antes de que sean definidas.
1console.log(greet("Everyone")); // Hello, Everyone
2
3function greet(name) {
4 return "Hello, " + name;
5}
6
7console.log(greet("Alice")); // Hello, Alice
En este ejemplo, debido a que la función greet se llama antes de su declaración, se muestran Hello, Everyone y Hello, Alice.
Expresión de Función
Las funciones también se pueden definir asignándolas a una variable. En este caso, la función no es elevada y solo se puede llamar después de que esté definida.
1const greet = function(name) {
2 return "Hello, " + name;
3};
4
5console.log(greet("Bob")); // Hello, Bob
En este ejemplo, se mostrará Hello, Bob.
Función Flecha
Las funciones de flecha son una forma de definir funciones con una sintaxis más corta. Son particularmente útiles al usar funciones anónimas (funciones sin nombre). Las funciones de flecha también tienen un comportamiento diferente respecto a la palabra clave this.
1const greet = (name) => {
2 return "Hello, " + name;
3};
4
5// When it can be expressed in a single line,
6// `return` and curly braces can be omitted
7const greetShort = name => "Hello, " + name;
8
9console.log(greet("Charlie")); // Hello, Charlie
10console.log(greetShort("Dave")); // Hello, Dave
Las funciones pueden ser declaradas como greet y greetShort en este ejemplo. Si la función tiene una sola línea, puedes omitir las {} (llaves) como en greetShort.
Elementos de una Función
Argumentos
Los valores pasados a una función se llaman argumentos. Al especificar argumentos al definir una función, puedes pasar valores al llamarla.
1function add(a, b) {
2 return a + b;
3}
4
5console.log(add(2, 3)); // 5
Argumentos por Defecto
Puedes especificar un valor por defecto si no se pasa ningún valor a los argumentos.
1function greet(name = "Guest") {
2 return "Hello, " + name;
3}
4
5console.log(greet()); // Hello, Guest
6console.log(greet("Alice")); // Hello, Alice
En este ejemplo, si se llama a greet(), se usará el valor predeterminado Guest.
Valor de Retorno
Puedes devolver un valor de retorno desde una función utilizando la declaración return. Si no hay una declaración return, la función devuelve undefined.
1function greet(name) {
2 console.log('Hello, ' + name + '!');
3}
4function square(num) {
5 return num * num;
6}
7
8console.log(square(4)); // 16
9console.log(greet('Alice')); // undefined
En este ejemplo, dado que greet no devuelve un valor, el valor de retorno es undefined.
Función Anónima
Una función sin nombre se llama función anónima. A menudo se utilizan como expresiones de función o funciones de flecha.
1const double = function(num) {
2 return num * 2;
3};
4
5console.log(double(5)); // 10
Expresión de Función Ejecutada Inmediatamente (IIFE)
Una Expresión de Función Invocada Inmediatamente (IIFE) es una función que se ejecuta tan pronto como se define. Por lo general, se utiliza para controlar el alcance.
1/* Example of IIFE: Immediately Invoked Function Expression */
2(function() {
3 console.log("This is an IIFE");
4})(); // This is an IIFE
Se ejecuta tan pronto como se declara.
Función de Retrolamada
Pasar una función como argumento a otra función para su ejecución posterior se denomina función de callback. Se utiliza con frecuencia en el procesamiento asíncrono y la gestión de eventos.
1function processData(callback) {
2 let data = "Processed Data";
3 callback(data);
4}
5
6processData(function(result) {
7 console.log(result); // Processed Data
8});En este ejemplo, se pasa como función de callback una función que muestra un valor en la consola.
Función Recursiva
Llamar a una función a sí misma se denomina recursión, y una función que realiza procesamiento repetitivo utilizando esto se llama función recursiva. Por ejemplo, una función para calcular un factorial se puede implementar utilizando recursión de la siguiente manera.
1function factorial(n) {
2 if (n === 0) {
3 return 1;
4 } else {
5 return n * factorial(n - 1);
6 }
7}
8
9console.log(factorial(5));
10// Output : 120
11// (5 * 4 * 3 * 2 * 1 = 120)
En este ejemplo, se mostrará el factorial de 5, que es 120.
Palabra Clave this
El this utilizado dentro de una función indica a qué objeto se refiere la función. En una función normal, se refiere al objeto que la llama, pero en las funciones flecha, conserva el this del ámbito en el que fue definida.
1const obj = {
2 name: "Alice",
3 greet: function() {
4 console.log(this.name); // Refers to "Alice"
5 }
6};
7
8obj.greet(); // Alice
9
10const obj2 = {
11 name: "Bob",
12 greet: () => {
13 // Arrow function refers to the outer scope (undefined here)
14 console.log(this.name);
15 }
16};
17
18obj2.greet(); // undefined
El greet de la variable obj se declara utilizando la palabra clave function. Por lo tanto, la palabra clave this se refiere al objeto de la variable obj. Por otro lado, el greet de la variable obj2 se declara utilizando una función flecha. Por lo tanto, la palabra clave this se refiere al objeto del ámbito externo y es undefined en este ejemplo.
Ámbito de Función y Closures
Las variables definidas dentro de una función no pueden ser accedidas desde fuera de la función. Esto se llama ámbito de función. También existe una característica llamada closure que conserva el ámbito en el punto en que se define la función.
1function outer() {
2 let outerVar = "I am outer!";
3
4 function inner() {
5 console.log(outerVar); // Can access outerVar
6 }
7
8 return inner;
9}
10
11const innerFunc = outer();
12innerFunc(); // I am outer!
En este ejemplo, la función inner puede acceder a la variable outerVar porque conserva el ámbito en el que fue definida.
Resumen
- Hay varias maneras de definir funciones, incluyendo declaraciones de función, expresiones de función y funciones flecha.
- Las funciones pueden tomar argumentos y devolver valores.
- Existen usos especiales como funciones de callback y funciones recursivas.
- Se debe tener cuidado con el manejo de
this, ya que las funciones flecha y las funciones normales se comportan de manera diferente. - Los closures se pueden usar para acceder a variables internas desde fuera del ámbito.
Las funciones son uno de los conceptos importantes en JavaScript, aprovechando su estructura flexible.
Puedes seguir el artículo anterior utilizando Visual Studio Code en nuestro canal de YouTube. Por favor, también revisa nuestro canal de YouTube.