Blog de programación, errores, soluciones
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
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 functionfunction 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:
<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 argumentsfunction Suma(...arguments) {
var temporalVar = 0;
for (var i = 0; i < arguments.length; i++) {
temporalVar+= arguments[i];
}
return temporalVar;
}
Suma(1,2);
3
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.
(function(){
alert("hola" + stringA );
})
Arrow Functions
With ES6 comes arrow function, and easy way to declare function quickly. this is an alternative to expresion functions. Lets take a look:
Arrow functions examplevar elv = (a,b) => Math.pow(a,b); elv(4,6);
4096
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
