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