Introducción a las funciones de flecha de JavaScript

Resumen: en este tutorial, aprenderás a usar la función de flecha de JavaScript para escribir código más concreto para declaraciones de funciones.

Introducción a las funciones de flecha de JavaScript

Las funciones de flecha de ES6 brindan una alternativa de escribir una sintaxis más corta en comparación con la declaración de función.

El siguiente ejemplo define una declaración de función que devuelve la suma de dos números:

let add = function (x, y) {
    return x + y;
};
console.log(add(10, 20)); // 30

El siguiente ejemplo es equivalente a la declaración de la función add() anterior, pero se usa una función de flecha en su lugar:

let add = (x, y) => x + y;
console.log(add(10, 20)); // 30;

En este ejemplo, la función de flecha tiene una declaración de x + y, por lo que devuelve el resultado de la expresión.

Sin embargo, si usas la sintaxis de bloque, debes especificar la palabra clave return:

let add = (x, y) => { return x + y; };

El operador typeof devuelve la función que indica el tipo de función de flecha.

console.log(typeof add); // function

La función flecha también es una instancia del tipo Función como se muestra en el siguiente ejemplo:

console.log(add instanceof Function); // true

Funciones de flecha de JavaScript con múltiples parámetros

Si una función de flecha tiene dos o más parámetros, utiliza la siguiente sintaxis:

(p1, p2, ..., pn) => expression;

La siguiente expresión:

=> expresión

es equivalente a la siguiente declaración:

=> { return expression; }

Por ejemplo, para ordenar un arreglo de números en orden descendente, utilice el método sort() del objeto de matriz de la siguiente manera:

let numbers = [4,2,6];
numbers.sort(function(a,b){
    return b - a;
});
console.log(numbers); // [6,4,2]

El código es más conciso con la sintaxis de la función de flecha:

let numbers = [4,2,6];
numbers.sort((a,b) => b - a);
console.log(numbers); // [6,4,2]

Funciones de flecha de JavaScript con un solo parámetro

Si una función de flecha toma un solo parámetro, utiliza la siguiente sintaxis:

(p1) => { statements }

Ten en cuenta que puedes omitir los paréntesis de la siguiente manera:

p => { statements }

El siguiente ejemplo usa una función de flecha como argumento del método map() que transforma una matriz de cadenas en una matriz de longitudes de cadena.

let names = ['John', 'Mac', 'Peter'];
let lengths = names.map(name => name.length);

console.log(lengths);

Resultado:

[ 4, 3, 5 ]

Funciones de flecha de JavaScript sin parámetro

Si la función de flecha no tiene ningún parámetro, debe usar paréntesis, como este:

() => { statements }

Ejemplo:

let logDoc = () => console.log(window.document);
logDoc();

Salto de línea entre la definición del parámetro y la flecha

JavaScript no permite tener un salto de línea entre la definición del parámetro y la flecha (=>) en una función de flecha.

Por ejemplo, el siguiente código provoca un SyntaxError:

let multiply = (x,y)
=> x * y;

Sin embargo, el siguiente código funciona perfectamente bien:

let multiply = (x,y) =>
x * y;

JavaScript permite tener saltos de línea entre parámetros como se muestra en el siguiente ejemplo:

let multiply = (
  x,
  y
) =>
x * y;

Declaraciones y expresiones en el cuerpo de la función de flecha

En JavaScript, una expresión se evalúa como un valor como se muestra en el siguiente ejemplo.

10 + 20;

Una declaración hace una tarea específica como:

if (x === y) {
    console.log('x equals y');
}

Si usas una expresión en el cuerpo de una función de flecha, no necesita usar las llaves.

let square = x => x * x;

Sin embargo, si usas una declaración, debes envolverla dentro de un par de llaves como en el siguiente ejemplo:

let except = msg => {
    throw msg;
};

Funciones de flecha en JavaScript y uso de objetos

Considere el siguiente ejemplo:

let setColor = function (color) {
    return {value: color}
};

let backgroundColor = setColor('Red');
console.log(backgroundColor.value); // "Red"

La expresión de la función setColor() devuelve un objeto que tiene la propiedad de value establecida en el argumento de color.

Si usas la siguiente sintaxis para devolver un objeto en una función de flecha, obtendrás un error.

p => {object:literal}

Por ejemplo, el código siguiente provoca un error.

let setColor = color => {value: color };

Dado que tanto el bloque como el objeto literal usan corchetes, el motor de JavasScript no puede distinguir entre un bloque y un objeto.

Para solucionar esto, debes envolver el objeto entre paréntesis de la siguiente manera:

let setColor = color => ({value: color });

Función de flecha frente a función regular

Hay dos diferencias principales entre una función de flecha y una función regular.

• Primero, en la función flecha, los argumentos this, super, new.target son léxicos. Significa que la función de flecha usa estas variables (o construcciones) del ámbito léxico adjunto.
• En segundo lugar, una función de flecha no se puede utilizar como constructor de funciones. Si usas la palabra clave new para crear un nuevo objeto a partir de una función de flecha, obtendrás un error.

Funciones de flecha de JavaScript y su valor

En JavaScript, una nueva función define su propio valor. Sin embargo, no es el caso de la función flecha. Veamos el siguiente ejemplo:

function Car() {
    this.speed = 0;

    this.speedUp = function (speed) {
        this.speed = speed;
        setTimeout(function () {
            console.log(this.speed); // undefined
        }, 1000);

    };
}

let car = new Car();
car.speedUp(50);

Dentro de la función anónima de la función setTimeout(), this.speed no está definido. La razón es que el this de la función anónima oculta el this del método speedUp().

Para solucionar esto, asigna el valor this a una variable que no sombree dentro de la función anónima de la siguiente manera:

function Car() {
    this.speed = 0;

    this.speedUp = function (speed) {
        this.speed = speed;
        let self = this;
        setTimeout(function () {
            console.log(self.speed);
        }, 1000);

    };
}

let car = new Car();
car.speedUp(50); // 50;

A diferencia de una función anónima, una función de flecha captura el valor this del contexto adjunto en lugar de crear su propio contexto this. El siguiente código debería funcionar como se esperaba:

function Car() {
    this.speed = 0;

    this.speedUp = function (speed) {
        this.speed = speed;
        setTimeout(
            () => console.log(this.speed),
            1000);

    };
}

let car = new Car();
car.speedUp(50); // 50;

Funciones de flecha de JavaScript y el objeto arguments

Una función de flecha no tiene el objeto arguments. Por ejemplo:

function show() {
    return x => x + arguments[0];
}

let display = show(10, 20);
let result = display(5);
console.log(result); // 15

La función de flecha dentro de la función showMe() hace referencia al objeto arguments. Sin embargo, este objeto de argumentos pertenece a la función show(), no a la función flecha.

Además, una función de flecha no tiene la palabra clave new.target.

Funciones de flecha de JavaScript y la propiedad prototype.

Cuando defines una función usando una palabra clave de function, la función tiene una propiedad llamada prototype:

function dump( message ) {
    console.log(message);
}
console.log(dump.hasOwnProperty('prototype')); // true

Sin embargo, las funciones de flecha no tienen la propiedad prototype:

let dump = message => console.log(message);
console.log(dump.hasOwnProperty('prototype')); // false

Es una buena práctica usar funciones de flecha para devoluciones de llamada y cierres porque la sintaxis de las funciones de flecha es más clara.

Resumen:

• Utiliza la expresión (...args) =>; para definir una función de flecha.
• Usa (...args) => { declaraciones } para definir una función de flecha que tiene varias declaraciones.
• Una función de flecha no tiene su vínculo con this o super.
• Una función de flecha no tiene objeto de arguments, palabra clave new.target ni propiedad de prototype.