segunda-feira, 4 de abril de 2022

☕💣 OPERADOR, O SINAL => ACABOU DE INVADIR O DATA CENTER! Arrow Functions: A Revolução das Funções Modernas Explicada para Quem Vem do COBOL Mainframe

Bellacosa Mainframe

☕💣 OPERADOR, O SINAL `=>` ACABOU DE INVADIR O DATA CENTER!

Arrow Functions: A Revolução das Funções Modernas Explicada para Quem Vem do COBOL Mainframe

Se você programa COBOL há anos, provavelmente está acostumado com estruturas como:

PERFORM CALCULA-IMPOSTO.

CALL "PROGRAMA1" USING WS-DADOS.

Quando entra no mundo JavaScript moderno, uma das primeiras coisas que aparecem é um símbolo aparentemente estranho:

() => {}

Essa construção é chamada de Arrow Function (Função Seta).

À primeira vista parece criptografia de hacker.

Mas, na prática, ela representa apenas uma forma mais moderna e compacta de escrever funções.

Um Pouco de História

As Arrow Functions foram introduzidas em:

ECMAScript 6 (ES6) - 2015

O ECMAScript é a especificação oficial do JavaScript.

A proposta foi desenvolvida por diversos membros do comitê TC39, responsável pela evolução da linguagem JavaScript.

A inspiração veio principalmente de linguagens funcionais como:

Haskell
Scala
CoffeeScript
C#
Java 8 (Lambdas)

O objetivo era:

Escrever menos código
Tornar funções mais legíveis
Resolver problemas com o contexto do this

Como Era Antes

Função tradicional:

function soma(a, b) {
   return a + b;
}

Uso:

console.log(soma(10,5));

Resultado:

A Mesma Coisa com Arrow Function

const soma = (a, b) => {
   return a + b;
};

Resultado:

Mesma lógica.

Sintaxe diferente.

Traduzindo para a Cabeça de um Coboleiro

Imagine:

CALCULA-SOMA.
    COMPUTE WS-RESULTADO = WS-A + WS-B.

Arrow Function:

(a,b) => a+b

É como se fosse:

ENTRADA -> PROCESSAMENTO

O símbolo:

=>

significa aproximadamente:

"transforma isso em"

"recebe isto e executa aquilo"

Anatomia da Arrow Function

Exemplo:

const dobro = (numero) => {
   return numero * 2;
};

Partes:

(numero)

Parâmetro de entrada.

=>

Arrow.

{
   return numero * 2;
}

Bloco executado.

Forma Super Compacta

Quando existe apenas um retorno:

const dobro = numero => numero * 2;

Equivale a:

const dobro = function(numero){
   return numero * 2;
}

Comparação Lado a Lado

Tradicional

function quadrado(x){
   return x*x;
}

Arrow

const quadrado = x => x*x;

Exemplo Prático de Mainframe

Imagine um arquivo contendo salários.

COBOL:

PERFORM VARYING I FROM 1 BY 1
   UNTIL I > TOTAL-REGISTROS

   COMPUTE WS-NOVO-SALARIO =
           WS-SALARIO(I) * 1.10

END-PERFORM

JavaScript:

salarios.map(salario => salario * 1.10);

Observe:

salario => salario * 1.10

é uma Arrow Function.

O Que é map()?

O método percorre uma lista.

Para cada elemento executa a função.

Visualmente:

1000
2000
3000

Passa por:

salario => salario * 1.10

Resultado:

1100
2200
3300

Por Que Virou Tão Popular?

Antes:

numeros.forEach(function(numero){
   console.log(numero);
});

Depois:

numeros.forEach(numero => console.log(numero));

Menos código.

Mais legibilidade.

O Grande Problema Que Ela Resolve

No JavaScript existe algo chamado:

this

Ele gera muita confusão.

Exemplo antigo:

function Pessoa() {

   this.nome = "Bellacosa";

   setTimeout(function() {

      console.log(this.nome);

   },1000);

}

Resultado:

undefined

Porque o this muda de contexto.

Com Arrow Function

function Pessoa() {

   this.nome = "Bellacosa";

   setTimeout(() => {

      console.log(this.nome);

   },1000);

}

Resultado:

Bellacosa

A Arrow Function herda o contexto externo.

Isso eliminou milhares de bugs.

Vantagens

1. Menos Código

Antes:

function(x){
   return x*2;
}

Depois:

x => x*2

2. Melhor Leitura

Especialmente em:

filter()
map()
reduce()
forEach()

3. Resolve Problemas de this

Grande vantagem.

4. Ideal para Programação Funcional

Muito usada em:

React
Angular
Vue
Node.js

Desvantagens

Não Possui Próprio this

Às vezes isso é ruim.

const pessoa = {
   nome: "João",
   falar: () => {
      console.log(this.nome);
   }
}

Pode não funcionar como esperado.

Não Pode Ser Usada Como Construtor

Isto funciona:

function Pessoa(){}
new Pessoa();

Isto não:

const Pessoa = () => {};
new Pessoa();

Erro.

Menos Clara em Funções Grandes

Isto:

const calcula = () => {
   ...
   ...
   ...
   ...
}

Às vezes fica menos legível que uma função tradicional.

Linguagens que Possuem Conceito Semelhante

Java

x -> x * 2

C#

x => x * 2

Kotlin

{ x -> x * 2 }

Scala

x => x * 2

Python

lambda x: x * 2

Ruby

->(x) { x * 2 }

Como Ler uma Arrow Function

Quando encontrar:

(cliente) => cliente.nome

Leia mentalmente:

Receba cliente
Retorne cliente.nome

Outro exemplo:

(a,b) => a+b

Leia:

Receba A e B
Retorne A+B

Como Construir Uma

Passo 1

Escreva a função tradicional.

function multiplica(a,b){
   return a*b;
}

Passo 2

Remova a palavra function.

(a,b){
   return a*b;
}

Passo 3

Adicione a seta.

(a,b) => {
   return a*b;
}

Passo 4

Se houver apenas um retorno:

(a,b) => a*b

Pronto.

Truque Para Coboleiros

Sempre pense:

ENTRADA => SAÍDA

Exemplos:

x => x*2

"Recebe X e devolve o dobro."

nome => nome.toUpperCase()

"Recebe nome e devolve maiúsculo."

cliente => cliente.saldo

"Recebe cliente e devolve saldo."

Regra de Ouro

Se você enxergar:

=>

Pergunte:

O que entra?

Está à esquerda.

(cliente)

O que sai?

Está à direita.

cliente.nome

Então:

(cliente) => cliente.nome

significa:

ENTRA CLIENTE
SAI O NOME

Exatamente como uma pequena rotina COBOL que recebe um registro e devolve um campo.

Resumo Bellacosa Mainframe

Se fosse explicar Arrow Function para um operador ou programador COBOL em uma única frase:

Arrow Function é uma forma moderna, compacta e mais inteligente de escrever rotinas pequenas em JavaScript, funcionando como um "PERFORM inline" que recebe dados à esquerda da seta e devolve um resultado à direita.

Quando você começar a estudar React, Node.js, APIs REST, automações em N8N ou agentes de IA em JavaScript, verá Arrow Functions em praticamente todo lugar. Entender => é equivalente a aprender PERFORM, CALL e SECTION nos primeiros dias de COBOL: é um dos fundamentos da linguagem moderna.

Translate

segunda-feira, 4 de abril de 2022