As funções de seta do JavaScript podem torná-lo um desenvolvedor melhor

As funções de seta do JavaScript podem torná-lo um desenvolvedor melhor

JavaScript ES6 trouxe mudanças interessantes para o mundo do desenvolvimento web. Novas adições à linguagem JavaScript trouxeram novas possibilidades.





Uma das mudanças mais populares foi a adição de funções de seta ao JavaScript. As funções de seta são uma nova maneira de escrever expressões de função JavaScript, oferecendo duas maneiras diferentes de criar funções em seu aplicativo.



As funções de seta precisam de um pouco de ajuste se você for um especialista em funções JavaScript tradicionais. Vamos dar uma olhada no que são, como funcionam e como beneficiam você.





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

As funções de seta são uma nova maneira de escrever expressões de função que foram incluído no lançamento do JavaScript ES6 . Eles são semelhantes às expressões de função JavaScript que você está usando, com algumas regras ligeiramente diferentes.

As funções de seta são sempre funções anônimas, têm regras diferentes para



this

, e têm uma sintaxe mais simples do que as funções tradicionais.

como tornar o fundo de uma imagem transparente

Essas funções usam um novo token de seta:



=>

Se você já trabalhou em Python, essas funções são muito semelhantes a Expressões Lambda Python .

A sintaxe para essas funções é um pouco mais limpa do que as funções normais. Existem algumas novas regras para se manter em mente:



  • A palavra-chave da função foi removida
  • A palavra-chave return é opcional
  • Cintas encaracoladas são opcionais

Há uma série de pequenas mudanças a serem examinadas, então vamos começar com uma comparação básica de expressões de função.

Como usar as funções de seta

As funções de seta são fáceis de usar. Compreender as funções das setas é mais fácil quando comparado lado a lado com as expressões de função tradicionais.

Aqui está uma expressão de função que adiciona dois números; primeiro usando o método de função tradicional:

let addnum = function(num1,num2){
return num1 + num2;
};
addnum(1,2);
>>3

É uma função bastante simples que recebe dois argumentos e retorna a soma.

Aqui está a expressão alterada para uma função de seta:

let addnum = (num1,num2) => { return num1 + num2;};
addnum(1,2);
>>3

A sintaxe da função é bastante diferente usando uma função de seta. A palavra-chave da função é removida; o token de seta permite que o JavaScript saiba que você está escrevendo uma função.

As chaves e a palavra-chave return ainda estão lá. Estes são opcionais com funções de seta. Aqui está um exemplo ainda mais simples da mesma função:

let addnum = (num1,num2) => num1 + num2;

A palavra-chave return e as chaves já se foram. O que resta é uma função de uma linha muito limpa que é quase metade do código da função original. Você obtém o mesmo resultado com muito menos código escrito.

Há mais funções de seta. vamos mergulhar mais fundo para que você tenha uma ideia melhor do que eles podem fazer.

Recursos da função de seta

As funções de seta têm muitos usos e recursos diferentes incluídos.

como jogar youtube no echo show

Funções regulares

As funções de seta podem usar um ou mais argumentos. Se você estiver usando dois ou mais argumentos, deve colocá-los entre parênteses. Se você tiver apenas um argumento, não precisará usar parênteses.

let square = x => x * x
square(2);
>>4

As funções de seta podem ser usadas sem argumentos. Se não estiver usando nenhum argumento em sua função, você deve usar parênteses vazios.

let helloFunction = () => Console.log('Hello reader!');
helloFunction();
>>Hello reader!

Funções simples como essas usam muito menos código. Imagine como é muito mais fácil um complexo projeto como uma apresentação de slides em JavaScript torna-se quando você tem uma maneira mais simples de escrever funções.

Usando isto

O conceito de

this

tende a ser a parte mais complicada do uso de JavaScript. As funções de seta fazem

this

mais fácil de usar.

Quando você usa funções de seta

this

será definido pela função envolvente. Isso pode criar problemas que surgem quando você cria funções aninhadas e precisa

this

para aplicar à sua função principal

Aqui está um exemplo popular que mostra a solução alternativa que você deve usar com funções regulares.

function Person() {
var that = this; //You have to assign 'this' to a new variable
that.age = 0;
setInterval(function growUp() {
that.age++;
}, 1000);
}

Atribuindo o valor de

this

a uma variável torna legível quando você chama uma função dentro de sua função principal. Isso é confuso, aqui está a melhor maneira de fazer isso usando as funções de seta.

function Person(){
this.age = 0;
setInterval(() => {
this.age++; // Now you can use 'this' without a new variable declared
}, 1000);
}

Embora sejam ótimos para funções, eles não devem ser usados ​​para criar métodos dentro de um objeto. As funções de seta não usam o escopo correto para

this

.

Aqui está um objeto simples que cria um método interno usando uma função de seta. O método deve reduzir o coberturas variável por um quando chamado. Em vez disso, não funciona de todo.

como instalar homebrew no Wii sem cartão SD
let pizza = {
toppings: 5,
removeToppings: () => {
this.toppings--;
}
}
//A pizza object with 5 toppings
>pizza
>>{toppings: 5, removeToppings: f}
pizza.removeToppings(); //The method will not do anything to the object
>pizza
>>{toppings: 5, removeToppings: f} //Still has 5 toppings

Trabalhando com matrizes

Usando funções de seta, você pode simplificar o código usado para trabalhar com métodos de array. Matrizes e métodos de array são partes muito importantes do JavaScript então você vai usá-los muito.

Existem alguns métodos úteis como o mapa método que executa uma função em todos os elementos de uma matriz e retorna a nova matriz.

let myArray = [1,2,3,4];
myArray.map(function(element){
return element + 1;
});
>> [2,3,4,5]

Esta é uma função bastante simples que adiciona um a cada valor no array. Você pode escrever a mesma função com menos código usando uma função de seta.

let myArray = [1,2,3,4];
myArray.map(element => {
return element + 1;
});
>> [2,3,4,5]

É muito mais fácil de ler agora.

Criação de literais de objeto

As funções de seta podem ser usadas para criar literais de objeto em JavaScript. Funções regulares podem criá-los, mas são um pouco mais longos.

let createObject = function createName(first,last) {
return {
first: first,
last: last
};
};

Você pode fazer o mesmo objeto com uma função de seta usando menos código. Usando a notação de seta, você precisará envolver o corpo da função entre parênteses. Aqui está a sintaxe aprimorada com funções de seta.

let createArrowObject = (first,last) => ({first:first, last:last});

Funções de seta do JavaScript e além

Agora você conhece algumas maneiras diferentes pelas quais as funções de seta do JavaScript facilitam sua vida como desenvolvedor. Eles encurtam a sintaxe, fornecem mais controle usando

this

, torna os objetos mais fáceis de criar e oferece uma nova maneira de trabalhar com métodos de array.

A introdução das funções de seta, junto com muitos outros recursos, no JavaScript ES6 mostra o quão importante o JavaScript se tornou no desenvolvimento da web. Há muito mais que você pode fazer.

Quer aprender mais sobre JavaScript? Aprenda essas estruturas de JavaScript. Além disso, nosso Folha de dicas de JavaScript fornece informações valiosas e aprender mais sobre como funciona o JavaScript pode torná-lo um desenvolvedor melhor.

Compartilhado Compartilhado Tweet O email 6 alternativas audíveis: os melhores aplicativos de audiolivros gratuitos ou baratos

Se você não gosta de pagar por audiolivros, aqui estão alguns aplicativos excelentes que permitem ouvi-los gratuitamente e legalmente.

Leia a seguir Tópicos relacionados
  • Programação
  • JavaScript
Sobre o autor Anthony Grant(40 artigos publicados)

Anthony Grant é um escritor freelance cobrindo Programação e Software. Ele é formado em Ciência da Computação e se interessa por programação, Excel, software e tecnologia.

Mais de Anthony Grant

Assine a nossa newsletter

Junte-se ao nosso boletim informativo para dicas de tecnologia, análises, e-books grátis e ofertas exclusivas!

Clique aqui para se inscrever