Uma introdução às funções de seta JavaScript

Resumo : neste tutorial, você aprenderá como usar a função de seta JavaScript para escrever um código mais conciso para expressões de função.

Introdução às funções de seta JavaScript

As funções de seta ES6 fornecem uma maneira alternativa de escrever uma sintaxe mais curta em comparação com a expressão da função.

O exemplo a seguir define uma expressão de função que retorna a soma de dois números:

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

console.log(add(10, 20)); // 30Linguagem de código:  JavaScript  ( javascript )

O exemplo a seguir é equivalente à add()expressão de função acima, mas em vez disso use uma função de seta:

let add = (x, y) => x + y;

console.log(add(10, 20)); // 30;Linguagem de código:  JavaScript  ( javascript )

Neste exemplo, a função de seta possui uma expressão, x + yportanto retorna o resultado da expressão.

No entanto, se você usar a sintaxe de bloco, será necessário especificar a returnpalavra-chave:

let add = (x, y) => { return x + y; };Linguagem de código:  JavaScript  ( javascript )

O   typeofoperador retorna functionindicando o tipo de função de seta.

console.log(typeof add); // functionLinguagem de código:  JavaScript  ( javascript )

A função de seta também é uma instância do tipo Function , conforme mostrado no exemplo a seguir:

console.log(add instanceof Function); // trueLinguagem de código:  JavaScript  ( javascript )

Funções de seta JavaScript com vários parâmetros

Se uma função de seta tiver dois ou mais parâmetros, use a seguinte sintaxe:

(p1, p2, ..., pn) => expression;Linguagem de código:  PHP  ( php )

A seguinte expressão:

=> expressionLinguagem de código:  PHP  ( php )

é equivalente à seguinte expressão:

=> { return expression; }Linguagem de código:  PHP  ( php )

Por exemplo, para classificar um array de números em ordem decrescente, você usa o sort()método do objeto array da seguinte forma:

let numbers = [4,2,6];
numbers.sort(function(a,b){ 
    return b - a; 
});
console.log(numbers); // [6,4,2]Linguagem de código:  JavaScript  ( javascript )

O código é mais conciso com a sintaxe da função de seta:

let numbers = [4,2,6];
numbers.sort((a,b) => b - a);
console.log(numbers); // [6,4,2]Linguagem de código:  JavaScript  ( javascript )

Funções de seta JavaScript com um único parâmetro

Se uma função de seta tiver um único parâmetro, use a seguinte sintaxe:

(p1) => { statements }Linguagem de código:  PHP  ( php )

Observe que você pode omitir os parênteses da seguinte maneira:

p => { statements }Linguagem de código:  PHP  ( php )

O exemplo a seguir usa uma função de seta como argumento do map()método que transforma uma matriz de strings em uma matriz de comprimentos de string.

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

console.log(lengths);Linguagem de código:  JavaScript  ( javascript )

Saída:

[ 4, 3, 5 ]Linguagem de código:  JSON/JSON com comentários  ( json )

Funções de seta JavaScript sem parâmetro

Se a função de seta não tiver parâmetro, você precisará usar parênteses, assim:

() => { statements }Linguagem de código:  PHP  ( php )

Por exemplo:

let logDoc = () => console.log(window.document);
logDoc();Linguagem de código:  JavaScript  ( javascript )

Quebra de linha entre a definição do parâmetro e a seta

JavaScript não permite que você tenha uma quebra de linha entre a definição do parâmetro e a seta ( =>) em uma função de seta.

Por exemplo, o código a seguir causa um SyntaxError:

let multiply = (x,y) 
=> x * y; 
Linguagem de código:  JavaScript  ( javascript )

No entanto, o código a seguir funciona perfeitamente:

let multiply = (x,y) => 
x * y;Linguagem de código:  JavaScript  ( javascript )

JavaScript permite que você tenha quebras de linha entre os parâmetros, conforme mostrado no exemplo a seguir:

let multiply = (
  x,
  y
) => 
x * y;Linguagem de código:  JavaScript  ( javascript )

Declarações e expressões no corpo da função de seta

Em JavaScript, uma expressão é avaliada como um valor conforme mostrado no exemplo a seguir.

10 + 20;

Uma instrução executa uma tarefa específica, como:

if (x === y) {
    console.log('x equals y');
}Linguagem de código:  JavaScript  ( javascript )

Se você usar uma expressão no corpo de uma função de seta, não precisará usar chaves.

let square = x => x * x;Linguagem de código:  JavaScript  ( javascript )

No entanto, se você usar uma instrução, deverá colocá-la entre chaves, como no exemplo a seguir:

let except = msg => {
    throw msg;
};Linguagem de código:  JavaScript  ( javascript )

Funções de seta JavaScript e literal de objeto

Considere o seguinte exemplo:

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

let backgroundColor = setColor('Red');
console.log(backgroundColor.value); // "Red"Linguagem de código:  JavaScript  ( javascript )

A setColor()expressão da função retorna um objeto que possui a valuepropriedade definida para o colorargumento. 

Se você usar a sintaxe a seguir para retornar um objeto literal de uma função de seta, receberá um erro.

p => {object:literal}Linguagem de código:  PHP  ( php )

Por exemplo, o código a seguir causa um erro.

let setColor = color => {value: color };Linguagem de código:  JavaScript  ( javascript )

Como tanto o bloco quanto o objeto literal usam chaves, o mecanismo JavasScript não consegue distinguir entre um bloco e um objeto.

Para corrigir isso, você precisa colocar o literal do objeto entre parênteses da seguinte maneira:

let setColor = color => ({value: color });Linguagem de código:  JavaScript  ( javascript )

Função de seta vs. função regular

Existem duas diferenças principais entre uma função de seta e uma função regular.

1. Primeiro, na função de seta, this, arguments, super, new.targetsão lexicais. Isso significa que a função de seta usa essas variáveis ​​(ou construções) do escopo léxico anexo.
2. Segundo, uma função de seta não pode ser usada como construtor de função. Se você usar a newpalavra-chave para criar um novo objeto a partir de uma função de seta, receberá um erro.

Funções e thisvalor da seta JavaScript

Em JavaScript, uma nova função define seu próprio thisvalor. No entanto, este não é o caso da função de seta. Veja o exemplo a seguir:

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);Linguagem de código:  JavaScript  ( javascript )

Dentro da função anônima da setTimeout()função, o this.speedis undefined. A razão é que a thisfunção anônima obscurece a thisdo speedUp()método.

Para corrigir isso, você atribui o thisvalor a uma variável que não fica oculta dentro da função anônima da seguinte maneira:

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;Linguagem de código:  JavaScript  ( javascript )

Ao contrário de uma função anônima, uma função de seta captura o thisvalor do contexto envolvente em vez de criar seu próprio thiscontexto. O código a seguir deve funcionar conforme o esperado:

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;
Linguagem de código:  JavaScript  ( javascript )

Funções de seta JavaScript e o objeto de argumentos

Uma função de seta não possui o argumentsobjeto. Por exemplo:

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

let display = show(10, 20);
let result = display(5);
console.log(result); // 15Linguagem de código:  JavaScript  ( javascript )

A função de seta dentro da showMe()função faz referência ao argumentsobjeto. No entanto, este argumentsobjeto pertence à show()função, não à função de seta.

Além disso, uma função de seta não possui a new.targetpalavra-chave.

Funções de seta JavaScript e a propriedade protótipo

Quando você define uma função usando uma functionpalavra-chave, a função possui uma propriedade chamada prototype:

function dump( message ) {
    console.log(message);
}
console.log(dump.hasOwnProperty('prototype')); // trueLinguagem de código:  JavaScript  ( javascript )

No entanto, as funções de seta não possuem a prototypepropriedade:

let dump = message => console.log(message);
console.log(dump.hasOwnProperty('prototype')); // falseLinguagem de código:  JavaScript  ( javascript )

É uma boa prática usar funções de seta para retornos de chamada e fechamentos porque a sintaxe das funções de seta é mais limpa.

Resumo

• Use o (...args) => expression;para definir uma função de seta.
• Use o (...args) => { statements }para definir uma função de seta que possui várias instruções.
• Uma função de seta não tem ligação com thisor super.
• Uma função de seta não possui argumentsobjeto, new.targetpalavra-chave e prototypepropriedade.