Menú lateral

Funciones en JavaScript

Compartir
PorPublicado el

Funciones de primera clase

FunciónCódigo
Función de primera claseTambién conocida como "función ciudadana de primera clase") es un concepto que refiere a la capacidad de las funciones para ser tratadas como cualquier otra variable. Esto significa que, en JavaScript, las funciones tienen las siguientes características.
Asignables a variablesTambién conocida como "función ciudadana de primera clase") es un concepto que refiere a la capacidad de las funciones para ser tratadas como cualquier otra variable. Esto significa que, en JavaScript, las funciones tienen las siguientes características. 

            var saludo = function() {
                console.log("Hola mundo!");
            };
            saludo(); // Llamada a la función usando la variable
Pasables como argumentosPuedes pasar funciones como argumentos a otras funciones. Esto es comúnmente utilizado en patrones de programación como callbacks. 

            function procesarEntrada(usuario, callback) {
                console.log("Procesando entrada del usuario...");
                callback(usuario);
            }

            procesarEntrada("Juan", function(nombre) {
                console.log("Bienvenido, " + nombre);
            });
Retornables desde otras funcionesUna función puede retornar otra función. Esto permite crear funciones complejas o funciones que se configuran en tiempo de ejecución. 

            function crearSaludo(tipo) {
                if (tipo === "cordial") {
                    return function(nombre) {
                        console.log("Buenos días, " + nombre);
                    };
                } else {
                    return function(nombre) {
                        console.log("Qué onda, " + nombre);
                    };
                }
            }

            var saludoFormal = crearSaludo("cordial");
            saludoFormal("Ana");
Almacenables en estructura de datosPuedes almacenar funciones en arrays, objetos, etc. Esto te permite organizar y manejar colecciones de funciones. 

            var operaciones = [
                function(a, b) { return a + b; },
                function(a, b) { return a - b; }
            ];

            console.log(operaciones[0](2, 3)); // 5
            console.log(operaciones[1](5, 3)); // 2

Funciones anónimas

FunciónCódigo
Función anónimaUna función anónima en JavaScript es una función que no tiene un nombre asignado. Estas funciones son útiles en situaciones donde no necesitas referenciar la función por su nombre, como cuando se pasa una función como argumento a otra función o se asigna a una variable.
DeclaraciónSe declaran igual que las funciones normales, pero sin un nombre después de la palabra clave function. 

            var saludo = function() {
                console.log("Hola mundo!");
            };
Usadas como callbacksSon comúnmente usadas como argumentos de funciones, especialmente en patrones de callbacks y eventos. 

            setTimeout(function() {
                console.log("Esto se ejecuta después de 2 segundos");
            }, 2000);

Funciones flecha

FunciónDefinición
Funciones flechaCon la introducción de ES6 (ECMAScript 2015), las funciones anónimas pueden ser escritas de manera más concisa usando la sintaxis de función de flecha. Son una forma más elegante y concisa de escribir funciones en JavaScript. Son muy útiles para escribir código más limpio y para manejar ciertas situaciones, como el manejo de this, de manera más predecible. 

            var multiplicar = (a, b) => a * b;
            console.log(multiplicar(2, 3)); // 6
Sintaxis básicaUna función flecha luce así: () => {}. Los paréntesis () contienen los argumentos (como las variables que la función usará), y lo que está dentro de las llaves {} es el cuerpo de la función, donde se escribe el código que realizará la tarea.
Sin argumentosSi una función flecha no necesita argumentos, simplemente se escribe con paréntesis vacíos: () => {}
Con argumentosSi solo necesita un argumento, puedes omitir los paréntesis: x => {}
Múltiples argumentosSi necesitas más de un argumento, debes usar paréntesis: (x, y) => {}
Cuerpo de la funciónDentro de las llaves {}, escribes lo que quieres que haga la función. Por ejemplo, () => { console.log("Hola Mundo"); } imprimirá "Hola Mundo" en la consola.
Retorno implícitoSi la función hace algo simple, como devolver un valor, puedes omitir las llaves y el return. Por ejemplo, x => x * 2 toma un número x y devuelve el doble de ese número.
"this" en funciones flechaUna característica importante es cómo manejan el valor de this. En las funciones tradicionales de JavaScript, this puede cambiar según cómo se llame a la función. En las funciones flecha, this conserva el valor que tenía cuando se creó la función, lo que puede hacer que ciertos tipos de código sean más fáciles de escribir y entender.

Funciones como constantes

FunciónCódigo
Función como constanteAl asignar una función a una constante, estás creando una función que no puede ser reasignada a otra cosa. Esto es útil cuando quieres asegurarte de que la función no se modifique a lo largo del código. 

            const saludo = function(nombre) {
                console.log("Hola, " + nombre + "!");
            };
            saludo("Ana");
Publicar un comentario
Etiqueta

Comentarios

Haz comentarios o preguntas acerca de este artículo respetando las normas de la comunidad ¡Les damos la bienvenida!