Tuesday, June 14, 2022
HomeWordPress DevelopmentFunciones de flecha en JavaScript + this

Funciones de flecha en JavaScript + this


Las funciones de flecha en JavaScript nos brindan la posibilidad de escribir funciones sin utilizar la palabra clave operate, pero mas allá de la sintaxis, las funciones de flecha o arrow capabilities tienen algunas particularidades y diferencias de cuando creamos funciones de manera “tradicional”.



Sintaxis

//Declaración de función
operate sayHello() {
  console.log("Hello")
}

//Expresión de función
const sayHello = operate() {
  console.log("Hello")
}

//Función de flecha
const sayHello = () => console.log("Hello")
Enter fullscreen mode

Exit fullscreen mode

Como mencioné al inicio de este artículo, las funciones de flecha nos permiten crear funciones de una manera mas compacta en algunos casos, ahora hablemos de sus diferencias y algunas limitaciones.




This y Funciones de flecha

Una de las diferencias mas llamativas es cuando asociamos el concepto de this en JavaScript con las funciones de flecha.



Como this determina su valor?.

La palabra clave this y su valor dependen del contexto de ejecución o como se invoca determinada función o método en JavaScript.

Image description

Aprendiendo este concepto (this key phrase) yo también estaba confundido como la imagen mas arriba 😆, pero no te preocupes espero que con este artículo despejes tus dudas.


En los navegadores el valor de this ejecutándose en un contexto world es el objeto window.

console.log(this === window) // true



En una función

Cuando utilizamos this dentro de una función, su valor depende del contexto de ejecución de la función.

operate sayHello() {
  console.log(this)
}
sayHello() *contexto de ejecución world

// Window {...}
Enter fullscreen mode

Exit fullscreen mode




En un objeto declarado

Al utilizar this dentro de un método en un objeto declarado, el valor de this será el del objeto en el que se está llamando el método.

const nameObj = {
  identify: "Alfredo",
  getUserName: operate () {
    console.log(this)
  }
}

nameObj.getUserName()

// {identify: 'Alfredo', ...}
Enter fullscreen mode

Exit fullscreen mode

En este ejemplo a continuación, el valor de this se determina de acuerdo a su referencia mas cercana.

const nameObj = {
  identify: "Alfredo",
  nested : {
    lastName: "Moscoso",
    getUserName: operate () {
      console.log(this);
    },
  }
};

nameObj.nested.getUserName()

//{lastName: 'Moscoso', ...}

Enter fullscreen mode

Exit fullscreen mode

Como podemos ver su valor depende del contexto de ejecución del método.




En una función constructora

Si trabajamos con una función constructora y la palabra clave new su valor está vinculado al nuevo objeto que se está creando.

operate Automobile(mannequin, yr) {
  this.mannequin = mannequin;
  this.yr = yr;
}

const ford = new Automobile("Ford", "1970")
console.log(ford.yr) // 1970

const chevrolet = new Automobile("Chevrolet", "1956")
console.log(chevrolet.yr) // 1956
Enter fullscreen mode

Exit fullscreen mode



En los métodos name, apply y bind

Con los métodos de funciones name y apply podemos enlazar el valor de this dentro de una función a un objeto.

name()

const nameObj ={
  identify: "Alfredo"
}

operate getUserName(lastName) {
  console.log(`${this.identify} ${lastName}`)
}

getUserName.name(nameObj, "Moscoso")

//Alfredo Moscoso

Enter fullscreen mode

Exit fullscreen mode

apply()

const nameObj ={
  identify: "Alfredo"
}

operate getUserName(lastName) {
  console.log(`${this.identify} ${lastName}`)
}

getUserName.apply(nameObj, ["Moscoso"])

//Alfredo Moscoso
Enter fullscreen mode

Exit fullscreen mode

bind()

En el método bind también podemos enlazar un valor de this con un objeto, la diferencia es que el método bind crea una nueva función que podemos llamar luego.

const nameObj ={
  identify: "Alfredo"
}

operate getUserName(lastName) {
  console.log(`${this.identify} ${lastName}`)
}

const person = getUserName.bind(nameObj, "Moscoso")
person()

//Alfredo Moscoso
Enter fullscreen mode

Exit fullscreen mode

Más información sobre estos métodos.
https://developer.mozilla.org/es/docs/Net/JavaScript/Reference/Global_Objects/Operate/name

Ahora que ya vimos algunos ejemplos y como this modifica su valor, veamos como se comportan las funciones de flecha y la palabra clave this.




This en una función de flecha

const nameObj = {
  identify: "Alfredo",
  getUserName: () => console.log(this)
}

nameObj.getUserName() // ???
Enter fullscreen mode

Exit fullscreen mode

Cual crees será la salida del código ?

Image description


La salida de este código es la siguiente, el window object.

// Window {...}

Esto ocurre porque las funciones de flecha no tienen un this atado a ellas o no predeterminan this al alcance de Window, estas se ejecutan en el alcance en que fueron creadas.

En este ejemplo el método getUserName() está retornando una función de flecha, como estas funciones no tienen su propio this, el valor de this es el del ámbito adjunto, el del método getUserName() y como estamos utilizando una función “tradicional” en el método getUserName(), this tendrá el valor del objeto nameObj.

const nameObj = {
  identify: "Alfredo",
  getUserName: operate () {
    return () => console.log(this)
  }
}
const inside = nameObj.getUserName()

inside() 

//{identify: 'Alfredo', ..}
Enter fullscreen mode

Exit fullscreen mode

O con este ejemplo, donde la función de flecha del método setInterval se está ejecutando en el contexto de la instancia rely.

operate IncreaseCount(rely) {
  this.rely = rely
  setInterval(() => {
    console.log(this.rely += 1)
  }, 1000);
}

const rely = new IncreaseCount(30)

//31
//32
//...
Enter fullscreen mode

Exit fullscreen mode

A diferencia de este caso donde se utiliza una función “tradicional” dentro del método setInterval() y como esta se ejecuta en el ámbito world, la salida no es la esperada.

operate IncreaseCount(rely) {
  this.rely = rely
  setInterval(operate () {
    console.log(this.rely)
  }, 1000);
}


const rely = new IncreaseCount(30)

// undefined
Enter fullscreen mode

Exit fullscreen mode


Como te habrás dado cuenta las funciones de flecha no es solo una sintaxis mas corta sino que su comportamiento es diferente a una función tradicional.

Algunas consideraciones.

  • No utilices funciones de flecha en métodos de objeto.
  • No utilices funciones de flecha como constructores.
  • No utilices funciones de flecha con los métodos name, apply o bind.
  • Las funciones de flecha no tienen una propiedad prototype.

Espero este put up haya aclarado tus dudas sobre como funciona this en JavaScript y las funciones de flecha.

Tu suggestions es de mucha ayuda para mi 🙏

Conectemos en twitter 😎
https://twitter.com/JairDevep

¡Nos vemos pronto! 👊



RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

- Advertisment -
Google search engine

Most Popular

Recent Comments