JavaScript Funciones y Expresiones

Pocos desarrolladores hay que no les haya tocado trabajar en algún momento con Javascript. Javascript como lenguaje siempre parece muy sencillo cuando uno empieza a trabajar con él. La situación real es que según avanzamos cada vez nos damos cuenta de que es más complejo de lo que parece y las dudas aparecen. Vamos a hablar hoy un poco de algo que en principio parece elemental en Javascript: El uso de funciones. Javascript soporta varios tipos de declaraciones de funciones, vamos a ver la más sencilla.

<html>
<head>
</head>
<body>
</body>
</html>

Como vemos es una función de suma, la cual invocamos e imprimimos por la consola el resultado (4).

Ahora bien ¿qué sucede si definimos el bloque de código al revés?. Es decir primero el mensaje de consola y luego la función:

<html>
<head>
</head>
<body>
</body>
</html>

Esto ya genera algunas dudas entre los programadores. Hemos invocado a la función antes de declararla. Sin embargo el código sigue funcionando sin ningún tipo de problema. Vamos a ver una segunda forma de declarar una función en Javascript:

<html>
<head>
</head>
<body>
</body>
</html>

Es una declaración similar a la anterior, lamentablemente el código deja de funcionar y se produce el siguiente error:

¿Qué está pasando?. Antes todo funcionaba correctamente y ahora parece que falla y nos dice que la función no esta definida. Vamos a intentar explicar esta casuística.

Funciones declaraciones y expresiones

En Javascript dos de las formas más habituales de usar funciones son :

  • Declaración de una función

  • Declaración de una expresión como función

Cada uno de estos tipos tiene un formato diferente:

Declaraciones vs Expresiones

El compilador de Javascript realiza dos pasadas al código que tiene que interpretar para realizar todas las optimizaciones posibles. La primera pasada revisa todas y cada una de las declaraciones, ya sean de funciones o de variables . Por lo tanto si tenemos una función declarada como la siguiente:

function suma (a,b) {
     return a+b;
}

Será alcanzada en la primera revisión del código. Esta revisión convertirá la declaración en una expresión y ubicará la expresión al principio del código. De tal forma que si en un primer momento teníamos este código:

<html>
<head>
</head>
<body>
</body>
</html>

El motor de Javascript lo convertirá en este otro después de realizar la primera optimización:

<html>
<head>
</head>
<body>
</body>
</html>

Por eso aunque en JavaScript hagamos uso de una función antes de declararla el código para el compilador sigue siendo válido.

A esta técnica de Javascript se la conoce habitualmente como JavaScript Hoisting.

En GenBetaDev :Speaking Javascript, Depurando Javascript

Ver todos los comentarios en https://www.genbeta.com

VER 0 Comentario

Portada de Genbeta