Última atualização: 09/04/2018

As funções de seta são uma versão abreviada das funções regulares. As funções de seta são formadas usando um sinal de seta (=>), precedido pelos parâmetros da função entre parênteses e seguido pelo próprio corpo da função. Por exemplo:

Seja soma = (x, y) => x + y; seja a = soma(4, 5); // 9 seja b = soma(10, 5); // 15

Neste caso, a função (x, y) => x + y soma dois números e é atribuída à variável soma. A função leva dois parâmetros - x e y. Seu corpo é a soma dos valores desses parâmetros. E como depois da seta existe na verdade um valor específico que representa a soma dos números, a função retorna esse valor. E podemos chamar essa função através da variável soma e obter seu resultado nas variáveis ​​a e b.

Se uma seta for seguida por uma operação ou expressão que retorne um valor, então esse valor será realmente retornado pela função de seta. Mas uma expressão que não retorna nada e simplesmente executa alguma ação também pode ser usada como corpo de uma função:

Seja soma = (x, y) => console.log(x + y); soma(4, 5); // 9 soma(10, 5); // 15

Neste caso, a função console.log() não retorna nada e, portanto, a função sum também não retorna nenhum resultado.

Se uma função recebe um parâmetro, os parênteses ao redor dela podem ser omitidos:

Var quadrado = n => n * n; console.log(quadrado(5)); // 25 console.log(quadrado(6)); // 36 console.log(quadrado(-7)); //49

Se o corpo de uma função representa um conjunto de expressões, elas serão colocadas entre chaves:

Var square = n => (let result = n * n; return result; ) console.log(square(5)); //25

Para retornar o resultado de uma função neste caso, use a instrução return padrão.

Atenção especial deve ser dada ao caso em que a função arrow retorna um objeto:

Deixe user = (userName, userAge) => ((name: userName, idade: userAge)); deixe tom = usuário("Tom", 34); deixe bob = usuário("Bob", 25); console.log(tom.nome, tom.idade); // "Tom", 34 console.log(bob.nome, bob.idade); // "Bob", 25

Um objeto também é definido usando chaves, mas está entre parênteses.

Se a função de seta não aceitar nenhum parâmetro, serão colocados parênteses vazios:

Var olá = ()=> console.log("Olá Mundo"); olá(); // Olá mundo olá(); // Olá Mundo

Eles estão na moda, nós os vemos em todos os novos artigos. E, se você não estiver acostumado com eles, terá dificuldade em entender o código moderno (ES6) que contém funções de seta.

Este artigo não tem como objetivo informar quando ou como usá-los. Vou apenas tentar explicar a nova sintaxe para quem a vê pela primeira vez. Se você o usa ou não, não é importante, mas mais cedo ou mais tarde você ainda o encontrará em algum lugar. Então é melhor entender a mecânica dessa nova sintaxe.

Aqui está um pequeno exemplo:

Const addOne = função(n) ( return n + 1; )

O código acima pode ser escrito assim:

Const addOne = (n) => ( return n + 1; )

Ou, neste caso, ainda mais curto:

Const addOne = (n) => n + 1;

O segundo exemplo usa chaves (...), mas como se trata de apenas uma linha de código, as chaves podem ser omitidas e o retorno fica implícito, como visto no terceiro exemplo.

Quando uma função de seta possui um parâmetro, os parênteses podem ser omitidos:

// Era: someCallBack((resultados) => ( ... )) // Agora: someCallBack(resultados => ( ... ))

Mas, se não houver parâmetros, deve-se usar parênteses de abertura e fechamento:

SomeCallBack(() => ( ... ))

As setas de função são especialmente úteis para retornos de chamada. Aqueles familiarizados com JavaScript estão familiarizados com seu escopo léxico, que é bastante interessante, mas pode fazer truques como este ( esse):

Var_isto = isto; someCallBack(function() ( _this.accessOuterScope(); ))

Existem diversas variações deste "_this" (como "self" ou "that"), mas a ideia é a mesma. Nas funções de retorno de chamada precisamos de acesso à versão do escopo externo, mas a ideia é a mesma. Nas funções de retorno de chamada, precisamos de acesso à versão do escopo externo this , que agora é diferente de antes, pois estamos falando de uma função de retorno de chamada.

Usando funções de seta, obtemos "escopo do bloco" e "isto", que é o mesmo "isto" em ambos os casos. Isso significa que o código acima pode ser reescrito sem _this = this:

SomeCallBack(() => ( this.accessOuterScope(); ))

Vamos imaginar uma situação como no React, onde o evento onClick deve chamar doSomething() , (), mas também deve passar argumentos para doSomething() (por exemplo, ID). Este exemplo realmente não funciona:

Algum usuário)))

O código será executado, mas tecnicamente chamará doSomething() imediatamente quando a página for carregada. Para resolver este problema, alguns desenvolvedores referem-se a uma função wrapper:

Const User = React.createClass(function() ( render: function() ( return Some user), onClick: function() ( doSomething(this.props.userId); ) ))

A ausência de parênteses em this.onClick significa que é simplesmente uma referência de função em vez de uma chamada de função.

A função onClick() agora é uma espécie de wrapper para doSomething() . Com funções de seta você pode fazer “invólucros” deste tipo:

Const User = React.createClass(function() ( render: function() ( return doSomething(this.props.userId))>Algum usuário ) ))

Como alternativa, também poderíamos usar .bind() , que não requer nenhum wrapper (funções de seta ou algo assim):

Const User = React.createClass(function() ( render: function() ( return Some user ) ))

Se você precisar de suporte para navegadores diferentes das versões mais recentes cromada E Raposa de fogo, usar Transpilador Babel para converter o código ES6 que você escreveu para ES5.

Sobre a palavra-chave JavaScript “this”: recursos de uso com explicações

Por muito tempo, a palavra-chave this permaneceu um mistério para mim. É uma ferramenta poderosa, mas não é fácil de entender.

Do ponto de vista de Java, PHP ou qualquer outra linguagem regular, isso é considerado como a instância do objeto atual no método da classe, nada mais e nada menos. Na maioria das vezes não pode ser usado fora de um método, e esta abordagem não é mal compreendida.

Em JavaScript, este é o contexto de execução atual da função. Porque uma função pode ser chamada de quatro maneiras:

• chamada de função: alert("Olá Mundo!") ,
• chamada de método: console.log("Olá Mundo!"),
• chamada do construtor: new RegExp("\\d") ,
• chamada indireta: alert.call(undefined, "Hello World!") ,

e cada um deles define seu próprio contexto, o comportamento disso é ligeiramente inconsistente com o que os desenvolvedores novatos esperariam. Além disso, o modo estrito também afeta o contexto de execução.

A chave para entender a palavra-chave this é entender como uma função é chamada e como ela afeta o contexto. Este artigo aborda chamadas de função, como as chamadas afetam isso e armadilhas comuns ao identificar o contexto.

Antes de começarmos, vamos nos familiarizar com alguns termos:

• Uma chamada é a execução do código do corpo da função. Por exemplo, uma chamada para a função parseInt seria parseInt("15") .
• O contexto de chamada é o valor this no corpo da função.
• O escopo de uma função é o conjunto de variáveis, objetos e funções que podem ser acessados ​​de dentro do corpo da função.

Uma chamada de função é feita quando a expressão que é o objeto de função é seguida por um parêntese de abertura (, uma lista de argumentos separados por vírgula e um parêntese de fechamento) , por exemplo, parseInt("18") . Uma expressão não pode ser um acessador de myObject.myFunction que faz uma chamada de método. Por exemplo, .join(",") não é uma chamada de função, mas uma chamada de método.

Um exemplo simples de chamada de função:

Function hello(name) ( return "Hello " + name + "!"; ) // Invocação da função var message = hello("World"); console.log(mensagem); // => "Olá, mundo!"

hello("World") é uma chamada de função: hello é tratado como um objeto de função seguido por um argumento "World" entre parênteses.

Var mensagem = (função(nome) ( return "Olá " + nome + "!"; ))("Mundo"); console.log(mensagem); // => "Olá, mundo!"

Esta também é uma chamada de função: o primeiro par de parênteses (function(name) (...)) é tratado como um objeto de função, seguido por um argumento entre parênteses: ("World") .

este é o objeto global ao chamar a função

O objeto global é definido pelo ambiente de tempo de execução. Em um navegador da web, este é o objeto window.

Numa chamada de função, o contexto de execução é o objeto global. Vamos verificar o contexto da seguinte função:

Função sum(a, b) ( console.log(this === window); // => true this.myNumber = 20; // adiciona a propriedade "myNumber" ao objeto global return a + b; ) // sum( ) é invocado como uma função // isto em sum() é um objeto global (janela) console.log(sum(15, 16)); // => 31 console.log(window.myNumber); // => 20

Quando sum(15, 16) é chamado, o JavaScript o inicializa automaticamente como um objeto global, que é a janela do navegador.

Quando this é usado fora do escopo de qualquer função (o escopo mais externo: o contexto de execução global), também se refere ao objeto global:

Console.log(esta === janela); // => true this.myString = "Olá, mundo!"; console.log(janela.minhaString); // => "Olá, mundo!" console.log(esta === janela); // => verdadeiro

isso é indefinido ao chamar uma função no modo estrito

new City("Paris") é uma chamada de construtor. A inicialização do objeto é controlada por um método de classe especial: construtor, cujo this é o objeto recém-criado.

Chamar um construtor cria um novo objeto vazio que herda propriedades do protótipo do construtor. A função da função construtora é inicializar o objeto. Como você já sabe, o contexto desse tipo de chamada é chamado de instância. Este é o tema do próximo capítulo.

Quando o acessador myObject.myFunction é precedido pela palavra-chave new, o JavaScript fará uma chamada de construtor em vez de uma chamada de método. Vamos tomar new myObject.myFunction() como exemplo: primeiro, usando o acessador extractFunction = myObject.myFunction, a função é extraída e depois chamada como um construtor para criar um novo objeto: new extractFunction() .

este é o objeto recém-criado

O contexto da chamada do construtor é o objeto recém-criado. É usado para inicializar um objeto com dados do argumento da função construtora.

Vamos verificar o contexto no exemplo a seguir:

Function Foo () ( console.log(this instanceof Foo); // => true this.property = "Valor padrão"; ) // Invocação do construtor var fooInstance = new Foo(); console.log(fooInstance.property); // => "Valor padrão"

new Foo() faz uma chamada de construtor com o contexto fooInstance . O objeto é inicializado dentro de Foo: this.property é definido com um valor padrão.

A mesma coisa acontece ao usar class , apenas a inicialização ocorre no método construtor:

/* jshint esnext: true */ class Bar ( constructor() ( console.log(this instanceof Bar); // => true this.property = "Default Value"; ) ) // Invocação do construtor var barInstance = new Bar( ); console.log(barInstance.property); // => "Valor padrão"

Quando new Bar() é executado, o JavaScript cria um objeto vazio e o torna o contexto do método construtor. Agora você pode adicionar propriedades usando isto: this.property = "Default Value" .

Algumas funções JavaScript criam instâncias quando chamadas não apenas como construtor, mas também como função. Por exemplo, RegExp:

Var reg1 = new RegExp("\\w+"); var reg2 = RegExp("\\w+"); console.log (instância reg1 do RegExp); // => true console.log(reg2 instanceof RegExp); // => verdadeiro console.log(reg1.source === reg2.source); // => verdadeiro

Quando new RegExp("\\w+") e RegExp("\\w+") são executados, o JavaScript cria objetos de expressão regular equivalentes.

Usar uma chamada de função para criar um objeto é potencialmente perigoso (se você omitir o método de fábrica) porque alguns construtores podem não inicializar o objeto na ausência da palavra-chave new.

O exemplo a seguir ilustra o problema:

Function Vehicle(type,wheelsCount) ( this.type = type; this.wheelsCount =wheelsCount; return this; ) // Invocação da função var car = Vehicle("Car", 4); console.log(car.type); // => "Carro" console.log(car.wheelsCount); // => 4 console.log(car === janela); // => verdadeiro

Vehicle é uma função que define as propriedades type ewheelCount do objeto de contexto. Ao executar Vehicle("Car", 4), ele retorna um objeto carro com as propriedades corretas: car.type é igual a "Car" e car.wheelsCount é 4 . É fácil pensar que tudo está funcionando como deveria.

No entanto, este é o objeto window quando a função é chamada, e Vehicle("Car", 4) define as propriedades do objeto window - opa, algo deu errado. O novo objeto não foi criado.

Certifique-se de usar o operador new quando uma chamada do construtor for esperada:

Function Vehicle(type, wheelCount) ( if (!(this instanceof Vehicle)) ( throw Error("Erro: Invocação incorreta"); ) this.type = type; this.wheelsCount =wheelsCount; return this; ) // Invocação do construtor var carro = novo Veículo("Carro", 4); console.log(car.type); // => "Carro" console.log(car.wheelsCount); // => 4 console.log(car instanceof Vehicle); // => true // Invocação da função. Gera um erro. var Carro Quebrado = Veículo("Carro Quebrado", 3);

new Vehicle("Car", 4) funciona corretamente: um novo objeto é criado e inicializado porque a palavra new está presente.

Adicionada verificação à chamada de função: esta instância de Veículo para garantir que o contexto de execução tenha o tipo de objeto correto. Se não for Vehicle , um erro será gerado. Assim, se Vehicle("Broken Car", 3) for executado (sem new), então uma exceção será lançada: Error: Incorrect invocation .

Uma chamada indireta é feita quando uma função é chamada pelos métodos .call() ou .apply().

/* jshint esnext: true */ var sumArguments = (...args) => ( console.log(typeof argumentos); // => "indefinido" return args.reduce((resultado, item) => resultado + item ); console.log(somaArgumentos.nome); // => "" console.log(sumArguments(5, 5, 6)); // => 16

este é o contexto no qual a função de seta é definida

Uma função de seta não cria seu próprio contexto de execução, mas o empresta da função externa na qual está definida.

O exemplo a seguir mostra a transparência do contexto:

/* jshint esnext: true */ class Point ( construtor(x, y) ( this.x = x; this.y = y; ) log() ( console.log(this === myPoint); setTimeout(() => ( console.log(this === myPoint); // => true console.log(this.x + ":" + this.y); // => "95:165" ), 1000); ) ) var meuPonto = new Ponto(95, 165); meuPonto.log();

setTimeout chama a função de seta no mesmo contexto (o método myPoint) que o método log(). Como podemos ver, uma função de seta “herda” o contexto da função na qual está definida.

Se você tentar usar uma função regular neste exemplo, ela criará seu próprio contexto (janela ou indefinido). Portanto, para que o código funcione corretamente, você precisa vincular manualmente o contexto: setTimeout(function() (...).bind(this)) . Isso é complicado, então é mais fácil usar a função de seta.

Se uma função de seta for definida fora de todas as funções, seu contexto será um objeto global:

/* jshint esnext: true */ var getContext = () => ( console.log(this === janela); // => true return this; ); console.log(getContext() === janela); // => verdadeiro

A função de seta está associada ao contexto lexical de uma vez por todas. isso não pode ser alterado mesmo usando o método de mudança de contexto:

/* jshint esnext: true */ var numbers = ; (function() ( var get = () => ( return this; ); console.log(this === números); // => true console.log(get()); // => // Usar função de seta com .apply() e .call() console.log(get.call()); // => console.log(get.apply()); ); .bind()()); // => )).call(números);

Uma função chamada indiretamente usando .call(numbers) define isso como o valor de numbers . A função de seta get também recebe números assim porque leva o contexto lexicamente. Não importa como get seja chamado, seu contexto sempre será numbers . Chamar indiretamente com um contexto diferente (usando .call() ou .apply()), religar (usando .bind()) não terá efeito.

Uma função de seta não pode ser usada como construtor. Se você chamar new get() , o JavaScript gerará o erro: TypeError: get is not a constructor .

Você pode usar uma função de seta para declarar um método. É justo: suas declarações são muito mais curtas em comparação com a expressão usual: (param) => (...) em vez de function(param) (..) .

Este exemplo demonstra a definição do método format() da classe Period usando uma função de seta:

/* jshint esnext: true */ function Período (horas, minutos) ( this.hours = horas; this. minutos = minutos; ) Period.prototype.format = () => ( console.log(this === janela) ; // =>

Como format é uma função de seta definida no contexto global, este é o objeto window. Mesmo que format seja executado como um método do objeto walkPeriod.format(), window permanece o contexto de chamada. Isso acontece porque a função arrow possui um contexto estático que não é modificado por outros tipos de chamadas.

isto é window , então this.hours e this.minutos tornam-se indefinidos. O método retorna a string “horas indefinidas e minutos indefinidos” que não é o resultado desejado.

Uma expressão de função resolve o problema porque uma função regular muda seu contexto dependendo da chamada:

Função Período (horas, minutos) ( this.hours = horas; this. Minutes = minutos; ) Period.prototype.format = function() ( console.log(this === walkPeriod); // => true return this. horas + "horas e " + this.minutos + "minutos" ); var walkPeriod = new Período(2, 30); console.log(walkPeriod.format());

walkPeriod.format() é uma chamada de método com o contexto walkPeriod. this.hours leva o valor 2 e this.minutos leva 30 , então o método retorna o resultado correto: "2 horas e 30 minutos" .

Como a chamada de função tem o maior impacto sobre this , de agora em diante não pergunte:

De onde isto vem?

e pergunta:

Como a função é chamada?

E no caso de uma função de seta, pergunte:

O que é isso onde a função arrow é declarada?

Essa abordagem evitará dores de cabeça desnecessárias.

Não se confunda nos contextos! 🙂

12 respostas

Esta é a função da seta. Funções de seta são uma sintaxe curta introduzida no ECMAscript 6 que pode ser usada de maneira semelhante à forma como você usaria expressões de função. Em outras palavras, muitas vezes você pode usá-los em vez de expressões como function (foo) (...) . Mas eles têm algumas diferenças importantes. Por exemplo, eles não vinculam seus próprios valores (veja a discussão abaixo).

As funções de seta fazem parte da especificação ECMAscript 6. Elas ainda não são suportadas em todos os navegadores, mas são parcial ou totalmente suportadas no Node v. 4.0+ e na maioria dos navegadores modernos em uso a partir de 2018. (Abaixo está uma lista parcial dos navegadores suportados).

Da documentação da Mozilla:

Uma expressão de função de seta (também conhecida como função de seta gorda) tem uma sintaxe mais curta que as expressões de função e vincula lexicamente o valor this (não vincula seu próprio this , argumentos , super ou new.target ). As funções de seta são sempre anônimas. Essas expressões de função são mais adequadas para funções que não sejam de método e não podem ser usadas como construtores.

Um dos recursos mais convenientes da função de seta está oculto no texto acima:

A função de seta... vincula lexicamente o valor de this (não vincula seu próprio this...)

Em termos simples, isso significa que a função de seta armazena o valor this de seu contexto e não possui seu próprio this . Uma função tradicional pode vincular esse valor por conta própria, dependendo de como ele é definido e chamado. Isso pode exigir muita ginástica, como self = this; etc. para acessar ou manipular isso de uma função dentro de outra função. Para mais informações sobre este tópico, veja explicações e exemplos na documentação do Mozilla.

Exemplo (também dos documentos):

Var a = [ "Ficamos acordados a noite toda "até o sol", "Ficamos acordados a noite toda para pegar um pouco", "Ficamos acordados a noite toda para nos divertir", "Ficamos acordados a noite toda para pegar lucky" ]; // Essas duas atribuições são equivalentes: // Old-school: var a2 = a.map(function(s)( return s.length )); // ECMAscript 6 usando funções de seta var a3 = a.map (s => s.length); // ambos a2 e a3 serão iguais a

Você pode usar funções de seta no Node, mas o suporte do navegador não é totalmente correto.

O suporte do navegador para essa funcionalidade melhorou significativamente, mas ainda não está difundido o suficiente para a maioria dos aplicativos baseados em navegador. A partir de 12 de dezembro de 2017, é compatível com as versões atuais:

• Cromo (vs. 45+)
• Firefox (vs. 22+)
• Borda (vs. 12+)
• Ópera (v. 32+)
• Navegador Android (versão 47+)
• Opera Mobile (versão 33+)
• Chrome para Android (versão 47+)
• Firefox para Android (versão 44+)
• Safári (versão 1 0+)
• iOS Safari (versão 10.2+)
• Internet Samsung (v. 5+)
• Navegador Baidu (v. 7. 12+)

Não suportado em:

• IE (antes do Art. 11)
• Opera Mini (até versão 8.0)
• Navegador Blackberry (até a versão 10)
• IE Mobile (até a versão 11)
• Navegador UC para Android (até a versão 11.4)
• QQ (até a versão 1.2)

Você pode encontrar mais informações (e mais atuais) em CanIUse.com (sem afiliação).

Isso é conhecido como função de seta, parte da especificação ECMAScript 2015...

var foo = ["a", "ab", "abc"]; var bar = foo.map(f => f.length); console.log(barra); //1,2,3

Sintaxe mais curta que a anterior:

// < ES6: var foo = ["a", "ab", "abc"]; var bar = foo.map(function(f) { return f.length; }); console.log(bar); // 1,2,3

Outra coisa incrível é lexical isso... Normalmente, você faz algo como:

function Foo() ( this.name = name; this.count = 0; this.startCounting(); ) Foo.prototype.startCounting = function() ( var self = this; setInterval(function() ( // este é o Window, não Foo (), como você poderia esperar console.log(this); // // é por isso que reatribuímos isso a self antes de setInterval() console.log(self.count++), 1000) ) new Foo();

Mas isso pode ser reescrito usando uma seta como esta:

function Foo() ( this.name = name; this.count = 0; this.startCounting(); ) Foo.prototype.startCounting = function() ( setInterval(() => ( console.log(this); // console.log(this.count); // 1, 2, 3 this.count++ ), 1000) ) new Foo();

Esta seria a "expressão de função de seta" introduzida no ECMAScript 6.

Para fins históricos (se a página wiki mudar posteriormente), isto é:

Uma expressão de função de seta tem uma sintaxe mais curta que uma expressão de função e vincula lexicamente esse valor. As funções de seta são sempre anônimas.

Também conhecidas como funções de seta gorda. Esta é uma maneira simples e clara de escrever expressões de função, como function() () .

Arrow Functions pode eliminar a necessidade de function , return e () ao definir funções. Eles são de uma linha semelhantes às expressões lambda em Java ou Python.

fila const = ["Dave", "Sarah", "Sharon"]; const nextCustomer = () => fila; console.log(nextCustomer()); // "Davi"

Se você precisar executar várias instruções na mesma função de seta, este exemplo exigirá que você coloque queue entre chaves () . Neste caso, a instrução return não pode ser omitida.

fila const = ["Dave", "Sarah", "Sharon"]; const addCustomer = nome => ( fila.push(nome); ); addCliente("Toby"); console.log(fila); // ["Dave", "Sarah", "Sharon", "Toby"]

Você pode omitir () acima.

Quando existe um único parâmetro, os parênteses () ao redor do parâmetro podem ser omitidos.

const addNumbers = (x, y) => x + y console.log(addNumbers(1, 5)); //6

Se quiséssemos obter o preço de cada fruta em um array, no ES5 poderíamos fazer:

Frutas.map(função(fruta) ( return fruta.preço; )); //

No ES6, com as novas funções de seta, podemos tornar isso mais conciso:

Frutas.map(fruta => fruta.preço); //

Mais informações sobre funções de seta podem ser encontradas.

• IE: ainda não suportado
• Borda: 12+ (todas as versões)
• Firefox: 22+
• Cromo: 45+
• Safári: 10+
• Safári iOS: 10.2+
• Navegador Android: 56+

Para obter informações mais atualizadas sobre compatibilidade do navegador, visite

Como já foi dito, esta é uma nova sintaxe para a criação de funções.

Porém, este tipo de função é diferente das habituais:

Eles vinculam o valor disso. Como explica a especificação,

ArrowFunction não define ligações locais para argumentos, super, this ou new.target. Qualquer referência a argumentos , super , this ou new.target dentro de uma ArrowFunction resolve a ligação no ambiente léxico. Normalmente, este será um ambiente funcional imediatamente uma função.

Mesmo que ArrowFunction possa conter referências a super , o objeto de função criado na etapa 4 não é transformado em um método executando MakeMethod . Uma ArrowFunction que faz referência a super está sempre contida em uma função que não seja de seta, e a implementação necessária de super é acessível por meio do escopo capturado pelo objeto de função ArrowFunction.

• Eles são não construtores.

  Isso significa que eles não possuem um método interno [] e, portanto, não podem ser instanciados, por exemplo

  Var f = a => a; f(123); // 123 novos f(); // TypeError: f não é um construtor

Adicionando um exemplo simples de CRUD com uma seta

//Função de seta var clientes = [ ( nome: "Dave", contato: "9192631770" ), ( nome: "Sarah", contato: "9192631770" ), ( nome: "Akhil", contato: "9928462656" )] , // Sem parâmetro READ getFirstCustomer = () => ( console.log(this); return clientes; ); console.log("Primeiro Cliente "+JSON.stringify(getFirstCustomer())); // "Dave" //1 Parâmetro SEARCH getNthCustomer = index=>( if(index>customers.length) ( return "Não existe tal coisa"; ) else( return clientes; ) ); console.log("O enésimo cliente é " +JSON.stringify(getNthCustomer(1))); //2params ADD addCustomer = (nome, contato)=> clientes.push(( "nome": nome, "contato":contato )); addCustomer("Hitesh","8888813275"); console.log("Cliente Adicionado "+JSON.stringify(clientes)); //2 parâmetros UPDATE updateCustomerName = (index, newName)=>(customers.name= newName); updateCustomerName(customers.length-1,"HiteshSahu"); console.log("Cliente Atualizado "+JSON.stringify(clientes)); //1 parâmetro DELETE removeCustomer = (customerToRemove) => clientes.pop(customerToRemove); removeCustomer(getFirstCustomer()); console.log("Cliente Removido "+JSON.stringify(clientes));

Como todas as outras respostas, isso faz parte da sintaxe da função ES2015. Especificamente, não é um operador, é um token que separa os parâmetros do corpo: ArrowFunction: ArrowParameters => ConciseBody . Por exemplo. (parâmetros) => ( /* corpo */ ) .

Em javascript, o símbolo => é um símbolo de expressão de função de seta. Uma expressão de função de seta não possui essa ligação própria e, portanto, não pode ser usada como uma função construtora. Por exemplo:

var palavras = "oi do objeto externo"; deixe obj = (palavras: "oi de dentro do objeto", talk1: () => (console.log(this.words)), talk2: function () (console.log(this.words)) ) obj.talk1( ); // não possui esta ligação própria, esta === janela obj.talk2(); // possui esta ligação própria, esta é obj

• Se houver apenas um argumento, você poderá omitir os parênteses do argumento.
• Se você retornar uma expressão e fizer isso na mesma linha, poderá omitir a instrução () e return

Por exemplo:

deixe vezes2 = val => val * 2; // Está na mesma linha e retorna uma expressão, portanto os () são confirmados e a expressão retorna implicitamente // também há apenas um argumento, portanto os parênteses ao redor do argumento são omitidos console.log(times2(3));

Insatisfeito com outras respostas. A resposta mais votada em 13/03/2019 está factualmente incorreta.

Uma versão curta e sucinta do que => significa é um atalho para escrever uma função e associá-la ao this atual

Const foo = a => a * 2;

Efetivamente atalho para

Const foo = function(a) ( return a * 2; ).bind(this);

Você pode ver todas as coisas que foram cortadas. Não precisamos de function , return , .bind(this) , parênteses ou parênteses

Um exemplo um pouco mais longo de uma função de seta poderia ser

Const foo = (largura, altura) => ( const area = largura * altura; return area; );

Isso mostra que se precisarmos de vários argumentos de função, precisaremos de parênteses, e se quisermos escrever mais de uma expressão, precisaremos de chaves e um return explícito.

É importante entender a parte .bind e é um grande tópico. Isso tem a ver com o que isso significa em JavaScript.

TODAS as funções possuem um parâmetro implícito chamado this . Como isso é definido ao chamar uma função depende de como a função é chamada.

aceitar

Função foo() ( console.log(this); )

Se você ligar, ok

Função foo() ( console.log(this); ) foo();

este será um objeto global.

Se você estiver no modo estrito

“usar estrito”; função foo() ( console.log(this); ) foo(); // ou função foo() ( "use strict"; console.log(this); ) foo();

Será indefinido

Você pode definir isso diretamente usando ligar ou aplicar

Função foo(msg) ( console.log(msg, this); ) const obj1 = (abc: 123) const obj2 = (def: 456) foo.call(obj1, "olá"); // imprime Olá (abc: 123) foo.apply(obj2, ["oi"]); // imprime Olá (def: 456)

Você também pode definir isso implicitamente usando o operador ponto.

Função foo(msg) ( console.log(msg, this); ) const obj = ( abc: 123, bar: foo, ) obj.bar("Hola"); // imprime Hola (abc:123, barra: f)

O problema surge quando você deseja usar uma função como retorno de chamada ou ouvinte. Você está criando uma classe e deseja atribuir uma função como retorno de chamada que acessa uma instância da classe.

Classe ShowName ( construtor(nome, elem) ( this.name = name; elem.addEventListener("click", function() ( console.log(this.name); // não funcionará )); ) )

O código acima não funcionará porque quando o elemento dispara o evento e chama a função, o valor this não será uma instância da classe.

Uma maneira comum de resolver esse problema é usar .bind

Classe ShowName (construtor(nome, elem) ( this.name = name; elem.addEventListener("clique", function() ( console.log(this.name); ).bind(this); // ( console.log (este nome);

bind efetivamente cria uma nova função. Se o bind não existisse você poderia fazer o seu próprio assim

Função bind(funcitonToBind, valueToUseForThis) ( return function(...args) ( functionToBind.call(valueToUseForThis, ...args); )

No JavaScript antigo, sem o operador spread, isso seria

Função bind(funcitonToBind, valueToUseForThis) ( return function() ( functionToBind.apply(valueToUseForThis, argumentos); )

Entender que o código requer a compreensão dos fechamentos, mas a versão curta do bind cria uma nova função que sempre chama a função original com um valor this vinculado a ela. A função de seta faz a mesma coisa, pois é um atalho para vincular (isto)

A seta de função, representada pelo símbolo (=>), ajuda a criar funções e métodos anônimos. Isso resulta em uma sintaxe mais curta. Por exemplo, abaixo está uma função Adicionar simples que retorna a adição de dois números.

Função Adicionar (num1, num2) (retornar num1 + num2;)

A função acima fica mais curta usando a sintaxe Arrow conforme mostrado abaixo.

O código acima consiste em duas partes, conforme mostrado na imagem acima:

Entrada: - Esta seção especifica os parâmetros de entrada para a função anônima.

Lógica: - Esta seção vem depois do símbolo "=>". Esta seção contém a lógica da função real.

Muitos desenvolvedores acreditam que a função de seta torna sua sintaxe mais curta, mais simples e, portanto, torna seu código legível.

Se você acredita na frase acima, garanto que é um mito. Se você pensar por um momento, uma função escrita corretamente com um nome é muito mais legível do que funções enigmáticas criadas em uma linha usando um símbolo de seta.

O principal uso da função de seta é garantir que o código seja executado no contexto dos chamadores.

Veja o código abaixo que define uma variável global "contexto", esta variável global é acessível dentro da função "SomeOtherMethod" que é chamada a partir de outro método "SomeMethod".

Este SomeMethod possui uma variável de contexto local. Agora, como SomeOtherMethod é chamado de "SomeMethod", esperamos que ele exiba o "contexto local", mas exiba o "contexto global".

Var contexto = "contexto global"; function SomeOtherMethod())( alert(this.context); ) function SomeMethod())( this.context = "contexto local"; SomeOtherMethod(); ) var instance = new SomeMethod();

Mas se você substituir a chamada por uma função de seta, o "contexto local" será exibido.

Var contexto = "contexto global"; function SomeMethod())( this.context = "contexto local"; SomeOtherMethod = () => ( alert(this.context); ) SomeOtherMethod(); ) var instance = new SomeMethod();

Sugiro que você leia este link (função Arrow em JavaScript) que explica todos os cenários de contexto javascript e em quais casos o contexto do chamador não é respeitado.

Você também pode ver a demonstração Funções de seta com javascript neste vídeo do YouTube, o que praticamente demonstra o termo Contexto.

• Tradução

Funções de seta gorda (=>), também conhecidas como funções de seta, são uma funcionalidade completamente nova no ECMAScript 2015 (anteriormente conhecido como ES6). Se os rumores forem verdadeiros, então no ECMAScript 2015 => a sintaxe começou a ser usada em vez de –> sintaxe sob a influência do CoffeeScript. Além disso, a semelhança do contexto transfere isso.

As funções de seta têm dois propósitos principais: fornecer uma sintaxe mais concisa; certifique-se de que o léxico this seja passado com o escopo pai. Vamos dar uma olhada em cada um deles!

• Perdemos a função e () porque nossas funções de retorno de chamada são escritas em uma linha.
• Removemos (). Eles agora não quebram a lista de argumentos quando apenas um argumento está presente (outros argumentos passam como exceções; por exemplo, (...args) => ...).
• Nos livramos da palavra-chave return. Ao remover (), permitimos que funções de seta de uma linha executem um retorno implícito (em outras linguagens, essas funções são frequentemente chamadas de funções lambda).

Há, no entanto, uma desvantagem significativa: ao remover () das funções de seta, como podemos retornar um objeto vazio? Por exemplo, o mesmo ()?
const vazioObject = () => (); vazioObject(); // ?
E aqui está a aparência de todo o código junto:
função () (retornar 1; ) () => (retornar 1; ) () => 1 função (a) (retornar a * 2; ) (a) => (retornar a * 2; ) (a) => a * 2 a => a * 2 função (a, b) ( return a * b; ) (a, b) => ( return a * b; ) (a, b) => a * b função () ( retornar argumentos ) (...args) => args () => () // indefinido () => (()) // ()

• Funções com instruções únicas que retornam imediatamente;
• funções que precisam trabalhar com isso com escopo pai.