 |
| 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.
ou
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:
15
A Mesma Coisa com Arrow Function
const soma = (a, b) => {
return a + b;
};
Resultado:
15
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"
ou
"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.
