Flecha función en JavaScript

En este tutorial, vamos a aprender lo que es una función Flecha y la conversión de las funciones de funcionar flecha ?

Flecha función son class, tiene mucho sentido, son nuevos y modernos, es increíble y es la sintaxis short y táctica de azúcar . Flecha funciones se introdujeron en JS ES6 (ES 2015).

Empecemos con un código con una función tradicional de tener una comparación con la función de flecha.

Código fragmento 1

const sayHello = function (name){
return "Hey there, " + name +"!"
}
console.log (sayHello ('Sam'));

Ahora está más o menos claro lo que está pasando en el fragmento de código anterior y la salida es “Hola, Sam!”

Utilizamos ahora la función de flecha para cambiar el código anterior.

Código fragmento 2

const sayHello = (name) => "Hey there, " + name +" !"
console.log(sayHello('Sam'));

salida short tanto el código será el mismo. Vamos a analizar el arrow función , como podemos ver que en el Código snippet 2 no utilizamos la palabra clave función en lugar utilizado ‘=>’ (símbolo de flecha) también, no tenemos ninguna declaración for sino directamente pasamos la misma declaración en el Código fragmento de código 2 que pasamos bajo el Código de return de fragmento de código 1 .

Sintaxis:

 
(param1, param2, param3, ...) => {statement}

Cuando, {sentencia} es equivalente a => {expresión return}

Nota: sentencia if es una return línea podemos omitir las llaves, pero en aras de código limpio que ellos y preferimos mismo con el paréntesis si hay un solo parámetro, entonces podemos omitir ellos también.

Ahora vamos a tratar con las funciones con objetos:

Ejemplo [Fragmento de código 3]:

const names =[{
name: 'Sam',
value: 0,
},{
name: 'Tom',
value: 1,
},{
name: 'Max',
value: 0,
}]
const valueZero = names.filter((name) =>name.value === 0) //line 1
// constvalueZero = names.filter(function(name){ //line 2
// return name.value === 0
// })
console.log(valueZero);

Explicación:

En fragmento de código 3 , tenemos una matriz de nombres de objetos que contiene 3 nombres Sam, Tom, y Max con valores 0, 1, 0, respectivamente . Como podemos comparar la línea 1 y línea 2 (que se comenta fuera) sirve al mismo propósito pero línea 1 con función flecha es más concisa y más limpio que la función normal en línea 2 que son largo.

En línea 1 (o línea 2) , se utilizó un método filter () que elementos devuelve (en nuestro long todo objeto) de la matriz que cumple una cierta condición, también se requiere una función de devolución de llamada. Así que en nuestro una línea, utilizamos la función flecha como nuestra función de devolución de llamada.

Salida:

[ { name: 'Sam', value: 0 }, { name: 'Max', value: 0 } ]

Consejos – hacer y no hacer:

1. Precaución con esta palabra clave y Flecha Función

Bueno, hasta ahora hemos visto flecha funciones son tan fresco, fácil de usar y concisa. Así que debemos usar la flecha funciones en todas partes? La respuesta es más o menos ‘no’. Lo que quiero decir Permítanme demostrar que con esta palabra clave en el ejemplo siguiente [Fragmento de código 4]:

Ejemplo [Fragmento de código 4]

let javascript = {
totalArticles: 105,
totalContentWriter: 3,
description1:() => {
return `IncludeHelp have ${this.totalArticles} articles on JavaScript provided by
${this.totalContentWriter} content writers`
},
description2: function() {
return `IncludeHelp have ${this.totalArticles} articles on JavaScript provided by
${this.totalContentWriter} content writers`
}
}
console.log(`Description2: ${javascript.description2()}`);
console.log(`Description1: ${javascript.description1()}`);

salida

Arrow function in JavaScript - 4

Explicación:

Ahora hemos creado un objeto denominado Javascript que contienen aproximadamente el número total de artículos y escritor de contenido contribuyeron class en IncludeHelp.com (es un conjunto de datos hipotéticos, no real). Por ello hemos creado dos funciones, de uno es un arrow función . Ahora hacemos tanto description1 y DESCRIPCIÓN2 similar pero en la salida, función arrow devuelve undefined mientras que la salida requerida fue devuelto con la función normal. Esto es debido a este palabra clave

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *