Olá, neste artigo apresento alguns dos conceitos fundamentais para o JavaScript moderno: programação funcional. Bons estudos!
Prof. Diego Mariano
Variáveis em JavaScript
Em computação, uma variável é um nome associado a um espaço na memória utilizado para armazenar dados durante o desenvolvimento de software.
Para declarar uma variável podemos usar uma palavra-chave de declaração seguido do nome. Em JavaScript variáveis são case-sensitive, isto é, nomes escritos em letras maiúsculas são diferentes dos correspondentes em letras minúsculas. Nomes de variáveis devem iniciar preferencialmente com uma letra, ou com um dos símbolos: “_” ou “$”. Após a primeira letra, pode-se utilizar números ou ainda quaisquer caracteres Unicode (sim, podemos usar acentos e cedilha para nomear variáveis JavaScript, apesar de que recomendamos o uso de caracteres ASCII, o que inclui letras, números e “_” sublinhado).
Note que podemos declarar uma variável simplesmente escrevendo seu nome e atribuindo um valor a ela:
x = 10;
Essa forma cria uma variável global, o que não é recomendado (https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Guide/Grammar_and_Types). A melhor forma de armazenar dados na memória é usando uma das palavras-chave de declaração.
let, const, var
Há três formas de declaração no JavaScript: var, let e const.
- var: declara uma variável global;
var x = 10;
- let: declara uma variável de escopo;
let x = 10;
- const: declara uma constante (ou seja, somente leitura).
const x = 10;
Observe a diferença entre var e let:
var |
let |
![]() |
![]() |
Nesse exemplo, o valor de x é alterado duas vezes. Note que na declaração feita com let, o valor de x só é válido dentro do bloco (if), enquanto o valor de x declarado com var é global.
Note que se alterarmos o valor de x sem indicar a palavra de declaração, estamos alterando a variável global. Veja:
var |
let |
![]() |
![]() |
Agora, veja o que acontece se declararmos uma const:

Tipos de dados
Há sete tipos de dados em ECMAScript:
# |
Tipo |
Descrição |
Exemplo |
1 |
Boolean |
Verdadeiro (true) ou falso (false) |
let x = true; |
2 |
null |
Variável nula (deve ser escrito em minúsculo) |
let x = null; |
3 |
undefined |
Variável indefinida |
let x = undefined; |
4 |
Number |
Variável numérica. Pode ser inteira ou de ponto flutuante. |
let x = 3.14; |
5 |
String |
Textos. Pode ser declarada com aspas ou apóstrofos. |
let x = “Olá mundo!”; |
6 |
Symbol |
Usados internamente como chaves de propriedades de objetos. Não se pode fazer operações com o tipo Symbol. |
let x = Symbol(); |
7 |
Object |
Objetos são estruturas de dados usadas para criar o equivalente em outras linguagens a listas, arrays, dicionários, arrays associativos, dentre outros. |
let x = { “b”:”bola”, “c”:”casa” } |
Objetos são um tipo de dados especiais, portanto, se difere dos outros tipos primitivos. Podemos acessar cada elemento chamando o nome do objeto seguido da posição desejada dentro de colchetes.

Observe como criamos um objeto do tipo array e acessamos cada posição. Arrays são variáveis que armazenam dados sequenciais e os indexa com base na posição da lista (a contagem começa com zero).

Funções
Funções são blocos de códigos que realizam procedimentos podendo retornar valores e que são executados apenas quando chamados.
Declarando uma função
Podemos declarar uma função utilizando a palavra-chave function seguido de um nome e parênteses. Observe uma função simples que apenas exibe uma mensagem no console.

Note que ao executar esse código, nada acontecerá, uma vez que códigos em uma função só são executados quando a função for chamada. Podemos chamar a função declarando seu nome seguido de parênteses:

Note que a chamada da função deve ser feita após a declaração.
Passando parâmetros de parâmetros
Funções podem receber valores como entrada.

Código-fonte
// declaração
function saudacao(nome){
console.log(“Olá, “+nome+”!”);
}
// chamada
saudacao(“José”);
Note que podemos chamar uma função, quantas vezes acharmos necessário:

Return
Podemos ainda retornar valores no final de uma função utilizando a palavra-chave return.

Função anônima
Uma função anônima é simplesmente uma função sem nome. A seguir declaramos uma função anônima que retorna a soma de três números:
(function (a, b, c){ return a + b + c; });
Note que o código acima não será executado. Para isso, precisamos executar a função imediatamente após a sua declaração ou podemos atribuir a expressão a uma variável. Veremos isso a seguir.
IIFE (Immediately Invoked Function Expression)
Podemos executar uma função anônima imediatamente após sua declaração aplicando os valores de entrada entre parênteses logo a seguir. Por exemplo:

Isso é denominado como Immediately Invoked Function Expression (IIFE), que poderia ser traduzido como expressão de função invocada imediatamente. Note que a função anônima aqui é chamada de function express.
Function expression
Uma expressão de função (function expression) se difere de uma declaração de função tradicional na forma a qual declaramos um nome.
Códigos com um mesmo objetivo construídos com base em funções declaradas tradicionalmente (function declaration) e expressões de funções (function expression) |
function declaration |
![]() |
function expression |
![]() |
No exemplo a seguir, vamos utilizar uma function expression para construir uma função de soma:

Note que podemos fazer uma cópia de uma function expression apenas atribuindo-a a outra variável. Observe:

Existem formas mais reduzidas de escrever funções. Um exemplo disso são as chamadas arrow functions.
Arrow functions
Arrow functions, ou na tradução para o português “funções de seta”, são um tipo de sintaxe utilizada para escrever funções de forma mais condensada. Observe a sintaxe do uso de uma arrow function:
variável = (parâmetros) => { /* … */ };
Observe um exemplo a seguir:
Códigos com um mesmo objetivo construídos com base expressões de funções tradicionais e em funções de seta (arrow functions). |
function expression |
![]() |
arrow function |
![]() |
Note que a sintaxe da arrow funcions é um mais simples do que uma function expression tradicional. Além disso, podemos simplificar ainda mais esse código. Por exemplo, quando temos um único parâmetro, não precisamos declarar parênteses:

Podemos chamar essa função, executando x(valor).
No exemplo acima, a função armazenada em “x” é similar ao código incrementa apresentado anteriormente. Mas podemos simplificar mais ainda. Se o código possuir apenas uma linha de código, não precisamos incluir as chaves { }. Além disso, se a função em questão apenas retornar um determinado valor, a palavra-chave se torna desnecessária. Assim, o código a seguir faz as mesmas coisas que os códigos anteriores:

Note como as funções x e y obtém resultados idênticos:

Agora, vamos usar o que aprendemos para criar uma função de soma simples:

Função invocada
Agora vamos combinar as habilidades que aprendemos anteriormente. O código a seguir, declara uma função anônima que é invocada imediatamente:

Vamos entender parte por parte desse código:
Código | Descrição |
( |
o primeiro “(“ indica um escopo geral. |
( ) |
// () indica que nenhuma variável está sendo passada para a função anônima |
=> |
Indica que se trata de uma arrow function. |
console.log(‘invocando uma função) |
Comando principal. |
) |
Fechamento do “)” inicial. |
( ); |
Executa a função imediatamente. |
O uso arrow functions e invocação imediata de funções reduz a verbosidade da linguagem, mas pode levar a erros. Portanto, tenha cuidado para não se perder no meio de tantos parênteses.
Operador spread (…valores)
Podemos criar uma função que recebe três parâmetros e os imprime na tela da seguinte forma:

Note que JavaScript não irá gerar erros se chamarmos essa função passando parâmetros a mais:

Entretanto, se passarmos parâmetros a menos, eles receberão o valor undefined:

Note que podemos atribuir um valor padrão, que será aplicado apenas se o valor não for atribuído na chamada da função.

Caso atribua um valor a aquela posição, o valor padrão será substituído.

Agora, observe o exemplo a seguir:

Esse código irá imprimir os valores de 1 a 6. Com base no que vimos acima, se eu adicionasse um sétimo número, ele não seria exibido pela função.
Podemos resolver esse problema usando o operador spread/rest antes do nome do array. O operador spread/rest é declarado com três pontos seguidos “…”:
Agora vamos reproduzi-lo usando o operador spread/rest

Veja um exemplo prático. O código a seguir, recebe uma lista de números e imprime o quadrado dele:

Execício
Construa uma função que reproduza os efeitos da função range(). Ela deve receber até 3 parâmetros: (1) valor de início; (2) valor final; e (3) passo.
Faça os seguintes testes e verifique se os resultados são idênticos aos apresentados a seguir:
- range(5) -> [1, 2, 3, 4, 5]
- range (6, 11) -> [6, 7, 8, 9, 10, 11]
- range(10, 19, 2) -> [10,12,14,16,18]
- range(6, 2) -> [6, 5, 4, 3, 2]
- range(8, -3, 4) -> [8, 4, 0]
Resposta:

const exercicio = ((inicio, fim = 0, passo = 1) => {
r = [];
if(fim==0){
for(let i of Array(inicio).keys()){
r.push(i+passo)
}
}
else if(fim > inicio){
for(let i=inicio; i <= fim; i+=passo){
r.push(i)
}
}
else if(fim < inicio){
for(let i=inicio; i >= fim; i-=passo){
r.push(i)
}
}
return r;
});
Agora, vejamos os testes:

First-class function
First-class function, ou na tradução “função de primeira classe”, é uma característica de linguagens de programação que permitem que funções possam ser tratadas como uma variável (https://developer.mozilla.org/pt-BR/docs/Glossary/First-class_Function).
Já vimos isso anteriormente quando falamos de function expression. Entretanto, ainda não demos a devida atenção a um importante uso dessa característica: a possibilidade de passar uma função como parâmetro de outra função.


Agora, observe o que acontece quando executamos a função saudacao():

Neste caso, a função saudacao() faz uma chamada à função mensagem(). Note que neste caso estamos lidando com strings, entretanto, podemos ir mais além e retornar outras funções. Chamamos isso de funções de mais alta ordem.
Saiba mais Podemos usar os conhecimentos que adquirimos nos blocos anteriores para criar funções que realizam a soma, subtração, divisão e multiplicação de diferentes formas. Observe: const add = (a, b) => { return a+b } const subt = (a, b) => a-b const mult = function(a, b){ return a * b } const divi = (a, b) => a/b Agora observe como podemos usar essas funções atribuídas a variáveis: ![]() ![]() |
Higher-order function
Um outro conceito diretamente relacionado às funções de primeira classe são as funções de mais alta ordem (higher-order function). Higher-order functions são como são denominadas as funções que retornam uma outra função.
No exemplo apresentado a seguir, a função saudacao() será alterada para retornar uma outra função:

Aqui, vemos que nossa função retorna um objeto de uma função. Para que ele apenas imprima a mensagem, podemos usar dois parênteses:

Objetos em JavaScript
Em JavaScript, retirando os tipos de dados primitivos, como null e undefined, tudo é um objeto[1]. Mesmo dados primitivos como strings e números podem ser manipulados como se fosse objetos: JavaScript cria um wrapper que os transforma em objetos[2].
Objetos possuem propriedades e métodos. Informalmente, propriedades podem ser definidas de forma similar a variáveis que recebem valores, enquanto métodos são funções que desempenham ações específicas para aquele tipo de objeto. Observe como podemos acessar um objeto:
- objeto.propriedade
- objeto.método( )
onde objeto é o nome da variável escolhida para armazenar os dados desse objeto em questão, a propriedade é um nome específico que armazena um valor (que pode ser string, número ou até mesmo outros objetos) e método( ) corresponde a uma função que aplica alterações no objeto em questão.
Objetos literais do JavaScript podem ser declarados por meio de uma coleção de chaves e valores separados por dois-pontos e são declarados usando chaves { }. Para acessar determinada chave, apenas indicamos o nome da variável que recebe o objeto, seguida de colchetes e da chave usada. Veja um exemplo:

Podemos também acessar um objeto usando o símbolo “.” seguido da chave que se deseja acessar:

Para criar uma nova propriedade, basta apenas atribuir um novo valor ao nome escolhido:

Arrays em JavaScript
Em JavaScript, arrays (ou listas) são considerados um tipo de objeto. Podemos criar objetos do tipo array usando valores separados por vírgulas dentro de colchetes [ ]. Cada elemento de um array pode ser acessado por sua posição de inserção (note que a contagem começa em zero). Por exemplo:

Note que não podemos acessar determinado valor de um objeto usando o operador “.”:

Essa notação é válida apenas para objetos que possuem propriedades vinculadas aos valores. Arrays utilizam um índice numérico para indicar a posição de cada item.
Podemos ainda iterar por um array usando o método forEach(), que recebe como parâmetro uma função com dois argumentos: (1) item correspondente e (2) posição no índice. Veja um exemplo:


Note que forEach é um método de um objeto. Portanto, sua chamada é feita separada por ponto, seguido do nome do método e de parênteses.
Para adicionar dados a um array use o método push( ), que irá retornar a posição da inserção:

Remova o último item com pop( ):

Você pode realizar buscas por determinados valores usando o método indexOf( ):

Funções de arrays
Podemos manipular arrays de forma mais funcional usando as funções map, reduce e filter.
map() – para cada item do array, aplique uma função
- A função map( ) mapeia cada item de um array a uma determinada função.
- Retona um array de mesmo tamanho com valores transformados pela função.
- Sintaxe: objeto.map(função, índice)
Por exemplo, vamos criar uma função que normalize notas de estudantes:

Agora vamos pegar todas as notas:

Podemos verificar qual a maior nota rodando:

Agora normalizamos as notas usando:

Neste exemplo, usamos map( ) para aplicar uma função que normaliza os dados. Veja que para esse exemplo, optamos por não utilizar o índice (apenas um argumento foi passado para a função map).
Podemos ver todas as notas executando:

Uma forma mais simples de se fazer isso seria separando a função que normaliza aplicando-a a uma variável, seguido do mapeamento delas.

Note que usamos map( ) duas vezes: na primeira coletamos apenas as notas do objeto estudantes e em seguida aplicamos a função normaliza para cada nota obtida.
Perceba que podemos até mesmo aplicar map( ) em outras funções que definimos anteriormente como por exemplo, o código que calcula a maior nota, que era feito assim:

Pode ser refatorado usando uma única linha:

reduce() – reduz valores de um array para um único valor
- A função reduce( ) reduz os itens de um array com base em uma função.
- Retona um único valor.
- Sintaxe: objeto.reduce(função)
Digamos que desejemos calcular a nota média da turma.

Bom, agora nosso código ficou um pouco mais complicado. Vamos analisá-lo parte a parte:
Perceba que criamos uma function expression para receber o somatório de valores. Essa função recebe dois parâmetros e retorna a soma deles. Usaremos essa função na entrada da função reduce.
A seguir criamos uma variável chamada média. A média é a soma dos valores dividido pela quantidade de valores. Então, precisamos primeiro pegar os valores correspondentes. Fazemos isso quando usamos o comando:
estudantes.map(i=>nota)
A seguir, aplicamos a função reduce que recebe como entrada a função somatorio( ):
.reduce(somatorio)
Note que reduce pegará cada valor do array, aplicará um processamento e fará uma chamada recursiva até que todos os valores tenham sido analisados. No caso, fará o somatório de todos os valores presentes no array. Por fim, precisamos dividir pela quantidade de alunos presentes na lista. Podemos fazer isso usando:
/ estudantes.length
Desta forma, conseguimos usar reduce( ) para calcular a média.
filter() –filtra os dados de um array
- A função filter( ) filtra os itens de um array com base em uma função.
- Retona um array de tamanho <= ao tamanho do array original.
- Sintaxe: objeto.filter(função)
Digamos que desejemos obter apenas a lista de alunos que obtiveram nota superior a 6. Podemos fazer isso usando a função filter().
Vamos começar criando uma função que verifica se o aluno tirou nota maior que 6. Se sim, retorne todo o item:

Agora vamos aplicar o método filter( ) à lista de alunos passando como argumento a função aprovado. Observe que apenas dois alunos foram aprovados.

Mas lembre-se que havíamos definido anteriormente que as notas seriam normalizadas. Logo, a maior nota da sala, que foi 7.5, passaria a valer 10. Normalizamos anteriormente, mas não salvamos os dados no objeto estudantes. Vamos calcular as notas normalizadas e salvar em uma variável chamada novas_notas.

Vamos então salvar usando a função map( ) e o índice de cada valor.

Agora podemos ver quem foram os aprovados usando a função filter:

Os quatro estudantes foram aprovados – e o dia foi salvo graças à função filter( ) haha!
Quer aprender mais sobre Desenvolvimento Web?
Dá uma olhada nesses cursos disponíveis a partir de R$ 27,90 (e ainda dar uma moral para ajudar esse pobre professor a pagar seus boletos) 😉
4 respostas em “JavaScript funcional”
[…] vamos combinar as habilidades que aprendemos anteriormente. O código a seguir, declara uma função anônima que é invocada […]
[…] usar os conhecimentos que adquirimos nos blocos anteriores para criar funções que realizam a soma, subtração, divisão e multiplicação de diferentes […]
[…] Assista ao vídeo corresponde a cada aula disponível. Por fim, responda à lista de exercícios e avance para o próximo módulo. Material de estudos complementar: artigo “JavaScript funcional”, disponível em https://diegomariano.com/javascript-funcional/. […]
[…] Assista ao vídeo corresponde a cada aula disponível. Por fim, responda à lista de exercícios e avance para o próximo módulo. Material de estudos complementar: artigo “JavaScript funcional”, disponível em https://diegomariano.com/javascript-funcional/. […]