Crear y entender funciones en Javascript!

Las funciones son uno de los bloques de construcción fundamentales en JavaScript.

Una función en JavaScript es similar a un procedimiento (un conjunto de instrucciones que realiza una tarea).

Podemos decir que una función es un bloque de instrucciones donde se realizara cierto algoritmo/tarea/instrucción que devolverá un resultado o modificara ciertos valores para un futuro.

Y también podemos recalcar que la funciones son principalmente usadas para ejecutar código repetitivo.

Aunque sabemos que podemos hacer con una función muchas veces no entendemos si declararlas de una forma u otra, esto debido a tenemos varias formas de declararlas, asi que vamos a verlas:

Declaración de función o Function Declaration

Esta es la tradicional de siempre que consta de la palabra clave function, seguida de:

1. El nombre de la función.
2. Una lista de parámetros de la función, entre paréntesis y separados por comas, si no lleva parámetros solo basta con dejar los paréntesis vacíos ().
3. Las declaraciones de JavaScript que definen la función, encerradas entre llaves, { ... }.

function mi_nombre(parametro1, parametro2, ...) {
  // declaración de javascript, operaciones, etc.
  // simplemente lo que hará la función cuando sea llamada
  return number * number;
}

Expresion de función o Function Expression

La principal diferencia con de la function expression con las function declaration es que aqui no incian con la palabra reservada function si no que inician como si creaaramos una variable:

const variable = function(parametro1, parametro2, ...) {
  // declaración de javascript...
}

Nos podemos dar cuenta que estas funciones (function expression) pueden ser anónimas, pero podemos hacer mención de ellas o mandarlas a llamar con el nombre de la variable en donde la alojamos.

También otra de las diferencias respecto a estas dos funciones, es el lugar donde las declaramos:

alert(foo()); // "soylenin" ✅
function foo () {return "soylenin";}

Con las declaraciones de funciones (function declaration) podemos decir estas funciones una vez que se declaran estarán disponibles en donde sea, siempre y cuando estén dentro de su scope, y no importara si se mandan a llamar antes o después.

Pero con las Expresiones de funciones (function expression) es diferente, por qué sabemos que la función la guardamos en una variable y recordemos que las variables no pueden ser llamadas antes de haberlas asignado, si no simplemente sera un error:

alert(foo()); // ERROR! foo no esta declarada
const foo = function() {return "soylenin";}

Funciones flecha o Arrow Functions

Una función flecha es una alternativa compacta a una expresión de función tradicional, pero es limitada y no se puede utilizar en todas las situaciones.

En lugar de seguir usando la palabra function la podemos omitir pero en su lugar tenemos que poner un signo igual (=) mas un cierre de paréntesis cuadrado (>) [o un mejor conocido "mayor que"] después del paréntesis de cierre:

const variable = () => {
  return "soylenin"
}

console.log(variable()) // "soylenin"

Esta función es mas compacta y tiene sus propios beneficios con respecto al resto, ya que si nosotros solo retornamos un solo valor, podemos quitar la palabra return y la llaves e implícitamente la función retornara el valor.

const variable = () => "soylenin"

console.log(variable()) // "soylenin"

Esto es muy practico ya eliminamos código y sigue siendo igual de efectiva la función, y debemos de decir que no solo podemos usar funciones de flecha de esta manera, en el mundo el uso mas cotidiano que se le da a esta función es cuando se usan dentro de métodos iteradores, por ejemplo .map() en un array

const valorFinal = arrayProduct.map((item) => item.id === 3)

Aquí simplemente a la variable valorFinal se le asignara el valor del array que corresponda con él id de 3.

También otros de los grandes beneficios es que es utilizado para poder heredar el contexto.

Básicamente fue para quitar los engorrosas y extrañas formas de usar this en nuestro código, haciendo que sea mas intuitivo el código.

En las funciones tradicionales de manera predeterminada this está en el ámbito de window:

window.age = 10; // <-- ¿me notas?
function Person() {
  this.age = 42; // <-- ¿me notas?
  setTimeout(function () {// <-- La función tradicional se está ejecutando en el ámbito de window
    console.log("this.age", this.age); // genera "10" porque la función se ejecuta en el ámbito de window
  }, 100);
}

const p = new Person();

Las funciones flecha no predeterminan this al ámbito o alcance de window, más bien se ejecutan en el ámbito o alcance en que se crean:

window.age = 10; // <-- ¿me notas?
function Person() {
  this.age = 42; // <-- ¿me notas?
  setTimeout(() => {// <-- Función flecha ejecutándose en el ámbito de "p" (cuando se manda a llamar a la función y donde se aloja)
    console.log("this.age", this.age); // genera "42" porque la función se ejecuta en el ámbito de Person
  }, 100);
}

const p = new Person();