Operador de flecha en ES6 de JavaScript

ES6 viene con varias ventajas y una de ellas es el operador de flecha. Ha reducido la función que define el tamaño del código, por lo que es una de las preguntas más populares en la entrevista. Profundicemos más en el funcionamiento del operador de flecha. 

Sintaxis: en ES5, una función se define mediante la siguiente sintaxis:

function functionName(arg1, arg2….)
{
    // body of function
}

Pero en ES6 se define una función usando un operador de flecha y cuya sintaxis es así:

let functionName = (arg1, arg2 ….) => {
    // body of function
}

Ventajas del operador de flecha: 

1) Reduce el tamaño del código: como hemos reemplazado la sintaxis de la función tradicional por la sintaxis del operador de flecha correspondiente, el tamaño del código se reduce y tenemos que escribir menos cantidad de código para el mismo trabajo. 

2) Suelte las llaves de función para funciones de una línea: podemos quitar las llaves de la función en la declaración del operador de flecha, por ejemplo: 

Código #1: 

<script>
 
   //ES5 VERSION
   var setSize = (sz)=>
   size=sz;
    
   //sets size value to the passed value
   setSize(10);
   document.write(size);
                     
</script>

Producción:

10

Esto también se puede escribir como: 

Código #2: 

<script>
 
    //ES6 Version
    //Do not need to put curly braces for one line functions
    setDoubleSize = (sz)=>size=2*sz;
     
    //Sets value of size equivalent to double of
    //passed argument in setDoubleSize function
    setDoubleSize(35);
    document.write(size);   
     
</script>

Producción:

70

3) No es necesario definir la declaración de devolución en funciones de una línea: en ES5, debe definir la declaración de devolución en las funciones y si en ES6 no definimos la declaración de devolución, ES6 devuelve automáticamente el valor cada vez que se llama a la función dada. Esto quedará claro con el siguiente ejemplo: la versión ES5 de la función de desplazamiento a la izquierda de un bit es la siguiente: 

function leftShift(value)
{
    return value / 2;
}

Mientras que en ES6, la siguiente función se puede escribir de la siguiente manera: 

// Always try to use let keyword for the declaration
// of  any variable instead of using var keyword
// in order to avoid unnecessary hoisting and closures 
// as well as mismatching values of variables...
 
let leftShift = (value) => value / 2;

Código #3: 

<script>
 
    //ES5 VERSION
    function leftShiftES5(value){
    return value/2;
    }
     
    //ES6 VERSION
    var leftShiftES6 = (value)=>value/2;
    var a=10,b=10;
    document.write('values before left shift'+"<br>");
    document.write('a : '+a+' b : '+b + "<br>");
 
    //Both of the function should give same output
    a=leftShiftES5(a);
    b=leftShiftES6(b);
    document.write('values after left shift' +"<br>");
    document.write('a : '+a+' b : '+b + "<br>");
     
</script>

Producción:

values before left shift
a : 10 b : 10
values after left shift
a : 5 b : 5

4) Vincular léxicamente el contexto: la sintaxis del operador de flecha vincula léxicamente el contexto para que se refiera al contexto de origen. Significa que usa esto de las funciones de flecha. 

Ejemplo: Consideremos una clase que tiene una array de edad y si la edad <18 los empujaremos a la cola de niños. En ES5 tienes que hacer esto de la siguiente manera: 

this.age.forEach(function(age) {
    if (age < 18)
        this.child.push(age);
}.bind(this));

En ES6 esto se puede hacer de la siguiente manera: 

this.age.forEach((age) => {
    if (age < 18)
        this.child.push(age);
});

Por lo tanto, no tenemos que vincularlo implícitamente y esto se hace automáticamente mediante funciones de flecha. Así que hemos visto que la función de flecha hace que la función de escritura sea menos compleja y reduce la cantidad de líneas, por lo que está siendo utilizada por las preguntas del desarrollador y también es una de las preguntas más populares durante las entrevistas.