Crear y entender funciones en Javascript!
Tags: showdev, webdev, javascript, codenewbie
Published: 2021-02-05 22:38:55

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, { ... }.

```javascript

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**:

```javascript

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:

```javascript

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:

```javascript

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:

```javascript

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.

```javascript

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

```javascript

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:

```javascript

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:

```javascript

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

```


<center>
Si te gusto el contenido puedes apoyarme en:
</center>

[![ko-fi](https://www.ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/G2G42SCZF)