javascript / functions – Funciones en Javascript

Una función es un subprograma o rutina el cual cumple con una tarea en especifico capaz de ser llamada y también reutilzada. En javascript las funciones son objetos y pueden ser tratadas como tal, es decir objeto function.

En este post veremos desde cómo declarar la función con nombre hasta como crear funciones de distinto tipo como pueden ser funciones con múltiples argumentos,funciones de expresión y funciones IIFE.

Función básica en javascript

Para declarar una función tenemos que hacer uso de la palabra clave function veamos un ejemplo:

función nombrada

function a(){
   alert("estoy dentro de a");
   return "devuelvo este texto que esta dentro de a";
}

La palabra clave return la usamos para que la función nos devuelva algo en este caso devolverá el string "devuelvo este texto que esta dentro de a"

Tome en cuenta que la función en si son estas líneas:

function a(){

}

Lo demás son sentencias que se encuentran dentro de esta función, en consecuencia podemos decir que una función es un conjunto de sentencias que juntas realizan una tarea.

Para llamar a la función la llamaremos de la siguiente manera a(), haremos un pequeño ejemplo:

index.html

<html>
   <head>
      <title> funciones en javascript </title>
   <head>
   <body>
   <button onclick="b()">click me</button>
   <script type="text/javascript">
      function a(){
         return "devuelvo este texto que está dentro de a";
      }
      function b(){
         alert(a());
      }
   </script>
   </body>
</html>

Ejemplo aqui.

Creando una función con múltiples argumentos.

Para crear una función a la cual le pasamos múltiples argumentos en esta tenemos que usar arguments.length por ejemplo si queremos sumar todos los argumentos.

javascript multiple arguments

function Suma(...arguments) {
      var temporalVar = 0;
      for (var i = 0; i < arguments.length; i++) {
         temporalVar+= arguments[i];
      }
      return temporalVar;
}
Suma(1,2);

Funciones anónimas y funciones expresión .

Si una función es colocada donde se espera una expresión esta es tratada como una expresión. Por lo que los valores que están antes de la función pueden tener incidencia en el valor que nos dará la función.

Funciones anónimas

Las funciones anónimas no tienen un nombre con las cuales llamarlas por lo general se las guarda en una variable o son pasadas por parametro.

Puede correr el siguiente ejemplo aquí. En este ejemplo le pasamos los valores 1 y2 atravez de los parametros b y c.

función anonima

<script type ="text/javascript">
      var suma;
      // esta es  una función de expresión y anónima(en a se espera una expresión la cual nos dará un valor)
      var a = function(b,c){
         return( b + c );
      }
      suma = a(1,2);//nos devolvera 3
      alert(suma);
</script">

La función anterior también es una función de expresión.

funciones expresión

Intentemos algo diferente esta vez no vamos a pasarle los valores por parametros para demostrar que la funcion es tratada como una expresión.

function expression

<script type ="text/javascript">
      var b = 4;
      var c = 4;
      var sum;
      var a = function(){
         return( b + c );
      }
      sum = a();//nos devolvera 8?
      alert(suma);
</script">

Puede probar el ejemplo aquí.

Funciones IIFE(inmediate invoke function expresion).

Esta es la última que veremos el post funciones en javascript, tiene la particularidad de que se ejecuta inmediatamente llegado a esa sentencia y se define de la siguiente manera.

<script type ="text/javascript">
      var stringA = "luis";
      /*
      esta es  una función de expresión y anónima
      (en a se espera una expresión la cual nos dará un valor)
      */
      var a = (function(){
         alert("hola" + stringA );
      })();
</script">

Vea cómo funciona aquí.

Los parentesis al final () crean la invocacion de inmediato de la funcion. los parentesis que rodean la funcion conforman un operator group operator y es lo que hace agrupa lo que hay dentro la función en este caso.

grouping operator parentesis

(function(){
         alert("hola" + stringA );
})

Arrow Functions

Con ES6 tuvimos la llegada de las funciones arrow, una forma facil de declarar una funcion, la cual es una alternativa a funciones expresion.

Arrow functions example

var elv = (a,b) => Math.pow(a,b);
elv(4,6);

En el ejemplo anterior vea que no se utilizó la palabra clave function, sino que se usó => y paréntesis de donde estarían los parámetros, en este caso omitimos {} debido a que estamos retornando una expresión directamente. Además de ello tenemos una sola sentencia dentro de la función.

En caso de que solo le pasáramos un parámetro, podríamos omitir los paréntesis también, aunque no me parece algo recomendable.

Category: javascript

Something wrong? If you found an error or mistake in the content you can contact me on Twitter | @luisg2249_luis.