O que são as funções de seta do JavaScript?

Neste artigo, você aprenderá tudo sobre JavaScript Arrow Functions. As funções de seta que usamos para tornar o código mais conciso e existem muitas variações que você pode escrever.

Javascript é uma linguagem com muitas funções . Funções em javascript são um dos conceitos mais valiosos. Escrevemos funções, passamos funções, callbacks e o código de sincronização temos funções. É apenas uma parte fundamental do JavaScript.

Por muito tempo, escrevemos palavras-chave de função para escrever uma função em javascript. Aqui estão alguns exemplos de funções em JavaScript. Você pode ver que estamos usando uma palavra-chave de função aqui.

(function () {
   //...
});

Uma função anônima não é acessível após sua criação inicial. Portanto, muitas vezes você precisa atribuí-lo a uma variável.

Por exemplo, o seguinte mostra uma função anônima que exibe uma mensagem:

let show = function() {
    console.log('Anonymous function');
};

show();

Como precisamos chamar a função anônima posteriormente, atribuímos a função anônima à show variável.

Como toda a atribuição da função anônima à variável show faz uma expressão válida, você não precisa colocar a função anônima dentro dos parênteses ().

Na prática, muitas vezes você passa funções anônimas como argumentos para outras funções. Por exemplo:

setTimeout(function() {
    console.log('Execute later after 1 second')
}, 1000);

Observe que as funções são cidadãs de primeira classe em JavaScript. Portanto, você pode passar uma função para outra função como um argumento.

Aqui você pode ver todas as vezes que precisamos escrever uma palavra-chave de função e definir uma função. Mas é aqui que a função de seta entra em cena. O ES6 introduziu expressões de função de seta que fornecem uma abreviação para declarar funções anônimas. Uma expressão de função de seta é uma alternativa compacta a uma expressão de função tradicional , com algumas diferenças semânticas e limitações deliberadas no uso

Normalmente as funções de seta são mais curtas e às vezes se comportam de maneira diferente quando comparadas às funções javascript tradicionais.

As funções de seta não são suportadas pelo Internet Explorer .

Estamos usando os símbolos '= e >' quando definimos uma função de seta. Parece uma seta, por isso estamos chamando essas funções de funções de seta.

let show = () => console.log('Anonymous function');

Podemos escrever a função normal como uma função de seta como esta.

let add = function (a, b) { // Normal Fucntion
    return a + b;
};
let add = (a, b) => a + b;  // Arrow Fucntion

• Se você tiver 2 argumentos, poderá usar parênteses como uma função normal:

let add = function (a, b) { // Normal Fucntion
    return a + b;
};



let add = (a, b) => a + b;  // Arrow Fucntion

let square = function(x){ // Normal Fucntion
    return x * x;
}


let square = (x) => { // Arrow fucntion with parenthesis
    return x * x;
}

let square = x => { // You can modify it as like this
    return x * x;
}

let square = x => (  // Furthermore you can modify by removing return keyword
     x * x   // Replace {} with  ()
);

let square = x => x * x; // Furthermore you can modify

let test  = () => console.log('No Arguments');

Para remover esse problema, precisamos colocá-lo entre parênteses .

Agora, o javascript sabe disso como um valor de retorno e não é apenas uma chave para o corpo de uma função.

As funções de seta não têm seus próprios vínculos com this, arguments, ou super, e não devem ser usadas como métodos

• As expressões de função de seta devem ser usadas apenas para funções que não sejam de método, porque elas não têm seu próprio this.

const person ={
    name: "Kasun",
    action: function(){
        console.log(this.name, "says Hi");
    }
}

person.action();

Estou chamando a ação em um objeto pessoa e o valor do nome retornará com a string concatenada. Agora vamos usar funções de seta em vez de funções normais.

const person ={
    name: "Kasun",
    action: () => console.log(this.name, "says Hi")
}

person.action();

Agora, apenas obtemos “ diz oi ” como saída. O que aconteceu aqui? Quando usamos as funções de seta, o valor do nome não é definido, pois as funções normais funcionam. É apenas definido como o objeto da janela quando usamos isso nas funções de seta. Ele se comporta como se a função de ações fosse uma função autônoma.

Por motivos semelhantes, os métodos call(), apply()e bind()não são úteis quando chamados em funções de seta, porque as funções de seta são estabelecidas thiscom base no escopo em que a função de seta é definida e o thisvalor não muda com base em como a função é invocada.

• As funções de seta não podem ser usadas como construtoras e gerarão um erro quando chamadas com new. Eles também não têm prototypepropriedade.

const Foo = () => {};
const foo = new Foo(); // TypeError: Foo is not a constructor
console.log("prototype" in Foo); // false

Isso é tudo sobre as funções de seta e espero que você entenda perfeitamente as funções de seta. Vejo você em outro tutorial.

Obrigado!