Función de flecha de Javascript frente a la función
Debido a que el cuerpo de una clase tiene un contexto this, las funciones de flecha como campos de clase se cierran sobre el contexto this de la clase y el this dentro del cuerpo de la función de flecha apuntará correctamente a la instancia (o a la propia clase, para campos estáticos). Sin embargo, al tratarse de un cierre, y no del propio enlace de la función, el valor de this no cambiará en función del contexto de ejecución.
Nota: Los campos de la clase se definen en la instancia, no en el prototipo, por lo que cada creación de una instancia crearía una nueva referencia a la función y asignaría un nuevo cierre, lo que potencialmente llevaría a un mayor uso de memoria que un método normal sin enlace.
Quizás el mayor beneficio de usar funciones Arrow es con métodos como setTimeout() y EventTarget.prototype.addEventListener() que normalmente requieren algún tipo de cierre, llamada, aplicación o enlace para asegurar que la función se ejecuta en el ámbito adecuado.
Argumentos de la función de flecha de Javascript
Las funciones de flecha a primera vista parecen inútiles. Parecen ser sólo otra forma de crear una función, pero con una sintaxis más confusa. Si bien es cierto que las funciones de flecha ofrecen una sintaxis diferente para la creación de funciones, también cambian fundamentalmente la forma en que una función es alcanzada, que es la razón principal por la que las funciones de flecha son tan útiles.
¿Cómo crear funciones de flecha? Antes de que podamos profundizar en por qué este cambio de alcance en las funciones de flecha es tan útil, primero tenemos que discutir cómo definir una función de flecha. Tomemos la función de abajo y redefinámosla como una función flecha.function sum(a, b) {
Ahora hemos convertido la suma en una función flecha. Esto puede no parecer tan útil ya que parece más confuso para trabajar, pero hay algunas cosas que puedes hacer con las funciones flecha que hacen que la sintaxis sea preferible.Funciones flecha de un solo parámetroUna buena característica de las funciones flecha es que si sólo tienes un parámetro en la función puedes omitir los paréntesis alrededor de los parámetros.function isPositive(number) {
Función Javascript
Esta es una función de flecha. Las funciones de flecha son una sintaxis corta, introducida por ECMAscript 6, que puede utilizarse de forma similar a como se utilizan las expresiones de función. En otras palabras, a menudo se pueden utilizar en lugar de expresiones como function (foo) {…}. Pero tienen algunas diferencias importantes. Por ejemplo, no vinculan sus propios valores de esto (ver más abajo para su discusión).
Las funciones de flecha forman parte de la especificación ECMAscript 6. Todavía no están soportadas en todos los navegadores, pero están parcial o totalmente soportadas en Node v. 4.0+ y en la mayoría de los navegadores modernos en uso a partir de 2018. (He incluido una lista parcial de navegadores compatibles a continuación).
Una expresión de función de flecha (también conocida como función de flecha gorda) tiene una sintaxis más corta en comparación con las expresiones de función y vincula léxicamente el valor this (no vincula su propio this, argumentos, super o new.target). Las funciones de flecha son siempre anónimas. Estas expresiones de función son más adecuadas para las funciones que no son métodos y no pueden utilizarse como constructores.
Función de flecha onclick de Javascript
Las funciones son como recetas donde almacenas instrucciones útiles para lograr algo que necesitas que ocurra en tu programa, como realizar una acción o devolver un valor. Al llamar a su función, usted ejecuta los pasos incluidos en su receta. Puedes hacerlo cada vez que llames a esa función sin necesidad de reescribir la receta una y otra vez.
Y sólo porque puedas, no significa que debas hacerlo. Mezclado con un poco de sarcasmo desenfadado y bienintencionado, Kyle Simpson (de la fama de You Don’t Know JS) ha puesto sus pensamientos sobre la omisión de paréntesis en este diagrama de flujo.
Cuando sólo tienes una expresión en el cuerpo de tu función, puedes hacer que la sintaxis de las flechas de ES6 sea aún más concisa. Puedes mantener todo en una línea, eliminar las llaves y eliminar la palabra clave return.
Acaba de ver cómo funcionan estas ingeniosas líneas en los ejemplos anteriores. Aquí hay un ejemplo más, sólo para medir. La función orderByLikes() hace lo que dice en la lata: es decir, devuelve un array de objetos de series de Netflix ordenados por el mayor número de likes:
