JavaScript Desmitificado: Funciones

Bloques de funciones

Las funciones en Javascript son bloques de código identificados por un nombre que se pueden invocar cuando sea necesario.

// utilizando ;! invocamos una función inmediatamente ;!function() { var lives = 10; // bloque de función this.takeDamage = function(value) { lives -= value; } // bloque condicional if (lives > 0) { takeDamage(4); speak(); } // bloque de función function speak() { console.log('Hola, me quedan ' + lives + ' vidas'); } }();

1234567891011121314151617181920212223242526 // utilizando ;! invocamos una función inmediatamente;!function(){ varlives=10; // bloque de función thistakeDamage=function(value){ lives-=value; } // bloque condicional if(lives>0){ takeDamage(4); speak(); } // bloque de función functionspeak(){ consolelog('Hola, me quedan '+lives+' vidas'); } }();

Argumentos

Las funciones pueden recibir variables complejas como son los objetos (Ej.: Array, Date), o tipos de datos primitivos (Ej.: Integer, String); a estas variables pasadas al cuerpo de una función, se les conoce como argumentos o parámetros.

Paso por valor y referencia

En Javascript al igual que en otros lenguajes de programación los argumentos de tipos complejos son pasados por referencia y los primitivos por valor.

Veamos un ejemplo de paso por valor.

// variable numérica var sheepCount = 10; ;!function(val) { val --; }(sheepCount); console.log(sheepCount); // => 10, no se modificó

12345678910 // variable numéricavarsheepCount=10; ;!function(val){ val--; }(sheepCount); consolelog(sheepCount);// => 10, no se modificó

Ahora veamos paso por referencia.

// objeto a pasar a función sheep = { count: 10 } ;!function(obj) { obj.count --; }(sheep); console.log(sheep.count); // => 9, si se modificó el objeto

123456789101112 // objeto a pasar a funciónsheep={ count:10} ;!function(obj){ objcount--; }(sheep); consolelog(sheepcount);// => 9, si se modificó el objeto

Pasando un numero indeterminado de argumentos

Todas las funciones en Javascript tienen un objeto llamado arguments, éste actúa como un comodín para acceder a cualquier cantidad de argumentos suplidos a la función.

// esta función no recibe explícitamente ningún argumento var sum = function () { var length = arguments.length, total = 0; for (var i = 0; i < length; i++) { // se suman todos los argumentos total += arguments[i]; } return total; }; console.log(sum(20, 30, 50)); // => 100

12345678910111213141516 // esta función no recibe explícitamente ningún argumentovarsum=function(){ varlength=argumentslength, total=0; for(vari=0;i<length;i++){ // se suman todos los argumentos total+=arguments[i]; } returntotal;}; consolelog(sum(20,30,50));// => 100

Parámetros por defecto (Solo ECMAScript 6)

En ECMAScript 6 las funciones van a poder recibir parámetros con valores por defecto como se muestra a continuación:

var sum = function (a = 10, b = 2) { return a + b; }; console.log(sum()); // => 12 console.log(sum(3, 2)); // => 5

123456 varsum=function(a=10,b=2){ returna+b;}; consolelog(sum());// => 12consolelog(sum(3,2));// => 5

Tipos de funciones

En javascript todas las funciones son ejecutadas de la misma manera, lo que las diferencia es la forma en la que son evaluadas.

Funciones por declaración

A las funciones declaradas el interprete accede en el momento en que son leídas.

console.log(sum(10, 20)); function sum(a, b) { return a + b; };

12345 consolelog(sum(10,20)); functionsum(a,b){ returna+b;};

Funciones por expresión

Las funciones por expresión son parte de una asignación, por lo tanto no pueden ser evaluadas hasta que el programa no haga la asignación.

var sum = function (a, b) { return a + b; }; console.log(sum(10, 20));

12345 varsum=function(a,b){ returna+b;}; consolelog(sum(10,20));

Comparación

A continuación pongo en contraste estos dos tipos de funciones:

console.log(declaracion())); // => Soy función por declaración function declaracion() { console.log("Soy función por declaración"); }; // ----------------------------- console.log(expresion())); // => "TypeError: Property 'expresion' of object [object Object] is not a function var expresion = function expresion() { console.log("Soy función por expresión"); }; console.log(expresion())); // => Soy función por expresión

123456789101112131415 consolelog(declaracion()));// => Soy función por declaración functiondeclaracion(){ consolelog("Soy función por declaración");}; // ----------------------------- consolelog(expresion()));// => "TypeError: Property 'expresion' of object [object Object] is not a function varexpresion=functionexpresion(){ consolelog("Soy función por expresión");}; consolelog(expresion()));// => Soy función por expresión

Alcance

En javascript el alcance de una variable es el largo de una función. Esto puede sonar un poco confuso o incomprensible, tranquilo/a, como en repetidas veces, se entenderá mejor con un ejemplo

12345678910111213141516171819202122 vara=100; // las funciones tienen su propio alcance;!function(){ vara="asdfg5447jmk212bfd"; consolelog(a);// => asdfg5447jmk212bfd}(); consolelog(a);//=> 100 // los bloques if(a<50){ userId+=30;}else{ a-=20;} consolelog(a);// => 80

Cierre

Espero que esta información haya sido de ayuda.

Cualquier comentario o pregunta no dudes en dejarlo en la sección correspondiente más abajo.

Si consideras útil esta entrada, por favor compártela en las redes sociales para hacerla llegar a más personas.

Saludos y hasta la próxima.

Revista Informática