First Class Function en Javascript - El Mundo de Angular

First Class Function en Javascript

Bueno, voy a ser bastante directo con ésto: una función en Javascript es un objeto. Exactamente como leés, una función es un objeto, con las propiedades que tienen los objetos en Javascript. ¿Qué quiero decir con eso? Si tenemos un objetole asignamos el atributo «nombre» y luego podemos acceder a ese valor:


var miObjeto = {};
miObjeto.nombre = 'Gustavo';
console.log(miObjeto.nombre)

 

Y con una función, podemos hacer lo mismo:



function miFuncion() {
}

miFuncion.nombre = 'Gustavo';
console.log(miFuncion.nombre);


Si bien la forma de crear una función es diferente a la forma de crear un objeto en Javascript, la forma de asignarle un nuevo atributo y acceder a ese atributo  es exactamente la misma, tanto para una función como para un objeto Javascript.

Pasando valores a las funciones

Como sabrás, se pueden pasar objetos a una función de la siguiente forma:


function a(objeto) {
    console.log(objeto.nombre);
}

var miObjeto = {
    nombre:'Gustavo'
}

Luego, para llamar a esa función con un parámetro, hacemos lo siguiente:


a(miObjeto);

 

Bueno, con una función… ¡podés hacer exactamente lo mismo!


function a(objeto) {
    console.log(objeto.nombre);
}

function miFuncion() {
}

miFuncion.nombre = 'Gustavo';

Y llamar a la función «a«, pasándole como parámetro la función «miFuncion»


a(miFuncion);

 

Como podemos ver ahora, es una función lo que estamos pasando como argumento.

 

Las funciones pueden guardarse en variables

Así como un objeto puede guardarse en una variable:


var a = {};
var b = a;

 

Las funciones también pueden guardarse en variables:


var a = function miFunction() {}
var b = a;

En este ejemplo, creamos una función y la guardamos en la variable «a«. Luego, guardamos esa función en la variable «b«.

 

Las funciones son invocables

Y… ¿qué significa que son invocables? Significa que las funciones tienen un código que puede ejecutarse, y la forma de ejecutarlo es con paréntesis «()» (en realidad hay más de una forma de invocarla, pero eso lo vamos a ver en otro post ;) )

Si tenemos, por ejemplo:


function miFuncion() {
    console.log('estoy en miFuncion')
}

 

La forma de ejecutar la función es la siguiente:



miFuncion()


Bastante lógico, ¿no?.

Y si pasamos esa misma función a otra función, y queremos ejecutarla… ¿qué haríamos?: algo tan sencillo como pasar el argumento como una función, y ejecutarla:


function a(b) {
    b();
}

var miFuncion = function() {};

a(miFuncion)

Fijáte que a la función «a» le estamos pasando como argumento la función «miFuncion». Dentro de la función «a» estamos tomando ese argumento, y como sabemos que es una función, lo ejecutamos. Fijáte también que Javascript  no chequea el tipo del argumento (porque es Dynamic Typing), esto significa que si a la función «a» le pasáramos otra cosa que no fuera una función, nuestro código explotaría cuando lo ejecutáramos.

 

Las funciones pueden no tener nombre (Funciones Anónimas)

Podemos crear una función sin nombre, como por ejemplo:


var miFuncion = function () {
}

 

En este caso, la forma de ejecutar la función es utilizando la variable «miFuncion», de la siguiente forma:


miFuncion()

 

¿Y qué significa First Class Function?

¡Ah claro! Me había olvidado de explicar el título del post. First Class Function significa que podemos tratar a una función en Javascript como cualquier otro tipo de dato: asignarlas a variables, pasarlas como argumentos a otras funciones, y crearlas al vuelo.

 

Function Expresion y Function Statement

Existen 2 formas distintas de crear una función en Javascript: Function Expresion y Function Statement. Aunque ya estuvimos creando funciones de estas dos maneras, ahora voy a contarte cómo se llama a cada una y que características tienen.

 

Function Expresion

Esta forma no sólo declara una función,sino que también retorna un valor, y el valor es la función que estamos creando. La forma es la siguiente:


var miFuncion = function() {}

Lo que hace esta línea es declarar una función (anónima) y DEVOLVER la función, recordemos que es un objeto y que puede ser asignado a otra variable.

EN EL GRÁFICO FUNCIÓN ESTÁ SIN ACENTO EN EL CUADRITO DE LA DERECHA AL MEDIO

Hay que tener mucho cuidado con usar la función miFuncion antes de la Function Expresion, ya que, por hoisting, la variable se reserva en memoria, pero vale undefined hasta que se le asigne un valor. Si hiciéramos ésto:


miFuncion();
var miFuncion = function() {}

 

En consola se mostraría el siguiente error: «Uncaught TypeError: miFuncion is not a function»

Nuevamente, eso es porque miFuncion vale undefined hasta que no llega a la declaración de la función y, por consiguiente, como undefined no es una función, ese error se muestra en consola. Tiene sentido, ¿no?

Function Statement

Esta forma, por otro lado, sólo define una función, pero no ejecuta ni devuelve nada. La forma es la siguiente:


function miFuncion() {
}

 

Además, a diferencia de las Function Expresion, las Function Statement crean la función al mismo tiempo que la declaran, no tienen en problema de hoisting y tranquilamente podemos llamar a una función antes de crearla:



miFuncion();
function miFuncion() {
    console.log('estoy en miFunction');
}


Y este código funcionaría perfectamente.

 

Mezclando las dos formas

Es más, podemos mezclar una Function Statement con una Function Expresion, hacer lo siguiente:


function a(arg) {
    arg();
}

a(function() {})

 

En Javascript, definir una función como un argumento dentro de otra función, es perfectamente válido.

 

Conclusiones

Al poder tratar a funciones como si fueran tipos de datos, se pueden hacer cosas potentísimas. Además de pasar funciones como si fueran argumentos, podés guardar funciones en variables e incluso en arrays, para su posterior ejecución.

About the Author

Mi nombre es Gustavo Hernán Dohara, soy Ingeniero en Sistemas y, sobre todas las cosas, soy un apasionado por la tecnología; tengo más de 10 años de experiencia en diferentes tecnologías y he decidido compartir mis conocimientos y experiencias con cualquiera que desee aprender: alumnos, empleados, freelancers y vos. Al ritmo que cada uno pueda, en el horario en que cada uno pueda y en el lugar que cada uno elija.

 ¡OFERTA! 

 101 Preguntas Sobre javascript

Que te Harán En Cualquier Entrevista (Con Sus Respuestas)