Publicidad

JavaScript Funciones y Expresiones

JavaScript Funciones y Expresiones
Sin comentarios
HOY SE HABLA DE

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

Explora en nuestros medios