Arrow functions

Diferencias entre funciones declaradas versus funciones flecha. Su relación con this y como usarla con otras funciones cotidianas como map, reject, filter en programación funcional.

This y arrow functions

Las funciones declaradas y las funciones de flecha son dos formas diferentes de crear funciones en JavaScript.

La principal diferencia entre las funciones declaradas y las funciones de flecha es como manejan el valor de this. En las funciones declaradas, el valor de this está ligado al contexto en el que se invoca la función, mientras que en las funciones de flecha el valor de this está ligado al contexto en el que se define la función. Esto significa que las funciones de flecha no tienen su propio valor de this, sino que heredan el valor de this del entorno en el que se definen.

Además, las funciones de flecha son más cortas y sencillas de escribir en comparación con las funciones declaradas, especialmente cuando se trata de funciones anónimas simples.

En cuanto a las funciones cotidianas como map, filter y reduce, pueden ser utilizadas tanto con funciones declaradas como con funciones de flecha.

this.boo = "ohhhh"
// En este caso apunta al objeto global
function someTest(){
  this.boo = 'ahhh'
  console.log(this.boo)
}
console.log(this.boo)
someTest()
console.log(this.boo)

En el ejemplo anterior vemos una función declarada. Estas no tienen su propio this y acceden al de su scope superior. Dentro de su cuerpo se está redefiniendo el valor de la propiedad boo, lo que fectivamente modifica la propiedad boo del entorno global.

// En este caso apunta al propio objeto
this.goo = "ohhhh"
const obj = {
  goo: "ahhhhh",  
  method: function(){
    console.log(this.goo)
  }
}
obj.method()

Cuando tenemos un método en un objeto, como el ejemplo anterior, el this es el mismo objeto. A diferencia del siguiente ejemplo utilizando función flecha.

// En este caso apunta al propio objeto
this.goo = "ohhhh"
const obj = {
  goo: "ahhhhh",  
  method: () => {
    console.log(this.goo)
  }
}
obj.method()

Funciones cortas

Si la función se puede escribir en una sola línea podemos escribir las funciones flecha de la siguiente manera:

  const multiply = (a,b) => a * b
  console.log(multiply(3,4))

Podemos ver que no se requieren los {} y tampoco return. Además si la función requiere un solo parámetro, podemos omitir los paréntesis dejando la función más concisa, ideal para utilizar en funciones como map, reduce y filter, como en el siguiente ejemplo:

  const squareNums = [1,2,3,4].map(num => num * num)
  console.log(squareNums)