¿Qué es la función de flecha y cómo crearla?

La función en cualquier lenguaje de programación es el componente básico para crear y combinar los bits de código relacionados. Cada lenguaje de programación proporciona ciertos tipos de prácticas para escribir cualquier función. La sintaxis de la función de flecha es una de las más utilizadas y eficientes para crear una función en JavaScript.

Cómo crear la función de flecha: Para escribir la función de flecha, simplemente cree cualquier variable, puede ser const, let o var, pero siempre prefiera con const para evitar problemas innecesarios. Y luego asigne el código de función a la variable. Entonces, a partir de ahora, puede llamar a esa función escribiendo el paréntesis delante de esa variable. Con la sintaxis de la función de flecha, consideramos la función como un objeto y asignamos la definición a alguna variable. La siguiente es la sintaxis de la función flecha:

const myFunction = (param1, param2,
    .... paramN) => { // function code }
const myFunction = (param) => { // function code }
                      or 
const myFunction = param => { // function code }  
const myFunction = param => { return param*param }
                      or 
const myFunction = param => param*param

Podemos omitir el paréntesis {} cuando solo hay una declaración y el javascript considera esa declaración como valor de retorno, tampoco es necesario escribir paréntesis() cuando solo hay un parámetro. La función de flecha no puede contener el salto de línea entre (parámetros) y la flecha =>. Además, no debe haber ningún espacio entre los caracteres = y >.   

Ejemplo 1: En este ejemplo, crearemos un programa para sumar dos números primero usando la función normal y luego usando la función de flecha.

Usando la función normal:

<script>
function myFunction(){
  let a = 5, b = 4;
  return a+b;
}
console.log(myFunction());
</script>

Usando la función de flecha:

<script>
const myFunction = () =>{
  let a = 5, b = 4;
  return a+b;
}
console.log(myFunction());
</script>

Producción:

9

Explicación: En la función de flecha, no escribimos la palabra clave de función, por lo que es necesario asignarla a algún tipo de variable como aquí hemos asignado a una variable constante llamada myFunction.

Ejemplo 2: En este ejemplo, crearemos una función de expresiones individuales utilizando la función normal y la función de flecha una por una.

Usando la función normal:

<script>
function myFunction(num){
  return num*num;
}
console.log(myFunction(4));
</script>

Usando la función de flecha:

<script>
const myFunction = num => num*num;
// Equivalent to const myFunction = (num) =>{ return num*num; }
  
console.log(myFunction(4));
</script>

Producción:

16

Explicación: cuando solo tenemos una expresión de retorno en función, la sintaxis de flecha proporciona una forma más fácil de escribir. Podemos eliminar el paréntesis del parámetro y también la declaración de retorno junto con las llaves de los bloques de código.

Limitaciones de las funciones de flecha: anteriormente vimos con qué facilidad podemos crear una función con la sintaxis de flecha, ahora es el momento de analizar algunas limitaciones porque no funcionarán de manera similar a las funciones normales en varias situaciones.

Sin vinculación de esta palabra clave: No se puede utilizar como método debido a que no tiene una vinculación de esta palabra clave. La función de flecha contiene el léxico this en lugar del propio. El valor de esto se basará en el ámbito en el que se definen. Entonces, la función de flecha se define en el alcance de la ventana, por lo que se referirá al objeto de la ventana en lugar del objeto en el que se escribió la función. No existe ninguna propiedad o método con ‘num’, por lo tanto, se imprimirá indefinido.

<script>
var obj = {
  num: 10,
  myFunc: () => {console.log(this.num)}
}
  
obj.myFunc();
</script>

Producción:

undefined

Explicación: La función normal contiene this que se refiere al objeto al que pertenece y, por lo tanto, la función pertenece al objeto obj y la propiedad num existe dentro de él, por lo que se imprimirá correctamente. 

Las funciones de flecha no se pueden usar como constructor.

Ejemplo:

<script>
var MyFunction = () => {};
var instan = new MyFunction();
</script>

Producción:

Los métodos call, apply, bind no funcionan con funciones de flecha: A continuación se muestra el recuerdo general de conceptos de estos métodos con el ejemplo de la función tradicional, y más adelante veremos que no funcionará bien con funciones de flecha.

• Método call(): Este método se usa para llamar a cualquier función para un objeto, y dentro de la función, esto se referirá al objeto que se está pasando.
• Método apply(): también funciona de manera similar al método de llamada. En lugar de pasar argumentos por separado aquí, pasamos una array de argumentos.
• Método bind(): este método también se usa para llamar a cualquier función para un objeto, pero crea otra copia de esa función al vincular el objeto con el que se puede usar más adelante.

Ejemplo:

<script>
let studentObj1 = {
    studentName: "Twinkle Sharma",
    branch:"Computer Science & Engineering"
}
  
function showDetails(position) {
    console.log(`${this.studentName} of ${this.branch} is a ${position}`)
}
  
showDetails.call(studentObj1, "Technical Writer");
   
showDetails.apply(studentObj1, ["Technical Writer"]);
  
const myFunction = showDetails.bind(studentObj1);
  
myFunction("Technical Writer");
  
</script>

Producción:

Explicación: Debido a que esto se refiere al ámbito en el que se define la función de flecha, significa que la ventana. Esta es la razón por la cual los métodos de llamada, aplicación y vinculación no funcionan con la función de flecha. Por lo tanto, solo podemos acceder a la ventana con la ayuda de la función de flecha. Y como las propiedades del nombre del estudiante y la rama no existen en la ventana, se imprimirá un objeto indefinido.