Un tutorial sobre las funciones de flecha de JavaScript

Las funciones de flecha son uno de los cambios más impactantes en ES6 / ES2015, y se utilizan ampliamente en la actualidad. Se diferencian ligeramente de las funciones habituales. Averiguar como

Las funciones de flecha se introdujeron en ES6 / ECMAScript 2015 y, desde su introducción, cambiaron para siempre la apariencia (y el funcionamiento) del código JavaScript.

En mi opinión, este cambio fue tan acogedor que ahora rara vez se ve el uso de lafunctionpalabra clave en bases de código modernas. Aunque eso todavía tiene su uso.

Visualmente, es un cambio simple y bienvenido, que le permite escribir funciones con una sintaxis más corta, desde:

const myFunction = function() {
  //...
}

a

const myFunction = () => {
  //...
}

Si el cuerpo de la función contiene solo una declaración, puede omitir los corchetes y escribir todo en una sola línea:

const myFunction = () => doSomething()

Los parámetros se pasan entre paréntesis:

const myFunction = (param1, param2) => doSomething(param1, param2)

Si tiene un parámetro (y solo uno), puede omitir los paréntesis por completo:

const myFunction = param => doSomething(param)

Gracias a esta breve sintaxis, las funciones de flechaFomentar el uso de pequeñas funciones..

Retorno implícito

Las funciones de flecha le permiten tener un retorno implícito: los valores se devuelven sin tener que usar elreturnpalabra clave.

Funciona cuando hay una declaración de una línea en el cuerpo de la función:

const myFunction = () => 'test'

myFunction() //‘test’

Otro ejemplo, al devolver un objeto, recuerde envolver las llaves entre paréntesis para evitar que se considere la función de envoltura de los corchetes del cuerpo:

const myFunction = () => ({ value: 'test' })

myFunction() //{value: ‘test’}

Cómothisfunciona en funciones de flecha

thises un concepto que puede resultar complicado de comprender, ya que varía mucho según el contexto y también varía según el modo de JavaScript (Modo estrictoO no).

Es importante aclarar este concepto porque las funciones de flecha se comportan de manera muy diferente en comparación con las funciones regulares.

Cuando se define como un método de un objeto, en una función regularthisse refiere al objeto, por lo que puede hacer:

const car = {
  model: 'Fiesta',
  manufacturer: 'Ford',
  fullName: function() {
    return `${this.manufacturer} ${this.model}`
  }
}

vocacióncar.fullName()volverá"Ford Fiesta".

losthisalcance con funciones de flecha esheredadodesde el contexto de ejecución. Una función de flecha no vinculathisen absoluto, por lo que su valor se buscará en la pila de llamadas, por lo que en este códigocar.fullName()no funcionará y devolverá la cadena"undefined undefined":

const car = {
  model: 'Fiesta',
  manufacturer: 'Ford',
  fullName: () => {
    return `${this.manufacturer} ${this.model}`
  }
}

Debido a esto, las funciones de flecha no son adecuadas como métodos de objeto.

Las funciones de flecha tampoco se pueden usar como constructores, cuando la instanciación de un objeto generará unTypeError.

Aquí es donde se deben usar las funciones regulares en su lugar,cuando no se necesita un contexto dinámico.

Esto también es un problema al manejar eventos. Conjunto de oyentes de eventos DOMthispara ser el elemento de destino, y si confía enthisen un controlador de eventos, es necesaria una función regular:

const link = document.querySelector('#link')
link.addEventListener('click', () => {
  // this === window
})
const link = document.querySelector('#link')
link.addEventListener('click', function() {
  // this === link
})

Más tutoriales de js: