Compartir
Publicidad

JavaScript Funciones y Expresiones

JavaScript Funciones y Expresiones
0 Comentarios
Publicidad
Publicidad

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>
<script type="text/javascript">
function suma (a,b) {
return a+b;
}
console.log(suma(2,2));

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

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

consola.png

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>
<script type="text/javascript">
console.log(suma(2,2));
function suma (a,b) {
return a+b;

}
</script>
</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>
<script type="text/javascript">
console.log(suma(2,2));
var suma= function (a,b) {
    return a+b;

}
</script>
</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:

consolaerror.png

¿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:

expresiondeclaracion-1.png

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>
<script type="text/javascript">
console.log(suma(2,2));
function suma (a,b) {
return a+b;

}
</script>
</head>
<body>
</body>
</html>

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

<html>
<head>
<script type="text/javascript">
var suma=function  (a,b) {
return a+b;

}
console.log(suma(2,2));

</script>
</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.

convierte.png

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

En GenBetaDev :Speaking Javascript, Depurando Javascript

Temas
Publicidad
Comentarios cerrados
Publicidad
Publicidad
Inicio