Funciones

Son bloques de codigos ejecutable, a los que podemos pasar parametros y operar con ellos. Nos sirven para modular nuestros programa y estructurarlos en bloques que realicen una tarea concreta.

Las funciones nos sirven para las siguientes tareas, por ejemplo:

• Mapeos - producir uno o varios valor de salida basado al valor el cual se le introduce al inicio del proceso. Las funciones normalmente al acabar su ejecucion devuelve un valor que conseguimos con el parametro return.
• Procedimientos - funciones pueden ser llamada en secuencias de pasos.
• I/O - Algunas funciones solo existen para comunicarte con parte del sistema el cual utilizas, asi como lenguage de programacion, sistema de hardware, sistema de record, etc.

Para declarar una funcion utilizamos la palabra reservada function y normalmente continua con el nombres para luego en el flujo del programa poder invocarla, si no lleva numbre se les llama funciones anonimas.

function hello(name) {
  return("Hello " + name + "!");
}
console.log(hello("John")); //-> Hello John!

En la funcion del ejemplo se le llama a la funcion hello y se le pasa un unico parametro entre parentesis (...) que es name. Parametros funciona como contenedores de una variable que sera utilizada dentro del bloque d codigo de la funcion, la instruccion return devolvera el String que concatena texto con el valor que contiene el parametro name.

Return

La instruccion return determina que valores la funcion devolvera al final de la ejecucion de la misma funcion. Al no utilizar la instruccion return dentro de la funcion, esta funcion si utilizar la intruccion devolvera el valor por defecto underfined.

Existe una excepcion cuando creamos una objeto de JavaScript utilizando la palabra reservada new, el valor por defecto que devolvera de una funcion sera la misma funcion o el valor this en el cual se creo el objeto.

function Intro() {
  console.log(this);
}

Intro();
// Window

var intro = new Intro();  

// Intro {}
intro;

Parametros o Argumentos

Las funciones utilizan valores de entrada para luego ser procesado dentro de la misma, a estos valores o variables se decimos argumentos o parametros. Los parametros o argumentos se comportan como unas variables regulares del mismo lenguage de programacion. Dentro de la funciones existe una variable llamada arguments el cual es como una especie de semi array, y indico semi porque no es un array regular o concreto, realmente es un objecto de JavaScript, el cual podemos utilizar sin indicar la definicion de esta misma variable dentro de la funcion.

arguments representa por el medio de una lista, cada parametro el cual introducimos entre los parentesis (...) de la funcion, tambien se le conoce como arity. De esta manera tenemos una segunda forma de acceder a los parametros que se le pasan a la funcion por argumento. En el siguiente ejemplo definimos una funcion con sus parametros por defecto y otra sin los parametro por defecto, esto desarrollara diferente resultados al verificar el espacio de cada funcion.

function hello_01() {
  var firstName = arguments[0];
  var lastName = arguments[1];
  return("Hello " + firstName + " " + lastName + "!");
}
console.log(hello_01("John", "Johnson")); //-> Hello John Johnson!

const Hello_01 = hello_01.length;
console.log(Hello_01); //-> 0

function hello_02(firstName, lastName) {};
const Hello_02 = hello_02.length;
console.log(Hello_02); //-> 2

Parametros por defecto

Una buena practica para evitar errores o que se tome el valor undefined sin que podamos controlarlo, es utilizar de los operadores booleanos como por ejemplo el operador OR || podemos asignar un valor por defecto si no esta definido el parametro.

function hello(firstName, lastName) {
  var firstName = firstName || "First Name Please";
  var lastName = lastName || "Last Name Please";
  return("Hello " + firstName +  " " + lastName + "!");
}

console.log(hello()); //-> Hello First Name Please Last Name Please!
console.log(hello("John")); //-> Hello John Last Name Please!
console.log(hello("John", "Johnson")); //-> Hello John Johnson!

Utilizar argumentos como array

Existen momento que queremos utilizar la variable argument dentro de la funciones como un verdadero array, asi sea para utilizar funciones de array como .push, .pop o .slice. Esto es completamente imposible ya que la variable arguments es realmente un objecto JavaScript y no un array. Pero si podemos convertir esa variable objecto a array y utilizarla como array.

// Method 1
function has() {  
  let args = [].slice.call(arguments);
  args.forEach((arg) => console.log(arg));
}

has(1,2,3,4); //-> 1 2 3 4 

// Method 2
function has() {  
  let args = Array.prototype.slice.call(arguments);
  args.forEach((arg) => console.log(arg));
}

has(1,2,3,4); //-> 1 2 3 4

En JavaScript las funciones pueden ser tratadas como valores, esto significa que podemos asignarlas a una variable, para luego ser pasada como parametro a otra funcion o ser tambien devuelta por una funcion. A esto se le suele conocer como funciones de primera clase "first-class".

Funciones de primera clase "First-class function"

El termino se refiere a cuando una funcion puede ser tratada y/o manejada como si fuera una variable cualquiera.

var validateDataForAge = function(data) {
  person = data();
  console.log(person);

  if (person.age <1 || person.age > 99) {
    return true;
  }
  else {
    return false;
 }
};

var errorHandlerForAge = function(error) {
  console.log("Error while processing age");
};

function parseRequest(data, validateData, errorHandler) {
  var error = validateData(data);

  if (!error) {
    console.log("no errors");
  } 
  else {
    errorHandler();
  }
}

var generateDataForScientist = function() {
  return {
    name: "Albert Einstein",
    age : Math.floor(Math.random() * (100 - 1)) + 1,
  };
};

var generateDataForComposer = function() {
  return {
    name: "J S Bach",
    age : Math.floor(Math.random() * (100 - 1)) + 1,
  };
};

// Parse Request
parseRequest(generateDataForScientist, validateDataForAge, errorHandlerForAge);
// -> {name: "Albert Einstein", age: 42} no errors
parseRequest(generateDataForComposer, validateDataForAge, errorHandlerForAge);
// -> {name: "J S Bach", age: 87} no errors

Expresión de función invocada inmediatamente (Immediately-Invoked Function Expression / IIFE)

Antes de entra a en que significa este termino, primero debemos de entender algunos punto importantes. La diferencia entre una declaracion de funcion y una expresion de funcion. El ejemplo mas basico de una declaracion de funcion es el siguiente:

function do() {
  // Some logic
}

Es bien simple de comprender, es la forma mas comun de utilizar las funciones. Utilizamos la palabra reservada function seguido de nombre de la funcion y terminamos con los parentesis (...) para los parametros y llaves {...} para el bloque de codigo. Por el otro lado un ejemplo de una expresion de funcion es la siguiente:

const do = function() {
  // Some logic
}

Visualmente podemos observar diferencia entre ambas, pero pueden ser utilizada de la misma manera do(). Estos nos ayuda a entender el cuerpo o la figura de como se compone un IIFE.

IIFE visualmente es una declaracion de una funcion anonima, el cual no tiene nombre dentro de parentesis (...).

(function() {
  // Some logic
})()

Primero explicamos los parentesis (...) en el cual esta encerrada la funcion, JavaScript asume que cuando escribimos la palabra reservada function y el interpretador del codigo cuando encuentra con ella, para el interpretado esto significa que estas declarando una funcion. Esto es importante porque fuera de estos parentesis al tratar de crear in IIFE, JavaScript entendera otra cosa y tendremos error al interpretar el codigo.

Es en este siguiente punto que destacamos la diferencia entre declaracion y expresion de funciones, al escribir el codigo o la funcion dentro de parentesis (...), el interpretador de JavaScript entiendes que estas usando la funcion como una expresion y no declarada. Estos nos ayudara a no tener poblemas de errores.

Segundo, hablemos de los parentesis () luego de la los parentesis que encierra la funcion. Estos parentesis es para la invocacion inmediata de la misma expresion que encerramos dentro de los parentesis. Sin estos parentesis () finales, la funcion nunca sera invocada.

Ahora bien IIFF es utilizada para las siguientes objetivos:

• Privacidad - privacidad para el enfoque y contexto ejecucion dentro de la misma funcion o bloque de codigo. Estos nos ayuda a evitar tener conflicto con variable globales.

(function(){
  var secret = 123456;
})()

console.log(secret); //-> Uncaught ReferenceError: secret is not defined