Funciones: llamada y referencia

Haciendo la enésima revisión del curso en busca de erratas —las cuáles tienen una capacidad sorprendente para reproducirse y ocultarse—, me di cuenta de que en la parte dedicada a la introducción de JavaScript pasé por alto una distinción que es necesaria comprender a la hora de dar los primeros pasos de programación en este lenguaje: la diferencia entre llamar una función y referenciarla.

Los intérpretes de JavaScript ejecutan cada línea de código en el momento en que la «leen»; éste es el motivo por el cual una línea como document.getElementById('contenido') genera un error si se ha ejecutado desde la cabecera de un documento y el cuerpo del mismo aún no se ha cargado completamente. Así, cuando llamamos a una función, ésta se ejecuta inmediatamente.

Pongamos el siguiente ejemplo:

    function suma(){
        var a = 2;
        var b = 5;
        return (a + b);
    }
    var resultado = suma();
            

Grosso modo, de manera sucesiva el intérprete ha creado una función llamada suma, ha asignado a las variables a y b los valores de 2 y 5, ha realizado la suma de ambos. Cuando declaramos resultado, ha ejecutado la función que hemos llamado y ha actualizado el valor de la variable a 7.

En este caso, hemos llamado a la función en var resultado = suma();, por lo que se ha ejecutado en ese mismo instante. ¿Pero qué ocurre si queremos que la variable funcione como un alias de la función para ejecutarla más adelante? En este caso tenemos que referenciarla, lo que se haría de la manera siguiente:

    function suma(){
        var a = 2;
        var b = 5;
        return (a + b);
    }
    var resultado = suma;
            

La diferencia está en los paréntesis, que hemos eliminado. Ahora, resultado equivale a la función, no al resultante de su ejecución. Desde este momento, escribir la línea resultado; y la línea suma(); tienen el mismo efecto.

Se ve más claro si añadimos un alert(resultado) tras cada uno de los scripts anteriores. El primero nos devuelve 7, el segundo la función.

¿Cuál es el motivo real de este pequeño artículo? Pues que uno de los errores que todos cometemos al principio es éste:

    function incluirCita(){
        var contenido = 'El pelo largo es signo del hombre libre. <cite>(Aristóteles, <i> Retórica</i>, Libro II)</cite>';
        var cita = document.createElement('p');
        cita.innerHTML = contenido;
        document.getElementsByTagName('body')[0].appendChild(cita);
    }
    window.onload = incluirCita();
            

A simple vista, cuando la página se carga incluirCita crea un elemento p, añade el marcado de contenido, e incluye el párrafo en el cuerpo del documento. Sin embargo, al probar el script, no sólo no vemos nada, sino que si estamos empleando Firefox obtenemos en la consola el siguiente error: document.getElementsByTagName('body')[0] has no properties.

¿Qué ha ocurrido? Pues que cuando el intérprete de JavaScript ha llegado a la línea window.onload = incluirCita(); ha ejecutado la función, antes de que el elemento body estuviese cargado: como en el árbol del documento aún no existía, ha generado un error. La solución está en referenciar la función en lugar de llamarla.

Como se ve, tener clara la diferencia es de suma importancia.