post thumbnail

JavaScript Desmitificado: Funciones

Publicado Por: Oscar González, El 03/03/2014


Detalles del Curso:

Dificultad: Heroe

Duración: 10 min


Más artículos en JavaScript Desmitificado

Este es el artículo Funciones de la serie JavaScript Desmitificado - Mostrar todos

  1. Objetos
  2. Funciones
  3. Clausuras (closures)
  4. Coerción parte 1
  5. Coercion Parte 2
  6. Concurrencia
  7. Calidad

En el capítulo anterior hablamos de objetos en Javascript. Casi todo es un objeto en este lenguaje, y las funciones no son la excepción.

En programación usamos funciones todos los días, por lo tanto, con este tutorial no pretendo enseñarte para que sirven las mismas, sino mostrarte con un nivel de profundidad propio el enfoque que ofrece Javascript hacia este recurso del código, a manera de entender las areas oscuras que a veces nos hacen pasar horas debuggeando.


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

}();

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ó

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

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

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

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

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

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

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

var a = 100;

// las funciones tienen su propio alcance
;!function() {

  var a = "asdfg5447jmk212bfd";

  console.log(a); // => asdfg5447jmk212bfd
}();


console.log(a); //=> 100

// los bloques
if (a > 50) {
  userId += 30;
}
else {
  a -= 20;
}

console.log(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.


¿Te ha gustado esta publicación?

Compártela:

Por Oscar González

Conoce más sobre este autor aquí


comments powered by Disqus