👉 Ver todas las notas
Un lenguaje de programación tiene First-Class functions cuando las funciones puede ser tratadas como cualquier otro valor. Es decir, podemos:
-
Asignarlas como valores a una variable o constante
-
Recibirlas como parámetro (callbacks) ⭐
-
Retornar funciones ⭐
-
El truco es olvidarte por un rato que estás tratando con funciones, pensá que se trata de un valor cualquiera, como un
number
,string
óboolean
y qué cosas podés hacer con este.
Las características anteriores, marcadas con ⭐ hacen que una función sea además lo que se conoce como función de alto orden ó Higher Order Function 😎
Para más detalles, ver MDN: First Class Function
Porque las funciones en JS... son objetos!
Un valor cualquiera puede ser guardado en una variable/constante. ¡Una función también! 😸
Cuando asignamos una función a una variable ó constante, la llamamos function expression
// assign a number to a constant
const theNumberOfTheBeast = 666;
// assign a function to a constant
const fn = function() {
console.log(I'm a function expression! 😎`);
}
fn();
const numbers = [1, 2, 3, 4, 5];
// .map() method receives a function as a parameter (callback)
numbers.map(number => number ** 2); // => [1, 4, 9, 16, 25]
function hof(fn) {
return fn;
}
const hero = {
name: 'Jessica Jones',
quote: () => console.log(`There's dirt everywhere... you just have to know where to look`)
};
hero.quote();
Si un array puede guardar valores de cualquier tipo, entonces también podemos guardar funciones, no? Obvio 🎉 (alguien dijo React Hooks? 😛)
const functionsList = [() => console.log('Hello'), (a, b) => a + b];
functionsList[0](); // 'Hello'
functionsList[1](3, -27); // => -24
// running all of them
for (const fn of functionsList) {
fn(1, 3);
}
Usando IIFEs
Podemos crear funciones e invocarlas inmediatamente
console.log(7 + 21); // 28
console.log(7 + (function() { return 21; })()); // => 28
Las funciones en JavaScript son objetos, por lo que pueden crearse como cualquier otro
const sum = new Function('a', 'b', 'return a + b');
console.log(sum(2, 6)) // => 8;