JavaScript functions

A function is a subprogram or subroutine that realize a specific task, that could be called and reused. On JavaScript, the functions are objects and could be used in that way. Object Functions

In this post we will take a look at how to declare a function, arguments, anonymous function, function expression and IIFE functions

Basic function

To declare a function we have to use the function keyword, lets see an example: The following is a named function

named function

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

the return keyword is used to return something inside the function, in the example above returns the string "devuelvo este texto que esta dentro de a"

A function in its most basic is this:

most basic function

function a(){

}

Obviously, a function empty have no sense, we need some sentences inside to realize a task. We could call this function with a() let’s make a little example:

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>

Example here.

Creating a function with multiple arguments

Ok a function could have multiple argument but what happen when you don’t know how many arguments you will pass to this one. In this occasion, we need to pass an array and use length; for example, if we want an addition of all arguments:

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);

Anonymous function and function expression

If a function is put in a place where an expression is expected, this is treated as an expression. Therefore, the values that are before the function could have incidence in values that the function returns.

Anonymous function

The anonymous function have no name and generally are used with variables, or as a parameter in another function

You can check the following example here.

Anonymous function

<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">

In the example, we are using a function expression too. that’s why we can use a(1,2)

Function expression

Let’s try something different, this time we will not pass the values via parameter to demonstrate that the function is treated as an expression.

JavaScript 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">

You can check the example here.

IIFE(inmediate invoke function expresion).

These functions have the particularity that runs as soon is defined. We define an IIFE function as follows:

<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">

Example here.

As you can see, we have parenthesis after all () creates the immediately invoked function expression () through which the JavaScript engine will directly interpret the function.

First parenthesis ( before function and first parenthesis before ) are the grouping operator.

grouping operator parentesis

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

Arrow Functions

With ES6 comes arrow function, and easy way to declare function quickly. this is an alternative to expression functions. Let’s take a look:

Arrow functions example

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

If we check the above example we don’t see a function keyword we see the arrow => and the parenthesis where are the parameters, in this case we omit the {} because we are returning an expression

Category: en-javascript

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