DEV Community: deMenezes

Domine loops em Javascript: como iterar sobre qualquer array e array-like

deMenezes — Sun, 02 Mar 2025 12:15:06 +0000

Ao trabalhar com JavaScript, é importante saber iterar sobre array e array-like. Neste artigo, você aprenderá a dominar loops e iterações.

Shortcut: para iterar sobre qualquer lista em Javascript, use o for...of. Pode usar ainda o forEach em Nodelist, array e DOMTokenList.

Aqui estão as principais opções:

for...of
for...in
forEach
map
filter
find
every
some
reduce

Ah e também precisa de mais uma coisa: saber quando usar cada um deles 😅.

Pode parecer muita coisa, mas com a prática, você entende. E sempre pode voltar aqui para ver como usá-los.

Eu já escrevi um post para explicar cada um dos últimos 7 itens da lista:

Ao final deste artigo, você será capaz de iterar sobre qualquer tipo de lista em JavaScript.

E para começar, uma pergunta:

Por que escrevi "lista" no título do post?

Primeiro porque o blog é meu 😝.

E segundo porque array não é o único de tipo de lista no Javascript.

Existem outros tipos como:

HTMLCollection: lista de elementos HTML retornada pelos métodos document.getElementsByClassName() e document.getElementsByTagName()
Nodelist: representa os filhos de um elemento (element.childNodes) ou o retorno do método document.querySelectorAll()
DOMTokenlist: é a lista de classes de um elemento HTML, você obtém ela com element.classList
NamedNodeMap: é a lista de atributos de um elemento HTML, você obtém ela com element.attributes

Essas listas são chamadas de array-like. Lembra da propaganda "é tipo Net"? Então, array-like é tipo array, mas não é array. Se você rodar Array.isArray() nelas, verá que o resultado será false.

Todas elas (inclusive arrays) têm a propriedade .length, para descobrir a quantidade de itens. Já expliquei em mais detalhes a diferença entre cada tipo de lista.

Mas aqui o foco é como iterar por elas.

Como iterar sobre qualquer lista em Javascript

O todo poderoso `for...of`

Apelidei ele carinhosamente de farofa.

Com ele, você pode iterar sobre qualquer iterável.

Veja um exemplo com array:

const bolhaDev = ['não', 'pode', 'usar', 'else'];

for (const palavra of bolhaDev) {
  console.log(palavra);
}

// não
// pode
// usar
// else

A variável palavra muda a cada iteração do loop, e passa a ser o próximo item da lista. Você pode chamá-la como quiser e como fizer mais sentido. É uma boa prática usar const antes da variável do loop para evitar que ela seja alterada ali dentro.

O mesmo vale para HTML Collection e Nodelist:

const divs = document.getElementsByTagName('div');
// ou...
const divs = document.querySelector('div');

for (const div of divs) {
  console.log(div);
}

// todas as divs do site serão jogadas no console uma a uma

Você fez seu dever de casa e leu os posts anteriores, certo? Então sabe que DOMTokenList é um tipo de lista que armazena as classes de um elemento HTML:

const main = document.querySelector('main');
const classes = main.classList;

for (const className of classes) {
  console.log(className);
}

No código acima eu peguei todas as classes da tag <main> e iterei sobre elas.

E funciona igual no NamedNodeMap, um array-like que armazena os atributos de um elemento:

const main = document.querySelector('main');

for (const attribute of main.attributes) {
  console.log(attribute);
}

E por fim, você também pode iterar sobre uma string:

const myString = 'Pisei no trem'

for (const letra of myString) {
  console.log(letra)
}

// P
// i
// s
// e
// i
// 
// n
// o
// 
// t
// r
// e
// m

Existem outros iteráveis que você pode usar com o for...of como Map, Set e arguments, mas não vou abordar eles por enquanto.

Dessa forma você consegue iterar sobre qualquer iterável em Javascript.

Existe outro comando para percorrer listas, mas você não pode usá-lo em qualquer uma.

O seletivo `forEach`

O forEach é seletivo, estilo aquele amigo que não come qualquer sabor de pizza.

Isso porque ele não está disponível em todos os iteráveis. Você só vai encontrá-lo em:

Nodelist (onde mais uso ele)
Array
DOMTokenList

Eu uso o forEach no Nodelist principalmente para alterar elementos da DOM com o querySelectorAll. Por exemplo, adicionar uma classe em todas as divs:

const divs = document.querySelectorAll('div');

divs.forEach(function(div) {
  div.classList.add('wrapper')
});

Você já percebeu que com o for...of é possível iterar por todas as listas, e com o forEach por quase todas. Mas quando se fala de array, existem opções adicionais.

Arrays: flexibilidade total

Array é uma maravilha.

Na minha humilde opinião, do alto da minha ignorância, é o melhor tipo de lista. Isso porque você pode iterar por ela da forma que quiser, com qualquer método, e tudo funciona.

const bolhaDev = ['não', 'pode', 'usar', 'else'];

bolhaDev.forEach(palavra => console.log(palavra));
bolhaDev.map(palavra => palavra.at(0));
bolhaDev.filter(palavra => palavra.length > 3);
bolhaDev.find(palavra => palavra === 'else');
bolhaDev.every(palavra => palavra.length === 4);
bolhaDev.some(palavra => palavra.length === 3);
bolhaDev.reduce((acc, cur) => acc + cur.length, 0);

Além, é claro, do for...of.

Isso torna a array mais flexível a qualquer situação de uso. Se você conferir os links que deixei no começo do post, verá como aplicar todos esses métodos numa array.

Infelizmente, eu não posso fazer os mesmos elogios a outros tipos de iteráveis.

Array-like é só isso mesmo?

Parece que array like não serve para nada.

Porém, eles possuem outros métodos, além de forEach e .length.

Para descobrir tudo que você pode fazer com eles, basta olhar uma documentação, como a MDN. Outra opção muito divertida é olhar o protótipo do array-like no próprio Devtools.

Se você digitar o nome de uma estrutura de dados seguido de .prototype, verá todos os métodos disponíveis. Veja o exemplo abaixo com Nodelist:

Agora faça o teste com outras estruturas de dados. Funciona inclusive com Array e Object.

Mesmo com tantos métodos, ainda assim o Nodelist (e qualquer array-like) é mais limitado do que uma array.

Se você precisa fazer um map em um Nodelist, por exemplo, terá um erro como esse:

Então, antes você precisa convertê-lo para uma array.

Converter array like para array

Aqui está o grande pulo do gato.

Se você quer usar todo o poder da array, mas tem outra lista em mãos, sem problemas. É totalmente possível converter essa outra lista para array para trabalhar com mais flexibilidade.

Existem duas formas.

A primeira é com o método Array.from():

const buttonsArrayLike = document.querySelectorAll('.button');
const buttonsArray = Array.from(buttonsArrayLike);

buttonsArray.map(...);
buttonsArray.filter(...);
buttonsArray.reduce(...);

Basta colocar a array like como parâmetro dessa função e pegar o retorno já em formato de array.

E a segunda forma é com o spread operator:

const buttonsArrayLike = document.querySelectorAll('.button');
const buttonsArray = [ ...buttonsArrayLike ];

buttonsArray.map(...);
buttonsArray.filter(...);
buttonsArray.reduce(...);

Com ele você espalha os itens de uma lista. No caso acima, na linha 2, espalha dentro de um novo array, iniciado com os colchetes.

Ambas soluções possuem o mesmo resultado, basta usar cada uma no momento mais adequado.

Por fim, existe outra forma de iterar bastante conhecida.

E o `for...in`?

O for...in é bem parecido com o for...of, porém para objetos.

A forma de escrever é igual:

const obj = {
  else: false,
  cleanCode: true
};

for (const property in obj) {
  console.log(property);
}

// else
// cleanCode

O que aparece no console é apenas a chave do objeto.

Para acessar algum valor, é preciso usar a notação de colchetes:

const obj = {
  else: false,
  cleanCode: true
};

for (const property in obj) {
  console.log(obj[property]);
}

// false
// true

O for...in itera apenas sobre as propriedades enumeráveis de um objeto. Isso não inclui métodos herdados do construtor do objeto como o toString().

E por fim, recomendo que você não altere propriedades do objeto durante o loop. Isso pode causar uma festa danada, bagunçar o loop e gerar comportamentos inesperados.

Callback

Existem muitas formas de iterar sobre listas em Javascript. Algumas delas podem ser usadas apenas em arrays, mas com o for...of (farofa) é possível percorrer todas elas.

Nem toda lista é array, mas toda array é uma lista. Array-like faz parte da vida, está tudo bem, e você sempre pode converter para array antes de trabalhar com elas.

Também é possível iterar sobre as propriedades de um objeto, e acessar seus valores com a notação de colchetes.

Esse post fecha com chave de ouro junto com os outros onde falei sobre os métodos de array em Javascript, e a diferença entre os tipos de lista. Consegui mostrar quase tudo que você precisa para trabalhar com elas.

Tem mais coisas? Claro que tem. Mas decorar todos os comandos e possibilidades de uso da linguagem não é o ideal.

O enigma do visually-hidden: mestre da acessibilidade ou sabotador de SEO?

deMenezes — Sat, 01 Feb 2025 23:21:42 +0000

Ao usar a técnica visually-hidden você pode acabar fazendo cloaking e penalizando o seu SEO. Clique e veja como não ser banido pelo Google

Vamos começar indo um pouco além do display:none.

Você já usou essa técnica de visually-hidden?

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  -webkit-clip: rect(0 0 0 0);
  clip: rect(0 0 0 0);
  overflow: hidden;
  word-wrap: normal;
}

Lembrou? Não? Ela faz a mesma coisa que a classe sr-only do Tailwind CSS.

Elas têm o mesmo objetivo: ocultar um elemento visualmente, e deixá-lo disponível apenas para leitores de tela e SEO. E no fim, melhorar a acessibilidade.

Porém isso pode ter um impacto direto no SEO. O Google não vai muito com a sua cara quando você mostra algo para os motores de busca mas oculta dos usuários. E isso pode punir o seu site no rankeamento das pesquisas.

A intenção aqui não é falar de CSS, e sim do impacto dessa técnica no SEO. Mas só para esclarecer...

O que essa técnica faz?

Resumidamente:

Retira do elemento do fluxo normal da página
Reduz seu tamanho a zero
E remove espaçamentos

O visually-hidden oculta um elemento visualmente, mas o mantém disponível para leitores de tela e os robôs do Google.

Assim, você pode acrescentar informações importantes para pessoas cegas ou com baixa visão. E essas informações não irão atrapalhar o layout ou são desnecessárias para pessoas com visão.

Veja um exemplo desse tipo de informação no site da Apple. Na imagem a seguir, abaixo de cada produto, existe um botão com a label "Saiba mais":

Para pessoas com visão, está claro o que cada botão "Saiba mais" faz: mostra mais informações sobre o produto daquele contexto. Mas só isso não basta para a acessibilidade. Como deixar claro para todos o que esses botões fazem?

Melhorar a compreensão do botão "Saiba mais"

Se tiver curiosidade, instale um leitor de tela no seu computador.

Ele irá narrar as informações de cada produto de cima para baixo, e depois passar para o próximo produto. Sempre que o usuário focar no botão "Saiba mais", por padrão o leitor irá narrar apenas "Saiba mais".

Mas ao longo de uma lista de produtos, isso fica chato e pouco claro. "Saiba mais", "Saiba mais", "Saiba mais"... Saiba mais sobre o que, meu consagrado?

Existem algumas formas de corrigir isso.

Solução 1: colocar mais informações no botão

Como solução, o front-enzo colocou o nome de cada produto dentro do saiba mais:

Agora o tamanho do botão depende do tamanho do nome do produto. Isso pode ir contra o design system, além de quebrar facilmente o layout.

Solução 2: visually-hidden

Essa é a técnica que comentei lá no começo.

Você pode fazer assim como na solução 1, porém ocultar visualmente o nome do produto:

<a href="/br/iphone-16/">
 Saiba mais <span class="visually-hidden">sobre o iPhone 16</span>
</a>

Isso fará o botão mostrar apenas o texto "Saiba mais" como label, e o leitor de tela irá narrar "Saiba mais sobre o iPhone 16".

Mas você cai no problema que contei no início, isso fica disponível apenas para parte dos usuários. Assim, o Google fará um pente fino no seu site.

A Shopify também não recomenda ocultar algo apenas visualmente por motivos de layout.

Solução 3: aria-label

A solução que a Apple adotou nesta página foi colocar o texto completo dentro do atributo aria-label.

Essa me parece a melhor solução até o momento, porque o leitor de tela prioriza o aria-label em relação ao conteúdo da tag HTML. Assim, não é preciso nenhuma técnica obscura para ocultar visualmente as coisas.

Outras situações que podem exigir o uso do visually-hidden são:

Títulos que precisam estar no HTML mas não fazer parte do design
Textos explicativos adicionais desnecessários para usuários com visão
Labels de formulários com design minimalista

Mas afinal...

Visually-hidden impacta o SEO do site?

Antes de qualquer coisa, você sabe o que é cloaking?

Segundo o Google, cloaking (camuflagem em português) é uma técnica para apresentar diferentes conteúdo no site, a depender de quem acessa. Se for um usuário comum, mostra algo; se for um motor de busca, mostra outro. É uma camuflagem do conteúdo.

Isso te lembra algo?

Essa técnica é considerada black hat, pois ela engana o motor de busca para melhorar o rankeamento do site de forma fraudulenta. E caso o Google descubra, irá penalizar seu site.

Logo, posso concluir que visually-hidden causa cloaking, e logo é ruim. Certo? Mais ou menos.

Na página que linkei acima, o Google usa exemplos muito extremos para explicar o uso de cloaking:

Você cria uma página sobre um assunto (medicamento com descontos), mas configura ela para mostrar outro assunto (destinos de viagens) quando for acessada por um motor de busca
Você insere palavras "invisíveis" na página que o usuário não vê, mas aparecem para os robôs

Isso parece mal intencionado, mais do que ocultar algumas palavras dentro de um botão "Saiba mais".

Afinal, visually hidden é cloaking? A diferença entre o remédio e o veneno é a dose.

Se usar o visually-hidden com cuidado, não haverá problemas. Mas se abusar, isso facilmente se encaixao como cloaking.

Se o google é realmente inteligente, ele vai perceber que o visually-hidden serve apenas para não quebrar o layout e melhorar a acessibilidade, em vez de mostrar conteúdos completamente diferentes, aplicar golpes, spam, etc.

Agora não pense em algo pequeno demais, como um texto dentro de um botão; ou grandioso demais, como o assunto principal da página. Veja um meio termo: ocultar a tag H1.

Se você já estudou um pouco sobre HTML semântico e SEO, sabe que essa tag é essencial para o rankeamento do site. E se eu ocultar ela?

Aplicar visually-hidden no H1 da página impacta no SEO?

A tag H1 do HTML é uma das mais importantes da página.

Ela é responsável por descrever o assunto principal. Porém, às vezes esse assunto é tão claro que fica redundante exibir um H1. E você opta por aplicar um visually-hidden ou nem colocá-la no HTML.

Como eu disse alguns parágrafos acima, espero que os robôs do Google realmente sejam inteligentes. Se o cloaking é aplicado em diversas páginas do site em conteúdos grandes, muitas tags HTML, etc... um sinal de alerta deve ser ligado. Por outro lado, se você faz pouco uso disso, espera-se que o Google não seja tão linha dura.

Ocultar a tag H1 apenas da página inicial, por exemplo, é completamente compreensível. Mas o mesmo não se aplica a uma subpágina como um post de blog, pois ele perderia relevância nas pesquisas.

Como você pode ver, são muitas questões, e pouco se fala que SEO é uma junção de fatores. Se você ocultar o H1, o Google não não irá lhe banir para sempre. Assim como se você usar as palavras-chave certas, não será automaticamente movido para o topo das pesquisas.

Dito isso, seo on-page é apenas um dos fatores. Então faça o menor (ou nenhum) uso de cloaking possível, enquanto cuida de outros fatores, como:

Backlinks
CTR
Tempo de permanência na página
Bounce rate
Entre outros

Recomendo muito que você leia esse artigo sobre o impacto no SEO de ocultar o H1 na página inicial de um site.

A liderança mandou eu fazer cloaking. E agora?

Ok, você já sabe (quase) tudo sobre visually-hidden e cloaking.

Mas a pessoa techlead chegou e disse que é para fazer mesmo assim. Nesse caso você pode tomar alguns cuidados.

Estilizar o H1

Use o CSS ao seu favor.

Sugira ao time abandonar a tag HTML H1 com o estilo default, um texto grande, em bold e com destaque. E em vez disso, estilizá-lo para parecer um parágrafo comum.

Assim você mantém o mesmo conteúdo para todos os usuários e robôs de busca, sem quebrar o layout.

Oculte o conteúdo com Javascript

Outra técnica que vejo muito acontecer é ocultar conteúdo com Javascript.

Isso tem um problema. Na maioria das vezes, o Javascript só executa após toda a página montar. Então pode ser que o usuário veja o conteúdo, e alguns segundos depois ele suma. Para a experiência do usuário, estabilidade da página e evitar CLS (cumulative layout shift), isso é horrível.

Então pense bem.

O Google baniu ou penalizou meu site e olha no que deu

Para finalizar as dicas, procure pelo Google Search Console.

Essa ferramenta serve para você monitorar como um site performa nas buscas, com dados sobre:

Quantidade de cliques
Principais palavras-chave
Etc

Ele também irá te sinalizar sobre problemas de indexação das suas páginas. Recomendo ver esses alertas e relatórios com frequência e corrigir o quanto antes quando algo surgir.

Se você já leu tudo na internet sobre SEO, maratonou o demenezes.dev (cof cof), e mesmo assim deu problema no SEO, pode consultar esse guia sobre como corrigir sites invadidos.

Além disso, sites que aplicam paywall (para exibir conteúdo apenas para usuários autenticados) podem sofrer do mesmo problema. E o Google tem uma documentação para amostragem flexível (paywall).

Callback

A técnica de visually-hidden serve para ocultar visualmente um conteúdo do site, mas mantê-lo disponível para leitores de tela e robôs de busca.

Você pode usar ela na melhor das intenções, como por exemplo manter a boa acessibilidade sem quebrar o layout. Mas alguns casos podem se encaixar em cloaking, uma técnica black hat de SEO mais desencorajada do que Javascript no back-end (brincadeira).

Visually-hidden não necessariamente penaliza o SEO do seu site, mas cloaking sim.

Ocultar visualmente o H1 de uma página pode não ser prejudicial, desde que isso se aplique à página inicial.

Se você já tomou todos os cuidados e mesmo assim precisa aplicar o visually-hidden, use algumas alternativas. Você pode estilizar o H1 de uma forma que não prejudique o layout, ou um conteúdo com Javascript (sempre cuidando do CLS).

Por fim, mantenha o seu site conectado ao Google Search Console para ser notificado de possíveis problemas de SEO.

Se você está lendo aqui, imagino que SEO seja algo importante no seu trabalho, ou pelo menos está nos seus interesses. Então te convido a ler esse artigo sobre como evitar que imagens sem texto alternativo afetem o SEO e acessibilidade do seu site.

Esse tema sempre me desperta muita curiosidade, pois SEO é a intersecção do front-end com marketing. E isso impacta diretamente no dinheiro que entra no bolso da empresa. Sem falar que minha primeira formação foi em marketing, antes de fazer a migração para a área de desenvolvimento.

Muito obrigado pela sua leitura. Deixe seu comentário caso tenha dúvidas, ou para agregar no conteúdo. Vou ficar muito feliz em ler :)

Fui na Codecon Summit 2024 e olha no que deu

deMenezes — Thu, 26 Sep 2024 11:13:21 +0000

A Codecon Summit 2024 é um evento de tecnologia que conta com palestras, bate papos, networking, dinâmicas, brindes, bebedeiras... não pera

E aí, vai escrever um post sobre o evento?

"Gabriel Nunes, organizador da Codecon"

Ouvi isso ao final da Codecon quando fui cumprimentar o Gabriel e parabenizá-lo pelo evento.

Nem eu lembrava que tinha blog haha.

Em 2024 tive que fazer uma pausa nele por questão de tempo. Mas me obriguei a vir relatar como foi ir de Porto Alegre até Joinville na Codecon Summit 2024.

Como foi a Codecon Summit 2024

Pouco depois da Codecon Summit de 2023, abriram as vendas dos ingressos para o evento desse ano.

Como um bom procrastinador, deixei para comprar só esse ano. Assim como hospedagem e transporte.

Saí de Porto Alegre com mais alguns amigos da nossa comunidade daqui, o GDG Porto Alegre.

Quando chegamos, vi tudo muito bonito e organizado.

Muitos stands de patrocinadores com dinâmicas, jogos e brindes. Qual não foi minha surpresa ao ganhar um boné da Motorista PX.

Havia um auditório gigante chamado Palco Plenária, e uma sala lateral menor chamada Meet&Cookies. Chamei o Plenária de Palco Principal ou Palco Mundo o evento todo.

Além disso, os palestrantes batiam um papo mais próximo com os participantes na sala Escovando Bits.

Sem falar na sala com boardgame e RPG que (infelizmente) não tive tempo de conferir.

A sensação é de que havia muitas atividades para fazer, e as pessoas se distribuíram em todas elas.

Para quem lembra do Code Codes que acontecia também na Codecon Online, a tradição se manteve. Nesse jogo você deve encontrar códigos espalhados pelo evento e inserir no aplicativo. Assim você acumula pontos e concorre a brindes absurdos no final do evento (exemplo: PlayStation 5).

Nesse evento, houve uma história complicada.

A plataforma do jogo começou a passar por instabilidades. Os organizadores descobriram que alguns participantes descobriram como acessar o admin do sistema. E lá, eles geraram códigos aleatórios e usaram no jogo. Em pouco tempo, essas pessoas chegaram aos 500 mil pontos, enquanto ainda havia pessoas com 30mil.

Os detalhes você encontra no post do Gabriel no Linkedin e no site da Codecon. É importante ler esses links para entender como a organização percebeu e corrigiu o problema. Ou seja, trocou a roda com o carro andando mesmo.

Foi então que as palestras começaram.

Palestras que mais gostei

O Mano Deyvin trouxe a talk sobre Verdades duras de engolir. Falou sobre o mercado de trabalho da forma mais crua, como a comunidade já conhece.

O ponto mais interessante que ele trouxe foi sobre as empresas que não estão no Linkedin. Ele trouxe um slide com um gráfico sobre as empresas de tecnologia de Joinville, e mostrou que tem muitas formas de conseguir sua oportunidade no mercado, sem ser em redes sociais.

Infelizmente não lembro da fonte dos gráficos dele nem consegui tirar foto do slide a tempo (peço perdão pelo vacilo).

A Jéssica Félix foi outra pessoa que brilhou demais na palestra sobre escalabilidade de projetos web.

Ficou muito claro que de um ponto em diante, a palestra ficou "sênior demais para mim", o conteúdo era de qualidade mesmo.

Já no outro palco da Codecon Summit 2024, o Meet&Cookies, acompanhei uma palestra onde o Rafael Camargo. Ele criou um framework React com menos de 100 linhas. Muito interessantes os conceitos sobre hooks, server e client components, server actions, etc.

Aleatoriedade: do nada, o Silvio Santos subiu ao palco para animar a galera e jogar aviõezinhos. Não me pergunte nada, isso apenas aconteceu.

O Vitor Norton falou sobre o código que existe por trás da colaboração, no seu trabalho na Superviz.

O mais interessante foi que no início da palestra ele não falou sobre código, tecnologia, ou outras coisas "frias". Ele falou sobre colaboração mesmo. Uma maneira bem cativante de começar a apresentação.

Mais tarde, a Jéssica Félix e o Elton Mineto fizeram um painel super legal sobre carreira.

Falaram sobre as idas e vindas da carreira deles, e a importância de dar um passo atrás em alguns momentos.

Voltando ao Palco Plenária, a palestra que mais me marcou foi justamente o fechamento. Nela, o Diego Fernandes falou sobre como os vídeos funcionam e como fez a plataforma de cursos da Rocketseat.

Toda a palestra foi bastante técnica, ao mesmo tempo que foi acessível e importante para quem quer trabalhar no mundo dos vídeos e streamings.

Se você quiser, pode ver as apresentações do Palco Plenária e do Meet&Cookies.

Mas geralmente não só de palestras vivem os eventos.

O tão desejado patinho amarelo

Só o desejo explica a fila enorme que se formou para pegar o patinho amarelo na máquina de pegar bichinhos.

Uma amiga passou mais da metade do evento nessa fila, sem sucesso.

Quando a Codecon Summit 2024 acabou, ela viu que ainda havia patinhos na máquina já desligada. Assim que as pessoas começaram a sair do auditório, fomos até o Gabriel (organizador do evento) pedir um patinho. Ele atendeu ao pedido na mesma hora, o que foi muito legal.

Nesse momento aconteceu a cena que contei lá no começo do post.

Além dos patinhos, havia outros brindes. Um deles caiu no meu colo: uma dose dupla de chope no bar que iríamos no pós evento.

Pós evento

Em frente ao local do evento existe o Gutbrau, bar onde todos nos reunimos para nos divertirmos. Curiosamente foi o mesmo bar que fui após a Codecon Summit 2023.

Esses momentos de descontração após os eventos, sem falar de código ou de trabalho, é quando a comunidade mais se aproxima.

Valeu a pena

Se eu iria de novo?

Sempre valeu a pena comparecer em eventos presenciais da comunidade. Seja pelo conhecimento, networking, ou por reforçar aquela vontade de se aprofundar e estudar cada vez mais sobre tecnologia.

Como você pode ver, eu estive lá na edição do ano passado, compareci nas duas versões online da Codecon feitas no Gather... e se possível estarei presente nos próximos anos também.

E aí, vou te encontrar por lá?

De bits a posts: vantagens, desafios e métricas da produção de conteúdo de tecnologia em 2023

deMenezes — Sun, 31 Dec 2023 17:13:58 +0000

Veja como ter ideias para produzir conteúdo de tecnologia, vantagens, desafios e métricas de um blog em 2023.

Eu levei 12 horas e 50 minutos para escrever o post mais demorado do blog, sobre os diferentes tipos de array.

O mais rápido, sobre o evento Codecon Summit 2023 em Joinville, levou 2 horas e 10 minutos.

Nesse post que fecha o ano, resolvi escrever sobre como foi produzir conteúdo de tecnologia em 2023:

Como faço para escrever os posts aqui do blog
Um breve histórico de tudo que já aconteceu
Pontos positivos
Desafios
E alguns números do blog

Espero que esse conteúdo te ajude de alguma forma, principalmente se você pretende produzir conteúdo ou já faz.

Como escrevo os posts sobre tecnologia no blog

Para mim, checklists sempre funcionam muito bem.

Tenho um checklist para produção de conteúdo que me acompanha há muito tempo. Já fiz muitas adaptações nele e hoje divido as tarefas em 7 fases:

Planejamento
Criação
Imagens
Revisão
Título
Publicação
Divulgação

Planejamento

O planejamento é o começo de tudo.

Faço pesquisa de palavras-chave, vejo outros conteúdos no Google e YouTube, e tópicos para escrever no post.

Criação

A etapa de criação é a mais demorada e a mais difícil de todas.

No começo, eu crio o esqueleto do post em formato de títulos e subtítulos, ordeno eles, e depois escrevo o corpo deles. Nessa parte também faço novas pesquisas, estudo sobre o conteúdo e testo todos os códigos.

Escrevo o último capítulo que chamo de Callback, ele serve para retomar todo o conteúdo de forma resumida.

Outra parte bem importante é criar "ligações" entre os capítulos. É estranha a sensação de parecer que cada capítulo é um texto isolado, então eu conecto eles com frases lógicas. Isso ajuda a justificar a ordem que escolhi para eles.

Imagens

Apenas quando necessário, eu apoio o conteúdo com imagens.

Quando as imagens ajudam a transmitir a mensagem, essa parte é bem demorada, já que preciso produzir ou pesquisar por elas.

Então vou atrás das imagens que preciso usar no corpo do post, imagem de capa, otimizo, e subo para o post. Além de preencher o texto alternativo.

Revisão

Essa etapa talvez seja uma das mais chatas, mas uma das que mais gera valor: revisão.

É aqui que eu:

Corrijo erros
Removo palavras repetidas
Destaco trechos em negrito
Troco palavras difíceis por outras mais simples
Diminuo trechos longos
Removo verbos em terceira pessoa, gerúndio e voz passiva em excesso

É incrível como o texto sobe de nível com a revisão. Não acredito que o conteúdo possa sair pronto de primeira, então eu escrevo sem muito apego, e faço a revisão logo após.

E para finalizar, depois de uma noite de sono eu faço uma leitura final para garantir que fiz o meu melhor. Esse tempo antes de reler é muito bom, pois destaca alguns problemas do texto que antes não estavam claros.

Já usei a etapa de revisão para alterar completamente a estrutura do post.

Quando falei sobre o forEach em Javascript, transformei todo o texto em uma história. Nela, você está no seu primeiro dia de trabalho como pessoa desenvolvedora e recebe tarefas. Conforme elas chegam, eu mostro como resolvê-las com o forEach.

Foi bastante trabalhoso, mas acredito que ficou muito superior a um simples tutorial.

Título

O título é uma das etapas mais legais.

Porque é como se eu precisasse escrever outro texto, mas que deve ter entre 80 e 100 caracteres. Depois disso adapto o título para aparecer no Google, com até 65 caracteres, crio a descrição curta do post e o texto da URL.

Publicação

A publicação é a etapa mais rápida e mais prazerosa de todas.

Mais rápida porque eu apenas clico em "Publicar". Também crio link nos posts antigos apontando para o novo, mas apenas quando existe uma relação entre os conteúdos.

E mais prazerosa porque é o momento de ver o que o mundo achou daquilo.

Divulgação

Apesar de parecer, ainda não acabou o trabalho com esse post.

Nesse momento já estou com vontade de iniciar o próximo texto, mas é muito importante fazer a parte de divulgação. Apesar de eu achar que ainda não faço isso muito bem.

Eu reproduzo todo o conteúdo no Medium e dev.to, com uma URL canônica que aponta para o meu blog, como conteúdo original. Também publico uma prévia no Tabnews e um link que aponta para o blog.

Outra divulgação é via Twitter. Eu sempre crio uma thread com o conteúdo. É um formato que a galera gosta bastante, compartilha, favorita e me segue. Porém caiu muito o engajamento depois que desativaram o @sseraphini.

Os últimos lugares que divulgo é em alguns servidores de Discord e um grupo dos devs da firma.

Agora fico um ou dois dias sem mexer no blog, até para aliviar a cabeça.

Agora sim, posso começar um post novo.

Mas antes de escrever, eu preciso ter ideias para saber o que escrever.

Como ter ideias para produzir conteúdo de tecnologia?

Tendo.

Aposto que a internet atualmente responde a pergunta "como ter ideias para meu blog?" com "use uma uma IA". Particularmente, não gosto.

As ideias que eu escrevo são:

Coisas que apliquei no trabalho e foram desafiadoras (como o atributo loading=lazy e como fazer lazyload)
Conhecimentos fundamentais de web que aprendi e posso reler o post no futuro (como box model)
Conhecimentos que eu considero importantes para quem está começando (como os diferentes tipos de array em Javascript)
Experiências pessoais (esse post aqui é um caso)
E a partir do ano que vem, quero escrever mais sobre projetos (aguarde...)

Como você pode perceber, os temas têm uma relação muito pessoal comigo. Nenhuma IA ia sugerir um tema nessa linha que me agradasse.

Então, com os tópicos acima em mente, sempre que penso em algum tema, adiciono ele no backlog do blog. Quando chega o dia de produzir um novo conteúdo, apenas pego do backlog aquele que mais me agrada e começo a escrever. Faço isso para não precisar pensar no que escrever a cada novo post.

Outras fontes de temas muito interessantes são blogs de fora do Brasil. No dia de escrever faço uma longa pesquisa para que meu post não fique uma cópia de outro blog.

Mas todo esse trabalho deve gerar alguma coisa boa.

Conquistas: o que eu ganhei com tudo isso?

Conhecimento para desenvolver o blog

Sem dúvidas, a maior conquista nisso tudo foi o conhecimento.

Antes de começar, fiz uma longa pesquisa de referências, com print de componentes, e criei o style guide.

Depois, adquiri muito conhecimento para programar o blog. Pratiquei muito React, Styles Components e NextJS. Nesse último, entendi sobre server side render e static site generator.

Eu usei um template da Vercel para iniciar o blog, mas fiz muitas alterações nele. Uma delas foi criar paginação dos posts que não existia.

A outra foi mudar a origem dos posts. Originalmente, eles são arquivos markdown no repositório, porém mudei para escrever no DatoCMS. Isso foi outro salto de conhecimento para aprender a usar um CMS headless, consumir uma API GraphQL e descobrir as libs datocms-structured-text-utils e react-datocms que facilitaram muito o trabalho.

Através da pasta API do Next, criei um modo de preview para visualizar o post no site antes de publicar.

Fiz deploy e, claro, vi a página de um post quebrar em produção por causa de um componente mal feito.

Se quiser, pode deixar uma estrelinha no repo do blog.

Conhecimento para escrever os posts

Posso falar com tranquilidade que pesquiso bastante.

Tão importante quanto o conhecimento para subir o blog, é aquele que preciso para produzir os conteúdos. Eu tenho muito receio de explicar algo errado, então me esforço para estudar e testar tudo que escrevo. Apesar de saber que não preciso ser especialista para falar de um assunto.

Além do tema técnico, escrever em um blog me ajuda muito na escrita e comunicação. Esses dois conhecimentos são importantíssimos na nossa área.

Conhecimento de SEO

Search Engineering Optimization.

Isso me acompanha desde quando trabalhava com marketing digital. SEO são técnicas para você ficar bem colocado nos resultados de ferramentas de busca. Você pode aplicar isso para:

Seu site ficar bem colocado no Google
Seu vídeo ficar bem colocado no YouTube
Seu aplicativo ficar bem colocado na loja de aplicativos
Entre outros

E como tenho acesso ao código fonte do blog, aplico técnicas que seriam mais difíceis caso usasse o Wordpress, por exemplo. Claro que ele tem plugins para facilitar esse trabalho, mas a minha ideia é fazer as coisas na mão para aprender.

Um "quase patrocínio" para ir a um evento

Outra "quase conquista" que já aconteceu foi receber patrocínio para ir a um evento.

Eu tenho alguns posts sobre como foram os eventos de tecnologia, como esse sobre a Codecon Summit em 2023. Isso chamou a atenção de uma pessoa importante da comunidade, e ela me convidou para participar de um evento e registrar ele.

Infelizmente não aconteceu por questões de agenda e distância do local do evento, mas seria uma experiência incrível.

Treino para palestrar

Como pretendo palestrar no futuro, o blog acaba sendo um treino.

Existem muitas semelhanças entre um post e uma palestra:

Escolher um bom tema
Escrever o conteúdo da palestra, seja o texto na íntegra ou apenas os tópicos
Fazer escolha de palavras adequadas
Revisar tudo
E no fim, ambos são produção de conteúdo

A diferença é que uma palestra exige uma apresentação de slides interessantes e a exposição do conteúdo com a tua própria voz. E essa parte preciso exercitar mais.

Spoiler: sequências de clichês.

Mas nem tudo são flores, e para que eu pudesse conquistar essas coisas, houve pedras no caminho.

Desafios para produzir conteúdo

Para mim, o grande desafio para produzir conteúdo é o tempo.

Se você não é herdeiro ou filho(a) de bilionário(a), tem que trabalhar algumas/muitas horas por dia. E no tempo que sobra para você descansar, ainda deve ter energia para produzir conteúdo. Esse tempo extra vem antes do trabalho pela manhã, após o trabalho à noite, fim de semana e feriado.

É bem difícil decidir entre descansar, ler um livro, ver uma série ou filme, dormir, ou produzir conteúdo. A escolha é muito particular. Você precisa colocar os prós e contras na balança e ver o que pesa mais.

Quanto maior o esforço para produzir conteúdo de qualidade, mais tempo vai levar, a não ser que contrate pessoas para fazer algumas tarefas. Mas se você ainda não ganha dinheiro com seu conteúdo, dificilmente isso vale a pena.

Desde o começo do blog, postei conteúdos voltados para a teoria de desenvolvimento web. E isso trouxe outro problema, eu deixei de lado os projetos pessoais, pois não conseguia mantê-los junto com o blog. Mas como já falei, quero mudar isso ano que vem. Talvez até codar os projetos em live.

Eu sempre fui um pouco apaixonado por números, então eu conto o tempo que levo em cada etapa de um post. Fiz um apanhado desses números e trouxe agora para você.

O demenezes.dev em números

Acessos

O primeiro commit do blog foi em 4 de julho de 2021:

No dia 15 de agosto do mesmo ano comprei o domínio demenezes.dev no Google Domínios. Mas por causa de compromissos e uma mentoria que dei nesse ano, o primeiro post só foi ao ar no dia 25 de maio de 2022. Mais de 22 mil pessoas já leram esse post, que foi sobre como centralizar qualquer coisa em CSS.

Outros que despontaram foram:

A diferença entre links e botões em HTML
Dicas de atalhos customizados no VS Code
E uma visão geral sobre o comportamento de focus na web

De lá para cá, já foram 37 posts e pelo menos 1 por mês.

Mas agora sim, meus amigos. Vou falar sobre o ponto que me despertou para escrever sobre isso, o tempo necessário para produzir os conteúdos.

Métricas internas

Eu mantenho um controle do tempo que levo para escrever cada uma das 7 etapas do post.

Veja abaixo um resumo desde quando comecei a contabilizar:

Post	Planejamento	Criação	Imagens	Revisão	Título	Publicação	Divulgação	Total
imagem-quadrada-redonda-css	9	390	79	76	31	9	43	10h37min
codecon-online-2023	3	109	11	71	11	18	29	4h12min
iife-funcao-autoinvocada	7	337	26	61	18	4	62	8h35min
front-in-sampa-2023	3	107	13	31	17	2	32	3h25min
diferenca-entre-array-htmlcollection-nodelist-domtokenlist-namednodemap	14	500	43	86	16	5	106	12h50min
como-usar-foreach-javascript-exemplos	10	246	31	53	18	4	76	7h18min
codecon-summit-presencial-2023	2	64	4	33	1	3	23	2h10min
map-javascript-array	7	347	40	71	24	9	91	9h49min
filter-javascript-array	3	236	48	60	10	6	51	6h54min
find-javascript-array	2	346	18	57	17	4	72	8h36min
every-some-javascript-array	1	442	30	65	9	5	76	10h28min
reduce-array-javascript	15	288	14	115	14	5	125	9h36min
reduce-array-javascript	7	152	32	55	12	5	14	4h37min
Média	6	274	30	64	15	6	62	7h37min

Agora vou destacar alguns pontos que achei bem interessantes.

O tempo médio para produzir um conteúdo é de 7 horas e 37 minutos.

O post mais demorado foi sobre os diferentes tipos de array. E o mais rápido, sobre o evento Codecon Summit 2023 em Joinville.

Os posts sobre eventos são mais rápidos de escrever, pois não exigem revisão técnica ou testes, são apenas um relato. Você pode notar isso nos outros sobre o Front in Sampa 2023 e a Codecon Online 2023. Outro ponto é que eu chego do evento com o esqueleto do post pronto, pois faço anotações. Mas confesso que é um tipo de conteúdo que não me orgulho muito, quero mudar o formato.

A etapa de criação do post, como era de se esperar, é a mais demorada, já que é a mais importante.

E para além dos números, os posts que mais me orgulhei de ter escrito foram:

Callback

Para produzir o conteúdo aqui do blog, divido o processo em 7 etapas. Planejamento, criação, imagens, revisão, título, publicação e divulgação.

As ideias surgem de desafios que passei no trabalho, assuntos de estudo e experiências pessoais.

Percebo que até agora adquiri muito conhecimento técnico com o blog, SEO, além de ser um preparo para quando eu palestrar.

Os principais desafios para produzir conteúdo foram:

O tempo necessário para escrever tudo com a qualidade que eu desejo
E ter deixado outros projetos pessoais de lado

O blog começou a mais ou menos 2 anos e meio, já escrevi 37 posts, contando com esse. Levo em média 7 hora e 37 minutos para escrever cada um deles.

Apesar do meu interesse em mostrar os dados do último ano, aproveitei e fiz esse levantamento geral.

Muito obrigado a você que acompanhou o blog até aqui. Deixe um comentário com a sua opinião sobre o blog inclusive com sugestões, estou em época de mudanças.

Um feliz 2024 para você 😬

Projetos pessoais: 5 dicas para você decidir se deve melhorar ou começar um novo

deMenezes — Wed, 13 Dec 2023 00:22:28 +0000

Você não sabe se melhora o seu projeto pessoal ou começa um novo? Clique e veja essas 5 dicas para analisar com carinho e decidir.

Já ficou na dúvida entre permanecer em um projeto pessoal ou criar o próximo?

Eu já, várias vezes. Essa dúvida é constante na minha vida.

Tanto os projetos que tenho no meu Github, quanto os posts do blog, sempre penso se aprimoro ele, ou passo para o próximo. Além de não saber qual decisão tomar, eu não sabia nem no que pensar para tomar essa decisão.

Após criar alguns projetos na vida, consegui listar pontos a considerar.

Aprendizado: o quanto você já aprendeu com esse projeto? E quanto ainda pode aprender?

O quanto tu pode aprender com o projeto atual?

No começo tudo é uma maravilha. Desbrava novos desafios, aplica coisas novas, resolve problemas, vê recursos novos nascerem, melhora a estrutura do software, resolve bugs... Mas sem perceber, de uma hora para outra você está apenas aplicando o que já sabe, sem aprender nada novo.

Esse é um dos primeiros sinais que me fazem pensar em mudar de projeto.

O que você já aprendeu com o projeto atual? O que você ainda pode aprender?

Há muitos anos, criei um projeto que gerava os números da megasena naquele estilo de bolinhas:

O sistema gera um número entre 1 e 60. Entre o 10 e o 60 as bolinhas ficavam perfeitas, mas entre 1 e 9 (com apenas 1 dígito) não tanto:

Se o número fosse entre 1 e 9, eu precisava saber como acrescentar um zero antes dele. Inicialmente criei um if que verificava quantos dígitos tinha o número e acrescentava o zero ou não:

function foo() {
  const numeroGerado = getNumero();

  if (numeroGerado.toString().length === 1) {
    return `0${numeroGerado}`;
  }

  return numeroGerado;
}

Mais tarde descobri que poderia fazer a mesma coisa com 1 linha:

function bar() {
  return `0${getNumero()}`.slice(-2); 
}

E com isso cheguei no resultado que queria:

Depois disso, percebi que estava na hora de deixar esse projeto para trás.

Querer aprender e gostar de estudar é uma característica muito importante na nossa área. Se eu estivesse em um podcast (aqueles com mesa e live) e me perguntassem uma característica importante para trabalhar com tecnologia, eu responderia curiosidade em saber como as coisas funcionam (e em seguida rezaria para isso não virar corte de Tiktok/Reels).

Essa curiosidade aparece tanto no momento em que você desmonta um carrinho de controle remoto para entender seu funcionamento, quanto quando você faz engenharia reversa daquela lib famosa que manipula e formulários em React.

Existem mais aplicativos de listas de tarefas do que grãos de areia na praia. Mas o que a pessoa dev faz quando começa a estudar programação? Cria o seu próprio aplicativo de lista de tarefas!

Tem muita crítica em cima desses projetos que apenas copiam a interface do Spotify, a interface da Netflix, mais um app de tarefas, etc... eu particularmente vejo muito valor nisso, pois existem muitas possibilidades de aprendizado. Desde que você não copie o código do bootcamp da moda e que o repositório não fique igual ao de outras 5 mil pessoas.

Outro questionamento: esse projeto é importante para sua carreira, currículo ou entrevista? Ter um projeto com essa stack, nível de dificuldade ou segmento vai te colocar uma posição melhor no mercado?

Pense nisso.

Comunidade: outras pessoas contribuem e usam esse projeto?

Esse fator pode não acontecer no começo da sua carreira. Mas com o tempo sim.

Se o projeto é algo individual, é um pouco mais fácil tomar essa decisão. Porém com outras pessoas envolvidas, complica um pouco.

Quando você começa um projeto e cria o repositório numa plataforma como o Github, existem diversas ferramentas que facilitam a construção em grupo, sugestões de alteração, resolução de bugs, revisão de código, etc.

Conforme seu projeto cresce, e outras pessoas colaboram, fica um pouco mais difícil abandoná-lo. Pois nesse momento você se torna o responsável por tornar aquilo um "caos organizado". Definir padrões de commit, PR, releases, e muitas outras responsabilidades.

Porém, algumas das pessoas que contribuem, podem querer ajudar a organizar. E esse é um grande momento para eleger moderadores, criar um README.md bem escrito, entre outras regras que fazem a comunidade andar com as próprias pernas.

Pense nisso.

Stack: você quer se aprimorar nas tecnologias desse projeto?

Certa vez fiz um teste técnico para um entrevista.

Eu tinha 4 horas para finalizar 4 desafios. Levei 3 horas e meia para fazer apenas um deles, um conversor de decimal para binário. Tudo bem.

Entre as linguagens permitidas, eu conhecia mais Python, pois estava aprendendo na faculdade.

Após terminar o desafio, eu queria colocar o projeto no meu Github. O ponto é, como meu foco sempre foi o ambiente web e front-end, resolvi converter tudo para Javascript. E foi assim que eu fiz.

Apesar de não ter passado na vaga, aprendi bastante coisa sobre:

Javascript
Manipulação de DOM
E claro, binário

E esse é outro fator para levar em consideração quando você está a fim de abandonar um projeto. É a stack que:

Você quer se especializar?
Você precisa usar para um teste técnico?
Está com oportunidades no mercado?
Você gosta?

Pense nisso.

Desejo: você tem vontade de continuar com esse projeto?

Ei, você leu o título? Então responde...

Você tem vontade de continuar com esse projeto?

Não estou dizendo que vontade é o único fator para isso, até porque na vida você precisa fazer muitas coisas desgostosas, como acordar cedo segunda-feira. Mas esse é sim mais um fator para tomar essa decisão.

Se a vontade for praticamente zero, os outros fatores têm que ser muito fortes para manter você ativo no projeto.

Eu tenho uma certa dificuldade em largar as coisas pela metade, mesmo quando elas não me agradam. Como filmes, séries e jogos. Mas acredito que isso é um hábito bem ruim, o certo seria desapegar mesmo e partir para o próximo.

Se você também tem esse hábito, tente perceber se não é isso que mantém você preso a projetos desinteressantes.

Outro ponto é diferenciar a vontade de executar o projeto tarefa a tarefa, e a vontade de atingir o resultado do projeto.

Por exemplo, algumas tarefas aqui blog são meio chatas, como escolher título, descrição e uma boa imagem de capa. Porém sei que no geral eu ganho muito ao compartilhar conteúdo.

Você pode não estar tão satisfeito com um projeto, mas ao finalizá-lo, o que ele te trará de bom? Por outro lado, alguns projetos valem mais apenas quando as tarefas são legais do que o resultado em si. Tudo varia, tudo muda, tudo é fase.

Pense nisso.

Retomar o projeto: se eu abandonar agora, como será voltar nele no futuro?

Existe chance de você querer voltar nesse projeto?

Vou contar sobre coisas que já pensei aqui mesmo no blog. Além de postar por aqui, divulgo os conteúdos também no Medium e Dev.to. Já pensei várias vezes em publicar apenas lá, em vez de ter um site pessoal com domínio próprio. É muito mais fácil, pois terei menos preocupações com:

Design da página, layout
Problema de deploy
Stack
Bugs que podem quebrar uma página
A hospedagem ou o CMS não terem mais planos gratuitos
Etc

Porém o blog pessoal me dá várias possibilidades que, apesar do trabalho, ajudam muito no aprendizado:

Eu aprendi como subir um blog quase do zero
Aprendi sobre rotas
Aprendi como montar uma paginação
Fiz uma busca longa e repleta de referências para montar todo o layout do site

Além de eu poder usar o blog como um laboratório pessoal. Por exemplo, no futuro quero migrar o projeto de Javascript puro para Typescript , e trocar o Styled Components por outra ferramenta de estilização. Por enquanto é isso.

E se eu realmente cansar de tudo isso e quiser apenas escrever sem me preocupar em desenvolver um blog? É só parar.

Mas e se eu quiser voltar a ter o blog no futuro? Agora sim o ponto principal.

O quão difícil seria para retomar? Eu precisaria repostar aqui o conteúdo retroativo que só postei em outras plataformas? O Google iria penalizar o meu domínio (demenezes.dev) por ficar tanto tempo sem atualizar o site? Eu perderia pontos de SEO? E se no futuro eu quisesse abandonar novamente? E retomar novamente?

Pense nisso.

Callback

Para você decidir se deve seguir em um projeto pessoal ou partir para o próximo pense nesses pontos:

Aprendizado
Comunidade
Stack
Desejo
Futuro.

O primeiro ponto é sobre o aprendizado. Perceba se você aprende com ele ou apenas executa coisas que já sabe.

Olhe também para a comunidade, quantidade de pessoas que contribuem ou usam o projeto. Se puder eleger pessoas para administrar e moderar o repositório, é uma ótima chance de partir.

Veja se faz sentido investir nesse projeto caso ele use uma stack que não te atrai ou não te abre portas no mercado.

Olhe também para seus sentimentos (profundo). O quanto você tem vontade de continuar nele? Aqui ignore os motivos racionais e grandes justificativas, olhe apenas para o que você realmente sente.

Por fim, o que aconteceria se, após desistir, você quisesse retomar esse projeto no futuro? Seria fácil voltar?

Pense ni...

Agora coloque essas dicas num liquidificador, adicione seus próprios pontos e tome sua decisão.

Não esquece de comentar aqui embaixo quais são outros pontos importantes para essas situações.

Apesar de parece que esse post é uma lista de dicas minhas para você, eu também escrevo isso para o André do futuro. É bem provável que eu passe por essa dúvida, assim como já passei antes.

Se achou o conteúdo interessante, e gostaria de dizer um obrigado, compartilha com algum amigo, ou nas redes sociais 😀

Até a próxima!

Quem tem medo do reduce? Entenda esse método agora ou seu dinheiro de volta

deMenezes — Wed, 29 Nov 2023 00:36:30 +0000

Veja os diferentes tipos de operações que o reduce pode aplicar em uma array. Entenda esse método agora, ou devolvo seu dinheiro.

Reduce em inglês é reduzir.

O motivo disso é que a principal funcionalidade do reduce é reduzir uma array a apenas um valor. Veja um exemplo onde o reduce soma todos os números de uma array e retorna um número:

const numbers = [ 76, 23, 89, 54 ];

const result = numbers.reduce(function(acumulado, atual) {
  return acumulado + atual;
});

console.log(result); // 242

O que está aconteceu aqui:

Na primeira iteração, acumulado é o primeiro da array, e atual o segundo
Nas próximas, acumulado é o retorno das iterações anteriores, e oatual é o próximo item da array
Apesar de a array ter 4 itens, houve apenas 3 iterações (vou mostrar como corrigir isso)

O valor que o reduce retorna não precisa ser apenas uma string ou número, pode ser um objeto e inclusive outra array.

Imagino que por esse motivo esse seja o método de array mais complicado de entender, não vou mentir. Mas estou aqui para tentar explicar tudo da melhor forma. Ao longo do post vou dar vários exemplos de uso do reduce, do mais fácil para o menos fácil, para ajudar na explicação.

O parâmetro do reduce é uma função callback. Porém existe um segundo parâmetro opcional (mas altamente recomendado) que muda um pouco a lógica do jogo.

O valor inicial do reduce

Você pode definir um ponto de partida para o reduce.

O segundo parâmetro, que é opcional e não usei antes, é o valor inicial. Vou recriar o primeiro exemplo com um valor inicial de 8:

const numbers = [ 76, 23, 89, 54 ];

function callback(acumulado, atual) {
  return acumulado + atual;
}

const initialValue = 8;

const result = numbers.reduce(callback, initialValue);

console.log(result); // 250

Coloquei cada parâmetro em uma variável para facilitar a leitura. Como o reduce inicia em 8, o resultado que antes era 242, agora é 250.

Mas agora, o valor das variáveis acumulado e atual muda durante as iterações:

Agora, a quantidade de iterações corresponde ao número de itens da array, 4. Então por segurança, sempre defina o valor inicial
Na primeira iteração, acumulado é o valor que defini como inicial (8); e atual representa o primeiro item da array, 76
Nas próximas, acumulado é o resultado das iterações anteriores, e o atual é um item da array

Colocar um valor inicial é como colocar um item no começo da array antes de começar o reduce. Ele facilita o entendimento, porque na primeira iteração não existe resultado anterior.

No código abaixo, eu adicionei o 8 no começo da array e removi ele do valor inicial do Reduce. O resultado é o mesmo, mas não recomendo fazer isso. O valor inicial esclarece melhor o que acontece no código.

Faça por sua conta e risco:

// Adicionei o 8 no começo da array
const numbers = [ 8, 76, 23, 89, 54 ];

function callback(acumulado, atual) {
  return acumulado + atual;
}

// Sem initialValue
const result = numbers.reduce(callback);

console.log(result); // 250

Aos poucos, fica claro que o valor de retorno da função callback é muito importante. Vou dar um foco nela agora.

O retorno da função callback do reduce

Você pode retornar o que quiser.

O valor que você retornar em cada iteração será o valor do acumulado na próxima. Esse é uma das grandes vantagens do reduce, você pode fazer operações com mais de um item da array.

Existe apenas uma exceção a isso, que é a última iteração. O retorno dela é o resultado final do método reduce:

Veja isso com um exemplo. Vou usar a array abaixo para fazer o reduce:

const products = [
  { id: '1a2b3c4d', name: 'Camiseta Básica', color: 'Branca', size: 'M',     price: 200 },
  { id: '5e6f7g8h', name: 'Calça Jeans',     color: 'Azul',   size: 'L',     price: 500 },
  { id: '9i0j1k2l', name: 'Bolsa de Couro',  color: 'Marrom', size: 'Único', price: 800 },
  { id: '3m4n5o6p', name: 'Tênis Esportivo', color: 'Preto',  size: '42',    price: 300 },
  { id: '7q8r9s0t', name: 'Vestido Floral',  color: 'Rosa',   size: 'S',     price: 350 }
];

Essa array representa os produtos de um carrinho de compras. Como faço para chegar no valor total dos produtos ao final do carrinho?

Para começar, crio a função callback ainda vazia, e o valor inicial como zero:

function callback(acumulado, produtoAtual) {

}

const initialValue = 0;

const result = products.reduce(callback, initialValue);

Agora preciso somar o valor de todos os produtos:

O acumulado possui o valor inicial na primeira iteração, e o resultado anterior nas próximas
E produtoAtual será, claro, o produto atual
Então basta eu somar o acumulado com o preço do produto atual

function callback(acumulado, produtoAtual) {
  return acumulado + produtoAtual.price
}

const initialValue = 0;

const result = products.reduce(callback, initialValue);

console.log(result); // 2150

E assim verá que o preço total desse carrinho é R$ 2150.

Como falei no começo, o reduce talvez seja um dos métodos mais chatinhos de entender. É difícil decidir o momento de usá-lo, já que é complexo e tem múltiplas possibilidades de uso. Uma dessas complexidades é que o reduce pode funcionar no lugar de outros métodos.

O reduce pode substituir outros métodos de array

Olha que flexível.

Os próximos exemplos servem apenas para você compreender as possibilidades do reduce. Mas em todos eles, você verá que usar o outro método é muito mais simples.

Então muito juízo nos usos e:

Guarde o que foi bom
E jogue fora o que restou

"NX Zero"

Reduce ou map?

O sol nasce, o sapo sapeia, e o map mapeia.

O map é um método Javascript que cria uma array a partir de outra, sem alterar a original.

Para mais detalhes, veja esse artigo sobre map que escrevi no blog.

Com o map, vou pegar uma array com personagens de Dragon Ball, e colocar o nome deles em caixa alta. Mas apenas dos personagens da raça terráqueo:

const characters = [
  { name: 'Goku',        race: 'saiyajin'     },
  { name: 'Cell',        race: 'android'      },
  { name: 'Kuririn',     race: 'terráqueo'    },
  { name: 'Bulma',       race: 'terráqueo'    },
  { name: 'Vegeta',      race: 'saiyajin'     },
  { name: 'Mestre Kame', race: 'terráqueo'    },
  { name: 'Kami-Sama',   race: 'namekuseijin' }
];

const result = characters.map(function(character) {
  if (character.race === 'terráqueo') {
    return {
      name: character.name.toUpperCase(),
      race: character.race
    };
  } else {
    return {
      name: character.name,
      race: character.race
    };
  }  
});

console.log(result);

/*
  [
    { "name": "Goku",        "race": "saiyajin"     },
    { "name": "Cell",        "race": "android"      },
    { "name": "KURIRIN",     "race": "terráqueo"    },
    { "name": "BULMA",       "race": "terráqueo"    },
    { "name": "Vegeta",      "race": "saiyajin"     },
    { "name": "MESTRE KAME", "race": "terráqueo"    },
    { "name": "Kami-Sama",   "race": "namekuseijin" }
  ]
*/

Eu apenas verifico se a raça do personagem é terráqueo e faço a operação character.name.toUpperCase(). Caso contrário, retorno os dados originais.

É possível fazer o mesmo com reduce:

function callback(acumulado, atual) {
  if (atual.race === 'terráqueo') {
    acumulado.push({
      name: atual.name.toUpperCase(),
      race: atual.race
    })
  } else {
    acumulado.push({
      name: atual.name,
      race: atual.race
    })
  }

  return acumulado;
}

const initialValue = [];

const result = characters.reduce(callback, initialValue);

O resultado será exatamente o mesmo. Mas quais as diferenças?

Primeiro, como o resultado será uma array, o initialValue é uma array vazia
No começo da função callback, eu faço a mesma verificação de antes atual.race === 'terráqueo'. Mas agora em vez de retornar isso, eu faço um .push() para dentro da array com os resultados
Por fim, retorno o acumulado para que a próxima iteração tenha esse valor para continuar incrementando

Como você pode ver, o map é muito mais simples. Sem contar que é possível aplicar um arrow function e early return para deixar mais simples ainda.

Assim como é possível mapear uma array com o reduce, também é possível filtrar.

Reduce ou filter?

O filter é realmente um filtro, tipo o filtro de café.

Ele filtra uma array e retorna uma lista apenas com os itens que atendem aos requisitos que você definiu.

Veja mais detalhes nesse artigo de como simplificar sua lógica com arrays com o método filter.

Por exemplo, se você tiver uma array com dados de frutas, é possível filtrar e ficar apenas com a vermelhas:

const fruits = [
  { name: 'Maçã',    color: 'Vermelha' },
  { name: 'Manga',   color: 'Amarela'  },
  { name: 'Banana',  color: 'Amarela'  },
  { name: 'Laranja', color: 'Laranja'  },
  { name: 'Uva',     color: 'Roxa'     },
  { name: 'Pera',    color: 'Amarela'  },
  { name: 'Morango', color: 'Vermelha' },
  { name: 'Abacaxi', color: 'Amarela'  },
  { name: 'Kiwi',    color: 'Verde'    },
  { name: 'Cereja',  color: 'Vermelha' }
];

const result = fruits.filter(function(fruit) {
  if (fruit.color === 'Vermelha') {
    return true;
  } else {
    return false;
  }
});

console.log(result);

/*
[
  { "name": "Maçã",    "color": "Vermelha" },
  { "name": "Morango", "color": "Vermelha" },
  { "name": "Cereja",  "color": "Vermelha" }
]
*/

Como previsto, o reduce pode fazer o mesmo:

function callback(acumulado, atual) {
  if (atual.color === 'Vermelha') {
    acumulado.push(atual)
  }

  return acumulado;
}

const initialValue = [];

const result = fruits.reduce(callback, initialValue);

Como o reduce faz isso:

Novamente existe o valor inicial com uma array vazia. Mesmo que o resultado contenha zero ou 1 item, a lógica é sempre começar com uma array esse tipo de desafio
A função callback verifica se a fruta é da cor vermelha
- Se sim, insere ela no acumulado e retorna
- Caso contrário, retorna o acumulado sem adicionar nada, isso acontece com as outras cores de frutas. Por isso a saída final tem menos itens que a array original

Os métodos map e filter sempre retornam uma array, então é fácil imaginar que o valor inicial é uma array vazia. Mas agora os exemplos são com métodos que não, necessariamente, retornam um array.

Reduce ou find?

Esse método é o "CTRL + F" do Javascript.

O find encontra o primeiro item dentro de uma array que atende a um ou mais critérios e retorna esse item.

Veja como ele faz isso, vou usar a mesma array de produtos de antes:

const products = [
  { id: '1a2b3c4d', name: 'Camiseta Básica', color: 'Branca', size: 'M',     price: 200 },
  { id: '5e6f7g8h', name: 'Calça Jeans',     color: 'Azul',   size: 'L',     price: 500 },
  { id: '9i0j1k2l', name: 'Bolsa de Couro',  color: 'Marrom', size: 'Único', price: 800 },
  { id: '3m4n5o6p', name: 'Tênis Esportivo', color: 'Preto',  size: '42',    price: 300 },
  { id: '7q8r9s0t', name: 'Vestido Floral',  color: 'Rosa',   size: 'S',     price: 350 }
];

const result = products.find(function(product) {
  if (product.id === '3m4n5o6p') {
    return true;
  } else {
    return false;
  }
});

console.log(result);

/*
  {
    id: '3m4n5o6p',
    name: 'Tênis Esportivo',
    color: 'Preto',
    size: '42',
    weight: 300,
    availability: true
  }
*/

Ele encontra o primeiro que possui a propriedade id igual a 3m4n5o6p. Após isso, ele finaliza a execução.

E como o reduce faria isso?

function callback(resultado, atual) {
  if (atual.id === '3m4n5o6p') {
    return atual;
  } else {
    return resultado;
  }
}

const result = products.reduce(callback, null);

Algumas decisões que tomei:

O valor inicial é undefined, isso porque se o produto não for encontrado, esse será o valor final
Mudei o nome do parâmetro de acumulado para resultado, pois ela acumula dados a cada iteração
Dentro da função callback, se o produto atual tiver o ID desejado, retorno ele, caso contrário retorno o resultado
A execução só cairá no if uma vez (com o produto certo) e no else em todas as outras

Veja mais uma versatilidade do reduce, retornar apenas um dos itens da array, e não uma array de itens.

Reduce ou every?

Every em inglês: todo ou toda.

O every responde (com true ou false) se todos os itens de uma array atendem aos requisitos. Confira aqui no artigo completo sobre every.

Vou usar uma array com dados de cidades para mostrar do que o every é capaz:

const maioresCidadesBrasil = [
  { nome: 'São Paulo',      estado: 'SP', area: 1521   },
  { nome: 'Rio de Janeiro', estado: 'RJ', area: 1200   },
  { nome: 'Brasília',       estado: 'DF', area: 5800   },
  { nome: 'Salvador',       estado: 'BA', area: 706    },
  { nome: 'Fortaleza',      estado: 'CE', area: 314    },
  { nome: 'Belo Horizonte', estado: 'MG', area: 331    },
  { nome: 'Manaus',         estado: 'AM', area: 11400  },
  { nome: 'Curitiba',       estado: 'PR', area: 435    },
  { nome: 'Recife',         estado: 'PE', area: 218    },
  { nome: 'Porto Alegre',   estado: 'RS', area: 496    }
];

const result = maioresCidadesBrasil.every(function(cidade) {
  if (cidade.area > 300) {
    return true;
  } else {
    return false;
  }
});

console.log(result); // false

Esse exemplo mostra como verificar se todas as cidades de uma array possuem área maior que 300 mil km².

A resposta final é false. Mas se você trocar o if (cidade.area > 300) para if (cidade.area > 200) verá que o resultado muda para true.

Nesse momento o reduce diz "essa é muito fácil, manda outra mais difícil":

function callback(acumulado, cidade) {
  const areaMaiorQue300 = cidade.area > 300;
  return acumulado && areaMaiorQue300;
}

const result = maioresCidadesBrasil.reduce(callback, true);

A estrutura aqui ficou um pouco diferente:

O valor inicial é true, ou seja, eu parto do princípio que todas as cidades tem área acima de 300 mil km². Pois basta que uma cidade não tenha para o resultado final ser false
Crio a const areaMaiorQue300 que possui um valor booleano
É na linha do return que está o segredo. Eu retorno uma operação lógica que tem dois valores booleanos separados por um &&. Se ambos os valores forem true, a resposta é true. Basta que um dos valores seja false para mudar o resultado até a última iteração

Se o reduce ficou mais simples que o outro método? Difícil responder.

Reduce ou some?

Some em inglês: algum ou alguma.

O some afirma se pelo menos um item de uma array atende aos requisitos. Muito parecido com o every.

Vou pegar como exemplo a mesma array de cidades do every. O some pode responder perguntas como "entre as 10 maiores cidades do Brasil, existe alguma da Bahia (BA)?":

const result = maioresCidadesBrasil.some(function(cidade) {
  if (cidade.estado === 'BA') {
    return true;
  } else {
    return false;
  }
});

console.log(result); // true

A versão "reduce" do some, é bem parecida com a do every:

function callback(acumulado, cidade) {
  const cidadeDaBahia = cidade.estado === 'BA';
  return acumulado || cidadeDaBahia;
}

const result = maioresCidadesBrasil.reduce(callback, false);

Agora algumas coisas se invertem:

Agora o valor inicial é false, pois basta que uma cidade atenda ao requisito para o resultado final ser true
Na função callback, a const cidadeDaBahia também recebe um valor booleano que corresponde a essa afirmação
O return também é bem parecido. A diferença é que a operação lógica vem com || e não &&

Essas foram as comparações do reduce com outros métodos comuns de array em Javascript.

Até agora, as funções callback dos exemplos receberam apenas dois parâmetros, acumulado e atual. Mas existem 4.

Os 4 parâmetros da função callback

Os outros métodos que mencionei podem receber até 3 parâmetros.

Já no reduce, esse número pode chegar a 4. Assim como mostrei nos exemplos, você pode chamá-los como quiser, mas sempre adapte a cada cenário.

Veja agora os parâmetros.

O parâmetro "acumulado"

Esse parâmetro depende do valor inicial apenas na primeira iteração.

Sem o valor inicial, acumulado é o primeiro item da array. No exemplo abaixo, o valor desse parâmetro é 76:

const numbers = [ 76, 23, 89, 54 ];

const result = numbers.reduce(function(acumulado, atual) {
  // ...
});

Com o valor inicial, acumulado é esse valor. No exemplo abaixo, o valor é 8:

const numbers = [ 76, 23, 89, 54 ];

function callback(acumulado, atual) {
  // ...
}

const initialValue = 8;

const result = numbers.reduce(callback, initialValue);

Da segunda iteração em diante, ele sempre será o retorno da iteração anterior.

O parâmetro "atual"

Esse parâmetro também depende do valor inicial.

Sem esse valor, atual é o segundo item da array, 23:

const numbers = [ 76, 23, 89, 54 ];

const result = numbers.reduce(function(acumulado, atual) {
  // ...
});

Com o valor inicial, atual passa a ser o primeiro item da array, 76:

const numbers = [ 76, 23, 89, 54 ];

function callback(acumulado, atual) {
  // ...
}

const initialValue = 8;

const result = numbers.reduce(callback, initialValue);

Da segunda iteração em diante, ele sempre será o próximo item da array.

O parâmetro "index"

Essa é fácil: ele é um número.

Na primeira iteração, é 0...

Na segunda iteração, é 1...

Na terceira iteração, é 2...

Na quarta iteração, é 3... é isso:

const numbers = [ 76, 23, 89, 54 ];

function callback(acumulado, atual, index) {
  console.log(index);
}

const initialValue = 8;

const result = numbers.reduce(callback, initialValue);

/*
  0
  1
  2
  3
*/

MAS ALTO LÁ!

Se você não fornecer um valor inicial, não existirá o index 0, e começará diretamente no index 1. Isso acontece porque, como falei lá no começo, sem o valor inicial acontece uma iteração a menos:

const numbers = [ 76, 23, 89, 54 ];

function callback(acumulado, atual, index) {
  console.log(index);
}

const result = numbers.reduce(callback);

/*
  1
  2
  3
*/

Você pode usar o parâmetro index para auxiliar em muitos desafios do dia a dia.

Acesse os posts que linkei sobre outros métodos de array. Lá você encontrará diversos exemplo de como usar o parâmetro index.

O parâmetro "array"

Esse é o único parâmetro que não muda de valor.

Ele sempre representa a array que você está iterando. Não recomendo usar esse parâmetro para alterar a array enquanto executa o reduce nela. Apenas faça consultas para outras operações.

Além dos exemplos com o index, nos outros posts você também encontrará desafios com o parâmetro array.

Se você já leu os outros posts dessa série, sabe o que eu sempre digo. Não basta entender o método apenas na teoria, você precisa saber quando aplicar.

Como saber o momento de usar o reduce?

Essa é uma pergunta bem complicada.

Se você leu tudo até agora, primeiramente parabéns. Segundamente, você percebeu que o reduce é um método bastante genérico. Isso porque além de poder substituir outros métodos (map, filter, find, every e some), ele também pode retornar qualquer tipo de dado.

E essa amplitude torna a resposta muito difícil, mas arrisco dizer que para usar o reduce você precisa de 3 coisas.

Você precisa de um dado

Precisar de um dado é algo raro na programação (ironia).

Esse dado pode ser string, number, booleano, objeto ou até outra array.

Mas, já que você precisa manipular dados a todo momento, como saber se deve usar o reduce ou outro método?

Nenhum outro método de array dá conta do problema

Daí sobrou apenas o reduce.

Na minha opinião, quando nenhum outro método de array em Javascript dá conta de gerar esse dado para você, use o reduce.

Ao longo desse post você viu como resolver o mesmo desafio com reduce ou outros métodos. Esses são exemplos onde você não precisa usar o reduce.

Por outro lado, lembra do exemplo de somar o valor total dos produtos em um ecommerce? Esse desafio exige o uso do reduce. Existem outras formas como usar uma iteração com for, mas prefiro a programação funcional.

Porém, existem casos onde depende. Lembra daquele exemplo da array de produtos? E se você precisar dizer se todos os produtos da array possuem preço acima de R$ 300?

Você pode simplesmente:

Usar o reduce
Definir o valor inicial como true
E retornar acumulado && um valor booleano que diz se o produto possui preço acima de R$ 300

const products = [
  { id: '1a2b3c4d', name: 'Camiseta Básica', color: 'Branca', size: 'M',     price: 200 },
  { id: '5e6f7g8h', name: 'Calça Jeans',     color: 'Azul',   size: 'L',     price: 500 },
  { id: '9i0j1k2l', name: 'Bolsa de Couro',  color: 'Marrom', size: 'Único', price: 800 },
  { id: '3m4n5o6p', name: 'Tênis Esportivo', color: 'Preto',  size: '42',    price: 300 },
  { id: '7q8r9s0t', name: 'Vestido Floral',  color: 'Rosa',   size: 'S',     price: 350 }
];

function callback(acumulado, produtoAtual) {
  const produtoAtualAcima300 = produtoAtual.price > 300;
  return acumulado && produtoAtualAcima300;
}

const initialValue = true;
const result = products.reduce(callback, initialValue);
console.log(result); // false

Mas se o reduce for muito complicado, você pode concatenar um map com um every:

O map irá converter a array de produtos em uma array que contém apenas os preços dos produtos
O every vai verificar se essa array contém apenas números acima de 300

const result = products
  .map(produto => produto.price)
  .every(price => price > 300);

console.log(result); // false

Do meu ponto de vista, a lógica é mais fácil de entender, mas exige duas iterações. Já o reduce é mais complicadinho, mas itera uma vez só. Tudo depende.

Você tem uma array em mãos

O último critério para saber se você precisa do reduce é ter uma array.

Isso porque o reduce é um método de array. Não é possível executar ele a partir de uma string, número, booleano ou objeto, a menos que você converta isso para uma array antes.

Callback

Quanta coisa ein...

Recapitulando, o reduce é um método de array em Javascript que reduz uma array a apenas um valor, converte em outra array, manipula, e pode retornar qualquer tipo de dado.

O primeiro parâmetro do reduce é uma função callback que pode receber até 4 parâmetros:

O valor acumulado das últimas iterações
O item atual da array
O index
E a própria array que você está iterando

O segundo parâmetro do reduce é o valor inicial das iterações. Esse é o valor do primeiro parâmetro da função callback na primeira iteração. Se você não informar ele (mas recomendo que sempre faça isso), haverá uma iteração a menos.

Até a penúltima iteração, o retorno da função callback do reduce define qual será o valor do parâmetro acumulado na próxima. Na última, o retorno da função callback é o próprio return do reduce.

O reduce é um método tão flexível, que pode substituir outros métodos de array em Javascript, como:

map
filter
find
every
some

Saber o momento certo de usar o reduce pode ser um pouco complicado. Mas posso dizer que é quando:

Você precisa de um dado
Nenhum outro método Javascript é capaz de gerar esse dado
Esse dado vem de uma array

Se é possível suar ao escrever um texto tão denso e com um tópico tão difícil de explicar, então eu suei escrevendo esse texto haha.

O reduce é um método que exige conhecimento de vários outros tópicos em Javascript para compreender bem. Então se algo ficou complicado, volte aqui depois de um tempo, garanto que você irá perceber coisas novas.

Esse é o último post de uma série de 6 artigos sobre métodos de array em Javascript. Linkei todos os outros 5 foram aqui em algum momento do texto.

Obrigado pela sua leitura. Deixe um comentário se ficou com dúvidas.

Se esse artigo te ajudou de alguma forma, e ficou com vontade de dizer um obrigado, compartilhe com um amigo ou nas redes sociais.

Até a próxima!

Every e some: os métodos de array em Javascript que respondem "sim" ou "não"

deMenezes — Thu, 16 Nov 2023 02:08:50 +0000

Os métodos de array every e some em Javascript servem para responder perguntas com "sim" ou "não", ou "true" e "false". Clique e confira.

Tudo ou pelo menos um.

Essa é a forma mais resumida de explicar o every e some em Javascript:

O método every ("todo" ou "toda" em inglês) responde se todos os itens de uma array atendem aos requisitos
Já o some ("algum" ou "alguma") diz se pelo menos algum item atende aos requisitos

Esse tipo de pergunta é respondida com "sim" ou "não". Ou na programação, true ou false.

Por exemplo, todos os itens da array abaixo estão acima de zero?

const numbers = [ 3, 7, -1, 7, 10 ];

const result = numbers.every(function(number) {
  if (number > 0) {
    return true;
  } else {
    return false;
  }
});

console.log(result); // false

A resposta é false, ou "não", nem todos os números estão abaixo de zero. Se eu removesse o -1, a resposta seria diferente.

Com o some, a lógica é muito parecida. Porém basta que um item atenda aos requisitos para o retorno ser true:

const numbers = [ 3, 7, -1, 7, 10 ];

const result = numbers.some(function(number) {
  if (number > 0) {
    return true;
  } else {
    return false;
  }
});

console.log(result); // true

Nesse caso, quatro dos cinco números da array estão acima de zero, então a resposta é "sim, pelo menos um número está acima de zero".

Veja agora outros detalhes importantes sobre esses métodos.

Every e some em Javascript

Como já falei, esses métodos são muito parecidos.

Então de agora em diante, tudo que você ler se aplica a ambos. A única diferença entre eles já expliquei na introdução, e vou mostrar nos desafios também.

A estrutura desses métodos é receber uma função callback que executa a cada item da array:

const numbers = [ 3, 7, -1, 7, 10 ];

numbers.some(function(number) {
  console.log(number);
});

/* 
  3
  7
  -1
  7
  10
*/

Eles devem "partir" de uma array, já que ela é dona desses métodos:

const numbers = [ 3, 7, -1, 7, 10 ];

numbers.some();

// Ou

numbers.every();

// Ou

[ 3, 7, -1, 7, 10 ].some();

// Ou

[ 3, 7, -1, 7, 10 ].every();

Ou seja: algo que represente uma array + o ponto + o nome do método.

Apesar de haver uma iteração, o every e o some podem não executar em todos os itens.

Every e some podem parar de executar no meio da array

E isso não é por preguiça.

Esses métodos não precisam executar em todos os itens da array. Dependendo dos primeiros resultados, a resposta final não mudará.

Acompanhe esse raciocínio do every:

Já que o every responde se todos os itens da array atendem aos requisitos, se qualquer item não atender, a resposta final já será false. Mesmo que todos os outros sejam true.

const numbers = [ 2, -3, 4, 5, 6 ];

const result = numbers.every(function(number) {
  console.log('O número atual é: ', number);
  if (number > 0) {
    return true;
  } else {
    return false;
  }
});

console.log('O resultado é: ', result);

Esse código mostra no console o número atual a cada iteração. E no final exibe o resultado:

O número atual é: 2
O número atual é: -3
O resultado é: false

Na primeira iteração, number é 2, e tudo bem, já que ele está acima de zero. Porém na segunda iteração (-3), o próximo console já é o resultado final, ou seja, ele não iterou pelos números 4, 5 e 6.

Isso acontece porque, mesmo que todos os outros itens retornem true, já se sabe que nem todos os itens atendem aos requisitos.

Isso acontece porque, mesmo que os próximos itens retornem true, nem todos atendem aos requisitos.

Com o some acontece a mesma coisa:

Já que ele verifica se pelo menos um item da array atende aos requisitos, caso ele encontre um que não atende, não tem porquê continuar a execução.

A array de exemplo abaixo é um pouco diferente mas a lógica do teste com os consoles é a mesma:

const numbers = [ 2, 3, 4, -5, 6 ];

const result = numbers.some(function(number) {
  console.log('O número atual é: ', number);
  if (number < 0) {
    return true;
  } else {
    return false;
  }
});

console.log('O resultado é: ', result);

O resultado final será:

O número atual é: 2
O número atual é: 3
O número atual é: 4
O número atual é: -5
O resultado é: true

Quando o some encontra o primeiro número abaixo de zero (o critério), ele finaliza, já que pelo menos um item atende aos requisitos. É por isso que após o console do -5, vem o resultado, porque o some não iterou no último número, o 6.

Acho que já ficou claro para você, mas o retorno da função callback de every e some é bem importante.

O retorno da função callback de every e some

O retorno sempre é um booleano.

Isso acontece porque e cada iteração, é preciso dizer se o item atende ou não aos requisitos. E isso sempre acontece com um true ou false.

E se eu retornar algo que não é um booleano?

const numbers = [ -1, 0, 1 ];

const result = numbers.every(function(number) {
  return number;
});

console.log(result); // false

Eu retornei o próprio number, e o resultado final foi false. Por quê?!

Quando o retorno não é um booleano explícito, o Javascript converte para poder prosseguir. Essa conversão se chama coerção de tipos.

Veja o que acontece com cada conversão:

const numbers = [ -1, 0, 1 ];

const result = numbers.every(function(number) {
  console.log(number + ' é ' + Boolean(number));
  return number;
});

console.log('O resultado é: ', result);

Adicionei um novo console dentro da função callback para mostrar como fica cada número após a conversão. E olha no que deu:

-1 é true
0 é false
O resultado é: false

O ponto principal é: qualquer número que não seja zero, quando você converte para booleano, vira true. Assim que o every encontrou o zero, ele retornou false e parou a execução.

O mesmo acontece com o some:

const numbers = [ -1, 0, 1 ];

const result = numbers.some(function(number) {
  console.log(number + ' é ' + Boolean(number));
  return number;
});

console.log('O resultado é: ', result);

/*
  -1 é true
  O resultado é: true
*/

Quando o some encontra o -1, que é true após a conversão, ele já finaliza.

Então nunca esqueça: o retorno da função callback de every e some sempre é um booleano.

Em todos os exemplos que dei, a função callback recebeu apenas o número como parâmetro. Mas é possível deixar a brincadeira mais interessante.

Os parâmetros da função callback de every e some

A função callback pode receber até 3 parâmetros:

Item
Index
Array

A partir de agora vou explicar cada um e propor um desafio para fixar bem o conteúdo.

Para isso, vou usar a array abaixo como base para os desafios (a área está em mil km²):

const maioresCidadesBrasil = [
  { nome: 'São Paulo',      estado: 'SP', area: 1521,  fusoHorario: 'UTC-3', clubesFutebol: [ 'Corinthians', 'Palmeiras', 'São Paulo', 'Santos' ] },
  { nome: 'Rio de Janeiro', estado: 'RJ', area: 1200,  fusoHorario: 'UTC-3', clubesFutebol: [ 'Flamengo', 'Fluminense', 'Vasco', 'Botafogo' ]     },
  { nome: 'Brasília',       estado: 'DF', area: 5800,  fusoHorario: 'UTC-3', clubesFutebol: [ 'Brasiliense', 'Gama' ]                             },
  { nome: 'Salvador',       estado: 'BA', area: 706,   fusoHorario: 'UTC-3', clubesFutebol: [ 'Bahia', 'Vitória' ]                                },
  { nome: 'Fortaleza',      estado: 'CE', area: 314,   fusoHorario: 'UTC-3', clubesFutebol: [ 'Ceará', 'Fortaleza' ]                              },
  { nome: 'Belo Horizonte', estado: 'MG', area: 331,   fusoHorario: 'UTC-3', clubesFutebol: [ 'Atlético Mineiro', 'Cruzeiro' ]                    },
  { nome: 'Manaus',         estado: 'AM', area: 11400, fusoHorario: 'UTC-4', clubesFutebol: [ 'Fast Clube' ]                                      },
  { nome: 'Curitiba',       estado: 'PR', area: 435,   fusoHorario: 'UTC-3', clubesFutebol: [ 'Atlético Paranaense', 'Coritiba' ]                 },
  { nome: 'Recife',         estado: 'PE', area: 218,   fusoHorario: 'UTC-3', clubesFutebol: [ 'Náutico', 'Sport' ]                                },
  { nome: 'Porto Alegre',   estado: 'RS', area: 496,   fusoHorario: 'UTC-3', clubesFutebol: [ 'Grêmio', 'Internacional' ]                         }
];

Veja agora cada um dos parâmetros.

Primeiro parâmetro: item

O primeiro parâmetro você já conhece.

É o único obrigatório e usei ele em todos os exemplos até agora. Então resolva esse desafio: todas as 10 maiores cidades do Brasil têm uma área acima de 300 mil km²?

Aqui, basta verificar a propriedade .area:

const result = maioresCidadesBrasil.every(function(cidade) {
  if (cidade.area > 300) {
    return true;
  } else {
    return false;
  }
});

console.log(result); // false

O resultado é false, porque nem todas as cidades possuem área acima de 300 mil km². Recife quebra esse padrão por ter apenas 218 mil km². Agora, se eu alterar o critério para 200 mil Km², o resultado muda:

const result = maioresCidadesBrasil.every(function(cidade) {
  if (cidade.area > 200) {
    return true;
  } else {
    return false;
  }
});

console.log(result); // true

Agora um desafio para resolver com o some: entre as 10 maiores cidades do Brasil, existe alguma da Bahia (BA)?

O interessante desse tipo de teste é que você pode bater o olho na array e descobrir a resposta final. E depois que aplicar o código, fará a prova real (até rimou). Acredito que é muito produtivo aprender assim:

const result = maioresCidadesBrasil.some(function(cidade) {
  if (cidade.estado === 'BA') {
    return true;
  } else {
    return false;
  }
});

console.log(result); // true

Aqui apenas verifico se a propriedade .estado das cidades é igual ao estado da Bahia. Como existe pelo menos um item na array que atende ao requisito, o resultado final é true.

Os desafios foram fáceis? Legal, veja agora o próximo parâmetro.

Segundo parâmetro: index

Ele é um número.

Na primeira iteração seu valor é zero, e a partir das próximas aumenta de 1 em 1.

maioresCidadesBrasil.some(function(cidade, index) {
  console.log(index);
});

/*
  0
  1
  2
  3
  4
  5
  6
  7
  8
  9
*/

O último index é sempre igual à quantidade de itens da array menos 1. É por isso que o último index da array de cidades é 9, pois tem 10 itens.

Esse número é muito útil para várias situações, como por exemplo resolver o próximo desafio: verifique se todas as cidades estão no fuso horário UTC-3, com exceção do item na posição 6.

Quero deixar claro que esse desafio serve apenas para você entender o parâmetro index. Dificilmente você encontrará isso em um projeto real.

Para começar o código, vou criar um if que ignora o item 6 (cidade de Manaus, a única com fuso horário UTC-4). Quando ele vier, retorno true para que ele não altere o resultado final:

const result = maioresCidadesBrasil.every(function(cidade, index) {
  if (index === 6) {
    return true;
  }
});

O código ainda não está pronto, pois preciso lidar com todos os outros itens da array. E para isso vou adicionar um outro if que verifica o fuso horário deles. Se for "UTC-3", retorno true também. Por fim, deixo um return false para todos os outros casos:

const result = maioresCidadesBrasil.every(function(cidade, index) {
  if (index === 6) {
    return true;
  }

  if (cidade.fusoHorario === 'UTC-3') {
    return true;
  }

  return false;
});

console.log(result); // true

O resultado final é true, já que, com exceção de Manaus, todas as outras cidades estão no fuso horário UTC-3. Se você fizer o teste de remover o primeiro if, verá que o resultado final muda para false.

Agora um desafio com o some: descubra se a array tem pelo menos uma cidade que tem apenas um clube de futebol na propriedade clubesFutebol, com exceção do index 6.

O código começa bem parecido com o anterior:

maioresCidadesBrasil.some(function(cidade, index) {
  if (index === 6) {
    return false;
  }
});

Eu verifico se o index é 6, e nesse caso retorno false e não true. Isso porque, caso eu retornasse true, eu não responderia à pergunta do desafio e sim outra pergunta. Que seria a array de cidade tem algum item no índice 6? ou a array de cidades tem pelo menos 7 itens?. E é mais simples responder essas perguntas de outras formas.

Se o index não for 6, então adiciono outro if para verificar quantos times tem a array clubesFutebol. Se for 1, retorno true significa que achei minha resposta e o some finaliza a execução. Ao final deixo um return false para deixar claro que acontece, mas ele é opcional:

const result = maioresCidadesBrasil.some(function(cidade, index) {
  if (index === 6) {
    return false;
  }

 if (cidade.clubesFutebol.length === 1) {
   return true;
 }

  return false;
});

console.log(result); // false

A resposta final é false, porque, com exceção do item no índice 6, todos os outros tem mais de 1 clube na array clubesFutebol. Assim como no exemplo anterior, se você remover o primeiro if, verá que o resultado muda para true. Justamente pela cidade de Manaus que tem apenas o Fast Clube na array.

O index também é importante para outras operações, como descobrir se o item está em uma posição par ou impar na array. Expliquei isso nesse post sobre o método map em Javascript.

Veja agora o último parâmetro da função callback.

Terceiro parâmetro: array

Esse é o único parâmetro que não muda.

Ao longo das iterações, seu valor sempre é a array que você está iterando:

maioresCidadesBrasil.some(function(cidade, index, array) {
  console.log(array) // maioresCidadesBrasil: [ ... ]
});

O código acima escreve no console a array maioresCidadesBrasil a cada iteração. É importante você usar esse parâmetro apenas como consulta para outras operações, e nunca para mudar a array.

Esse último desafio farei apenas com o some: a array possui duas cidades no mesmo estado?

Por favor, muita atenção, isso aqui é muito importante. Num primeiro momento, parece que o some não pode resolver o desafio. Mas é seu trabalho como pessoa programadora transpor o problema de negócio (nesse caso, o desafio) para o código.

Então você pode ler a frase do desafio de outra forma: existe pelo menos uma cidade que tenha o valor da propriedade estado igual a de outra cidade?

Agora que eu coloquei o trecho pelo menos no meio do desafio, ficou mais claro?

Começo o código com a variável quantidade. Ela irá contar quantas cidades fazem parte do mesmo estado da cidade da iteração atual. E isso acontece a cada iteração:

maioresCidadesBrasil.some(function(cidade, index, array) {
  let quantidade = 0;
});

Criei a variável quantidade que vai contar isso para mim. Agora, dentro da função callback vou fazer um for no parâmetro array. Dentro do for, se o estado for igual ao estado da cidade que estou iterando no every, adiciono 1 a essa variável:

maioresCidadesBrasil.some(function(cidade, index, array) {
  let quantidade = 0;

  for (i = 0; i < array.length; i++) {
    if (array[i].estado === cidade.estado) {
      quantidade = quantidade + 1;
    }
  }

  console.log(quantidade); // 1

  return true;
});

No final, eu coloquei um console na variável e um return true, que serve apenas para o every iterar até o final. O console sempre vai me mostrar o valor 1, ou seja, existe apenas uma cidade para cada estado na array. Se você voltar no começo do post para conferir a array, verá que isso está certo.

Logo, é possível prever que o resultado final é false, porque não há duas cidades no mesmo estado. Para confirmar isso vou adicionar o último if no código:

const result = maioresCidadesBrasil.some(function(cidade, index, array) {
  let quantidade = 0;

  for (i = 0; i < array.length; i++) {
    if (array[i].estado === cidade.estado) {
      quantidade = quantidade + 1;
    }
  }

  if (quantidade > 1) {
    return true;
  } else {
    return false;
  }
});

console.log(result); // false

Para você compreender melhor o que aconteceu, mude o estado de alguma cidade para outro já existente. Por exemplo, coloque a propriedade estado de Porto Alegre para "PE". Você verá que o resultado final mudará para true, porque agora sim a array possui duas cidades no mesmo estado.

Como já falei aqui no blog nos outros posts dessa série de métodos de array, não basta saber usar na teoria. É preciso entender o momento certo de aplicar cada um.

Como saber quando usar o every e some em Javascript?

Não é em every momento que esses métodos são úteis, mas isso acontece some vezes.

Para saber que é o momento de usar o every e some em Javascript, siga esses 2 passos.

Responder uma pergunta com "sim" ou "não"

Para começar, esses métodos são úteis em situações onde você precisa de um "sim" ou "não", verdadeiro ou falso, true ou false como resposta.

As perguntas seguem quase sempre esse modelo:

Every: "Todos os itens dessa lista atendem aos requisitos?"
Some: "Pelo menos um item dessa lista atende aos requisitos?"

Perceba que um simples "sim" ou "não" responde essas perguntas.

Isso é um ponto importante porque o retorno de every e some sempre é um booleano.

Você já tem uma array

Every e some são métodos de array, então você precisa de uma para começar.

Não é possível usá-los com string, number ou objeto, a não ser que você os converta em array antes.

Callback

Every e some são métodos de array em Javascript muito importantes.

Eles respondem perguntas com "sim" ou "não", ou true ou false.

O every responde se todos os itens de uma array atendem aos requisitos da função callback. Já o some diz se pelo menos um item da array atende aos requisitos.

Eles podem não iterar até o fim da array. Isso porque a resposta pode chegar antes. Se o every encontrar pelo menos 1 false, a resposta final é false. Da mesma forma, se o some encontrar pelo menos 1 true, a resposta final será true.

O retorno da função callback sempre será um valor booleano. Se o valor que você retornou não for um, o Javascript fará a coerção de tipo para garantir isso.

A função callback tem 3 parâmetros. O item de cada iteração, seu índice e a própria array que você está iterando.

Para saber o momento de usar every e some, preste atenção nesses dois requisitos. Primeiro, eles funcionam em situações onde você precisa responder uma pergunta com "sim" ou "não". E por último, você tem uma array para realizar essa operação.

De todos os artigos sobre métodos de array, esse foi um dos mais legais e mais trabalhosos. Porque foi o único com dois métodos no mesmo texto.

Se você perdeu os outros, veja aqui:

Além desse, ainda sairá o último artigo sobre o método reduce. Então aguarde só mais uns dias :)

Obrigado pela sua leitura.

Ficou com alguma dúvida? Comente abaixo que será um prazer responder.

Se esse artigo te ajudou de alguma forma, e você sentiu vontade de dizer um obrigado, compartilhe com um amigo ou nas suas redes sociais.

Até mais.

O método find e a busca ao modo CTRL + F em JavaScript

deMenezes — Thu, 02 Nov 2023 11:30:05 +0000

O método find em Javascript é um dos mais simples de entender, porque ele funciona muito igual ao atalho CTRL+F

Qual é a melhor ferramenta do mundo?

Claro que é o CTRL + F.

Quase todos os programas que uso (pelo menos os que respeito) permitem fazer uma busca. Seja:

Buscar texto em uma página web
Buscar arquivos ou outras informações em um banco de dados

O próprio VS Code permite buscar um termo em todos os arquivos do projeto atual, é mágico. Aqui tem uma série de atalhos do VS Code, caso você se interesse.

Se esse recurso é familiar para você, vai ser bem fácil entender esse artigo. O find do encontra o primeiro item dentro de uma array que atende a um ou mais critérios e retorna esse item.

Veja um exemplo:

const numbers = [ 0, 3, 1, 6, 3, 7, 5 ];

const result = numbers.find(function(number) {
  if (number > 5) {
    return true;
  } else {
    return false;
  }
});

console.log(result); // 6

Veja que o find não retorna uma array [ 6 ], e sim o item 6 sozinho. Já que 6 é o primeiro item acima de 5, o find retorna ele e pára a execução.

Por outro lado, se a array for composta por outras arrays, é claro que o retorno será uma array:

const arrays = [
  [ 'array de' ,'dois itens' ],
  [ 'array de' ,'três', 'itens' ],
  [ 'array', 'grandona', 'de', '5', 'itens']
];

const result = arrays.find(function(array) {
  if (array.length > 2) {
    return true;
  } else {
    return false;
  }
});

console.log(result); // [ 'array de' ,'três', 'itens' ]

O exemplo acima retorna uma array de 3 itens, porque ele é um item único dentro da array que você executou o find. Só por isso.

Caso você precise de todos os itens em uma array que atenda a um ou mais requisitos, prefira usar o método filter em Javascript. Esse sim vai retornar um array.

Agora que você tem uma visão geral sobre o método find, veja mais alguns pontos importantes.

Estrutura do método find em Javascript

Foco na função callback.

O método find recebe uma função callback como parâmetro, e retorna true quando encontrar o item que procura.

No exemplo da array de números, a função callback é esse trecho:

function(number) {
  if (number > 5) {
    return true;
  } else {
    return false;
  }
}

Perceba que chamei o parâmetro dela de number. A cada iteração, essa variável aponta para um item diferente da array original.

Logo após encontrar o item, o find pára de executar, o que é ótimo para performance. Para mostrar isso, vou colocar um console.log() a cada iteração:

const numbers = [ 0, 3, 1, 6, 3, 7, 5 ];

const result = numbers.find(function(number) {
  console.log('O número atual é: ' + number);
  if (number > 5) {
    return true;
  } else {
    return false;
  }
});

console.log(result);

/* ************************

  O número atual é: 0
  O número atual é: 3
  O número atual é: 1
  O número atual é: 6
  6

************************ */

Repare que o resultado coloca no console apenas os números até o 6, pois é ele que atende ao requisito de ser maior que 5. Durante todos esses consoles, o find caiu no else, ou seja, return false. Assim que o número 6 surgiu, por ser maior que 5 o find caiu no return true e os próximos consoles não executaram.

Percebeu a importância do retorno da função callback? E é dela que vou falar agora.

O retorno da função callback do find

O retorno dela sempre será um booleano.

Isso fica claro nos exemplos, pois sempre coloco return true ou return false. Mas e se eu escrever assim:

const numbers = [ 0, 3, 1, 6, 3, 7, 5 ];

const result = numbers.find(function(number) {
  return number > 6;
});

console.log(result); // 7

Eu não retornei um booleano diretamente, e sim a expressão lógica number > 6. Ou seja, quando a variável number estiver acima de 6, esse será o valor que o find retornará. E o resultado é 7.

E se eu for além:

const numbers = [ 0, 3, 1, 6, 3, 7, 5 ];

const result = numbers.find(function(number) {
  return number;
});

console.log(result); // 3

Ficou um pouco estranho, mas é tranquilo de entender. A linha return number converte a variável number (que é do tipo number) para o tipo boolean, e assim poder funcionar.

Na primeira iteração, acontece return 0, e já que zero é o único "número false", o find prossegue
Na segunda iteração, acontece return 3, que vira "return true", e esse é o resultado

Essa conversão de number para boolean se chama coerção de tipo, um tópico muito importante em Javascript. Recomendo que você estude.

E se o find não encontrar o que deseja? O retorno será undefined.

const numbers = [ 0, 3, 1, 6, 3, 7, 5 ];

const result = numbers.find(function(number) {
  return number > 10;
});

console.log(result); // undefined

Você percebeu que em todos os exemplos, a função callback recebeu apenas 1 parâmetro? Essa função pode receber até 3 parâmetros. E vou mostrar cada um deles agora.

Parâmetros da função callback do find

Hora dos desafios!

Vou deixar um desafio para você entender cada parâmetro que eu explicar. A array abaixo vai servir de exemplo para todos os desafios:

const products = [
  { id: '1a2b3c4d', name: 'Camiseta Básica', color: 'Branca', size: 'M',     weight: 200, availability: true  },
  { id: '5e6f7g8h', name: 'Calça Jeans',     color: 'Azul',   size: 'L',     weight: 500, availability: true  },
  { id: '9i0j1k2l', name: 'Bolsa de Couro',  color: 'Marrom', size: 'Único', weight: 800, availability: false },
  { id: '3m4n5o6p', name: 'Tênis Esportivo', color: 'Preto',  size: '42',    weight: 300, availability: true  },
  { id: '7q8r9s0t', name: 'Vestido Floral',  color: 'Rosa',   size: 'S',     weight: 350, availability: true  }
];

Veja o primeiro parâmetro.

Parâmetro item

Esse parâmetro você já conhece, mas será legal de revisar com um desafio.

Veja: encontre na array de produtos, aquele que tem o ID "3m4n5o6p".

Se você não caiu nesse capítulo do post de paraquedas, já sabe como resolver esse desafio:

const result = products.find(function(product) {
  if (product.id === '3m4n5o6p') {
    return true;
  } else {
    return false;
  }
});

/*
  Ou de uma forma mais curta:
  const result = products.find(product => product.id === '3m4n5o6p');
*/

console.log(result);

/*
  {
    id: '3m4n5o6p',
    name: 'Tênis Esportivo',
    color: 'Preto',
    size: '42',
    weight: 300,
    availability: true
  }
*/

A função callback retorna o primeiro produto que tiver a propriedade id igual a "3m4n5o6p".

Essa aplicação do find é muito comum na vida real: pegar um item através de um identificar único. Veja o exemplo abaixo:

function getProductById(id) {
  return products.find(product => product.id === id);
}

const myProduct = getProductById('9i0j1k2l');

console.log(myProduct);

/*
  {
    id: '9i0j1k2l',
    name: 'Bolsa de Couro',
    color: 'Marrom',
    size: 'Único',
    weight: 800,
    availability: false
  }
*/

O que aconteceu aqui foi o seguinte;

Criei a função getProductByID que pega um produto do banco de dados pelo ID
Essa função recebe um ID específico no parâmetro e usa o método find exatamente como no exemplo anterior
Depois executo essa função com o argumento "9i0j1k2l" e coloco o retorno na variável myProduct
Essa variável recebe as informações do produto Bolsa de Couro

Veja agora o próximo parâmetro do find em Javascript.

Parâmetro index

O parâmetro index é um número, mas não qualquer número.

Na primeira iteração, ele é 0, depois 1, depois 2, depois 3... Você entendeu né?

Ele representa o índice de cada item da array original:

const result = products.find(function(product, index) {
  if (index === 0) {
    return true;
  } else {
    return false;
  }
});

console.log(result);

/*
  {
    id: '1a2b3c4d',
    name: 'Camiseta Básica',
    color: 'Branca',
    size: 'M',
    weight: 200,
    availability: true
  }
*/

O exemplo acima busca o item que tem o index igual a 0. É claro que esse código é desnecessário. Seria mais fácil escrever apenas products[0], mas a intenção é mostrar a aplicação do index.

O desafio agora é: encontre um produto que esteja disponível na loja, porém seu index não pode ser 0 nem 1.

Na vida real, esse tipo de critério é bem difícil de acontecer, mas isso serve para você ver uma das aplicações possíveis do parâmetro index.

Então os critérios são dois:

Produto disponível: vou usar a propriedade available igual a true
Index diferente de 1: vou usar o parâmetro index e !== 0 e !== 1

O código fica assim:

const result = products.find(function(product, index) {
  if (product.availability === true && index !== 0 && index !== 1) {
    return true;
  } else {
    return false;
  }
});

console.log(result);

/*
  {
    id: '3m4n5o6p',
    name: 'Tênis Esportivo',
    color: 'Preto',
    size: '42',
    weight: 300,
    availability: true
  }
*/

Bem parecido com os desafios anteriores. As condições de disponibilidade e índice estão dentro do if, e se o retorno será true ou false depende do resultado dessa operação lógica.

Por fim, veja agora o último parâmetro da função callback do find.

Parâmetro array

Esse é o terceiro parâmetro.

Veja ele no exemplo abaixo:

const result = products.find(function(product, index, array) {

});

Esse parâmetro não varia a cada iteração, ele tem sempre o mesmo valor: a array que você está iterando. Nesse exemplo ele sempre será a lista com as informações dos produtos.

Sugiro que você não use esse parâmetro para alterar a lista, apenas consultá-la para outras operações.

E é aí que entra o desafio: encontre o primeiro item da array que tenha um valor na propriedade availability que nenhum outro item tem. Ou seja, só vai retornar true quando o valor dessa propriedade não se repetir em outro elemento.

Para começar, vou pegar o valor dessa propriedade:

const result = products.find(function(product, index, array) {
  const availability = product.availability;
});

Agora preciso descobrir se o valor de availability em cada iteração é único ou se repete na array. Para isso, vou criar uma variável quantity que irá contar a quantidade desse valor na array:

const result = products.find(function(product, index, array) {
  const availability = product.availability;

  let quantity = 0;
});

Ela inicia em 0, e agora vou incrementar ela. Para isso, vou fazer um for na array e incrementar o valor dessa variável quando o availability dos outros produtos for igual ao atual:

const result = products.find(function(product, index, array) {
  const availability = product.availability;

  let quantity = 0;
  for (let i = 0; i < array.length; i++) {
    if (array[i].availability === availability) {
      quantity = quantity + 1;
    }
  }
  console.log(quantity);
});

Na penúltima linha, coloquei um console para ver o valor dessa variável. O resultado é esse:

Os seja nas duas primeiras iterações (produtos Camiseta Básica e Calça Jeans), o valor da propriedade availability deles se repete 4 vezes na array. Esse valor é true. Na terceira iteração (produto Bolsa de Couro), o valor é 1, porque só existe um produto com availability: false. Na duas últimas iterações, novamente você vê que o número 4 se repete, pois são dois produtos com availability: true, Tênis Esportivo e Vestido Floral.

Logo, o único produto da array que tem um valor na propriedade availability que nenhum outro produto tem, é o da terceira iteração. Ou seja, Bolsa de Couro.

Agora vou fazer a prova real para ver se essa realmente é a resposta do desafio:

const result = products.find(function(product, index, array) {
  const availability = product.availability;

  let quantity = 0;
  for (let i = 0; i < array.length; i++) {
    if (array[i].availability === availability) {
      quantity = quantity + 1;
    }
  }

  if (quantity === 1) {
    return true;
  } else {
    return false;
  }
});

console.log(result);

/*
  {
    id: '9i0j1k2l',
    name: 'Bolsa de Couro',
    color: 'Marrom',
    size: 'Único',
    weight: 800,
    availability: false
  }
*/

E é isso mesmo.

Como sempre digo por aqui, não basta saber a teoria e os comandos das linguagens, é preciso saber o momento de usar.

Quando usar o find

Aqui, não tem muito mistério.

O que você precisa?

A resposta para essa pergunta é "eu preciso de um item de dentro de uma array".

Isso significa que você tem uma array e precisa pegar apenas um item de dentro dela.

Caso você precise de mais de um item, use o método filter.

O que você tem?

Aqui, a resposta é mais óbvia ainda: uma array.

Se você quer um item de dentro de uma array, obviamente precisa ter uma array.

Se você tiver algo que não é uma array, como um objeto, converta para uma array antes .

O item que você precisa é exatamente aquele dentro da array?

A resposta precisa ser sim.

O método find não altera o item. Mas nada impede de você alterá-lo depois que o find terminar de executar.

Callback

Em resumo: é um CTRL + F.

O método find busca e retorna de dentro de uma array o primeiro valor que corresponde aos critérios que você definir. Se não encontrar, o retorno será undefined.

O find retorna sempre o primeiro item, mesmo que mais de um item atenda aos critérios. Se você precisar de mais de um item, use o método filter.

Dentro da função callback você define os critérios e retorna um valor booleano. Se for true, o find retorna aquele valor e finaliza a execução. Se for false, avança para o próximo.

Mesmo que você não retorne um booleano de forma explícita, o Javascript realiza a coerção de tipo para garantir isso.

A função callback recebe até 3 parâmetros:

Item: é o elemento da array daquela iteração
Index: é o índice daquele item, começa em 0 e aumenta em 1 a cada iteração
Array: seu valor é sempre a array que você está iterando

Para saber que é o momento de usar o find, você precisa dar match com esses três requisitos:

Você precisa pegar um item de dentro de uma array
Você já tem essa array "em mãos"
Você precisa daquele item original, sem alterações

O método find do Javascript, além do filter que já mencionei algumas vezes ao longo do post, é muito útil no dia a dia. E minha intenção aqui foi passar de forma direta a grande maioria das possibilidades com ele.

Se esse conteúdo te ajudou, e você sente vontade de dizer um obrigado, compartilhe nas redes sociais ou com algum amigo :)

Até a próxima!

Domine o método Filter e simplifique sua lógica com arrays em Javascript

deMenezes — Tue, 17 Oct 2023 11:38:44 +0000

Você já passou café? Então será fácil aprender a usar o método filter em Javascript para filtrar dados de uma array. Veja como:

Você gosta de café?

Se pelo menos já passou café alguma vez na vida, vai ser bem fácil de entender esse conteúdo. Isso porque o filtro do café faz a mesma coisa que o método filter em Javascript.

Você coloca dentro dele o pó de café e água. Ele segura o pó, e deixa a água passar.

Fim.

O filter em Javascript recebe uma array de elementos e filtra ela:

const ingredientes = [ 'pó de café', 'água' ];

const cafePassado = ingredientes.filter(function(ingrediente) {
  if (ingrediente === 'água') {
    return true;
  } else {
    return false
  }
});

console.log(cafePassado); // [ 'água' ]

É claro que o resultado final não é apenas "água", e sim o café líquido. Mas entendeu né?

Esse é o básico que você precisa saber, continue lendo para entender mais alguns detalhes do filter.

Estrutura do método filter em Javascript

A estrutura desse método é muito parecida com a dos outros métodos de array.

Ao chamar o filter, você informa uma função callback que executa uma vez a cada item da array. No exemplo acima, a função callback é:

function(ingrediente) {
  if (ingrediente === 'água') {
    return true;
  } else {
    return false
  }
}

Um ponto muito importante sobre a função callback é que ela deve retornar um valor booleano: true ou false. Esse retorno depende dos critérios que você quiser. No primeiro exemplo, o critério é o item deve ser igual a 'água'.

Os itens que atenderem aos requisitos farão parte da nova array. Logo:

Se todos os itens retornarem true, a nova array será idêntica à original, inclusive com a mesma quantidade de itens
Se todos os itens retornarem false, a nova array sempre será vazia []
Se houver pelo menos 1 true e 1 false, a nova array será menor que a array original, mas não vazia
A nova array nunca será maior que a original

Você percebeu que o return é algo importante aqui, né? E existe outro detalhe sobre ele.

O return do filter sempre é um booleano

Veja o exemplo abaixo:

const numbers = [ -3, -2, -1, 0, 1, 2, 3 ];

const result = numbers.filter(function(number) {
  return number;
});

console.log(result); // [ -3, -2, -1, 1, 2, 3 ];

No primeiro exemplo fica muito claro que o retorno é um booleano.

Mas por que aqui eu retornei o próprio número? E por que a nova array tem todos os números menos o 0?

O retorno deve ser booleano, mas você não precisa escrever true ou false explicitamente. Caso o valor não seja um booleano, o Javascript converte ele para poder decidir se insere o valor na nova array ou não. Esse processo de conversão se chama coerção de tipo.

Coerção de tipo é quando o Javascript precisa de um tipo de dado, porém você fornece outro tipo. Então ele faz a conversão para que tudo possa funcionar. Isso acontece com vários tipos de dados, e não apenas number ou booleano.

Esse é um assunto complexo e longo, mas importante em Javascript. Recomendo que você estude em algum momento.

Como o filter precisa retornar um booleano, ele converte o valor de number para boolean. Após a conversão, o filter segue com o trabalho.

No exemplo acima da array de números, a linha return number tem os seguintes valores:

return -3; // true
return -2; // true
return -1; // true
return 0;  // false
return 1;  // true
return 2;  // true
return 3;  // true

Mais uma pílula de conhecimento sobre coerção: o Javascript converte zero em false, e os demais números em true. E é por isso que a nova array contém todos os números, menos o 0.

Se você não retornar nada, o resultados será uma array vazia.

Por quê?

Toda função retorna alguma coisa. Se você não retornar nada, a função retorna o valor padrão que é undefined. Durante a coerção de tipo, undefined vira false, e como você já viu, isso gera uma nova array vazia.

E se, enquanto decide que se insere o item na nova array, você quiser aplicar alguma alteração nele?

O filter não altera os itens da array

O filter apenas decide quais itens filtrar ou não, o método não altera eles.

Se você precisa alterar algum valor, precisará conectar o filter com outro método, como por exemplo o map:

const numbers = [ -3, -2, -1, 0, 1, 2, 3 ];

const result = numbers
  .filter(function(number) {
    return number;
  })
  .map(function(number) {
    return number * 2;
  });

console.log(result); // [ -6, -4, -2, 2, 4, 6 ]

O último artigo aqui do blog foi sobre como manipular arrays em Javascript com o map. Recomendo a leitura para uma compreensão mais completa.

O código acima recebe a array de números [ -3, -2, -1, 0, 1, 2, 3 ] e usa o filter para filtrar os números que são true. Depois usa o map para multiplicar cada número restante por 2.

Diferente do filter, o map não faz coerção, porque ele não exige que o retorno seja um booleano. Ele apenas insere o valor que você retornou na nova array.

Agora conheça os três parâmetros da função callback do filter.

Os parâmetros da função callback

Essas são as ferramentas para trabalhar dentro do filter.

As funções callback dos exemplos que dei até agora, receberam apenas 1 parâmetro. Esse parâmetro representa cada item da array original.

Mas a função pode receber até 3 parâmetros, e você pode usar apenas aqueles que precisar.

Vou usar uma array com informações frutas para dar exemplos:

const fruits = [
  { name: 'Maçã',    color: 'Vermelha', weight: 150,  flavor: 'Doce',     format: 'Redonda',   vitamins: ['C', 'A'],  },
  { name: 'Manga',   color: 'Amarela',  weight: 200,  flavor: 'Doce',     format: 'Oval',      vitamins: ['C', 'A'],  },
  { name: 'Banana',  color: 'Amarela',  weight: 120,  flavor: 'Doce',     format: 'Alongada',  vitamins: ['C', 'B6'], },
  { name: 'Laranja', color: 'Laranja',  weight: 180,  flavor: 'Cítrico',  format: 'Redonda',   vitamins: ['C', 'A'],  },
  { name: 'Uva',     color: 'Roxa',     weight: 5,    flavor: 'Doce',     format: 'Esfera',    vitamins: ['C', 'K'],  },
  { name: 'Pera',    color: 'Amarela',  weight: 160,  flavor: 'Doce',     format: 'Pêra',      vitamins: ['C', 'K'],  },
  { name: 'Morango', color: 'Vermelha', weight: 10,   flavor: 'Cítrico',  format: 'Esfera',    vitamins: ['C', 'K'],  },
  { name: 'Abacaxi', color: 'Amarela',  weight: 1000, flavor: 'Cítrico',  format: 'Irregular', vitamins: ['C', 'B6'], },
  { name: 'Kiwi',    color: 'Verde',    weight: 100,  flavor: 'Agridoce', format: 'Oval',      vitamins: ['C', 'K'],  },
  { name: 'Cereja',  color: 'Vermelha', weight: 5,    flavor: 'Doce',     format: 'Esfera',    vitamins: ['C', 'A'],  }
];

Uma rápida explicação:

Essa é uma array de frutas
Cada objeto contém as informações de uma fruta
As informações são nome, cor, peso (em gramas), sabor, formato e uma array de vitaminas daquela fruta

Veja agora exemplos com o primeiro parâmetro.

O parâmetro item

Esse você já está careca de ver.

O desafio aqui é: filtrar apenas as frutas na cor "Vermelha".

Para isso, a primeira coisa é descobrir a cor da fruta daquela iteração:

fruits.filter(function(fruit) {
  const color = fruit.color;
  console.log(color);
});

Agora verifico se é a cor que desejo, e retorno true, caso contrário retorno false:

fruits.filter(function(fruit) {
  const color = fruit.color;

  if (color === 'Vermelha') {
    return true;
  } else {
    return false;
  }
});

E você verá que o resultado é "Maçã", "Morango" e "Cereja", ou seja, frutas vermelhas.

Isso já resolve o desafio. Mas como dica adicional, é possível deixar esse código mais curto:

fruits.filter(fruit => fruit.color === 'Vermelha');

As mudanças que fiz foram as seguintes:

Troquei a declaração normal da função callback para arrow function
Não criei a variável color, em vez disso, usei o valor diretamente em fruit.color
Em vez de retornar um booleano diretamente, retornei fruit.color === 'Vermelha'. Se essa comparação for verdadeira, o retorno será true, senão, será false

O código menor não necessariamente é melhor. Porém conforme você se acostuma com alguns códigos, vai perceber que não precisa escrever um bloco tão grande. Daqui em diante vou escrever o código maior, mas fique à vontade para fazer como quiser.

O segundo desafio é: filtrar frutas de cor "Amarela", sabor "Doce" e que tenha vitamina K.

Você já aprendeu a adicionar uma condição, agora basta adicionar duas:

fruits.filter(function(fruit) {
  const color = fruit.color;
  const vitamins = fruit.vitamins;

  if (color === 'Amarela' && vitamins.includes('K')) {
    return true;
  } else {
    return false;
  }
});

Para verificar a cor, fiz igualzinho ao primeiro desafio. Para verificar as vitaminas, usei o método de array includes que verifica se uma array tem um item.

E o resultado será apenas o objeto da fruta "Pera".

O terceiro e último desafio é: filtrar frutas de cor "Azul".

Ué?! Existe fruta azul? Sim, mas não na array do desafio.

O código você já sabe como é, porém esse desafio serve apenas para mostrar que o filter pode retornar uma array vazia:

fruits.filter(function(fruit) {
  if (fruit.color === 'Azul') {
    return true;
  } else {
    return false;
  }
});

E o resultado é:

[]

O segundo parâmetro que você vai aprender é só um "numerozinho".

O parâmetro index

Esse parâmetro é o índice do item da array.

Ele inicia em 0 e aumenta em 1 a cada iteração:

fruits.filter(function(fruit, index) {
  console.log(index);
});

Esse código mostra no console o index de todos os itens. Como são 10 itens, vai de 0 a 9:

O desafio é: filtrar frutas com formato de "Esfera", desde que seu index seja par.

O código começa assim:

fruits.filter(function(fruit, index) {

});

Tenho em mãos agora o objeto fruit com as informações da fruta, e seu index.

Se eu fizer a operação index % 2 === 0 e o retorno for 0, significa que o número é par. Se retornar 1, o número é impar. Expliquei isso em detalhes no post sobre o método forEach em Javascript.

O desafio propôs duas condições: em relação ao formato e o index par. Veja como isso fica no código:

fruits.filter(function(fruit, index) {
  const format = fruit.format;
  const isEven = index % 2 === 0;

  if (format === 'Oval' && isEven) {
    return true;
  } else {
    return false;
  }
});

O resultado será uma array apenas a fruta "Kiwi". A fruta "Manga" também faria parte, caso não houvesse a condição do index par.

Veja agora o último parâmetro da função callback.

O parâmetro array

Esse é o único parâmetro que não varia.

Ele sempre retorna a array original. Nos exemplos desse post, esse parâmetro é a array fruits, com as informações de todas as frutas.

Esse recurso é bom para quando você precisa de alguma informação da array para decidir se insere o item na nova array.

O primeiro desafio é um exemplo desse uso: filtrar frutas as quais seu formato só apareça 1 vez na lista toda, independente de qual seja esse formato.

Como descobrir se um formato só existe uma vez na lista?

fruits.filter(function(fruit, index, array) {
  const format = fruit.format;

  let formatQuantity = 0;
  let i;

  for (i = 0; i < array.length; i++) {
    if (array[i].format === format) {
      formatQuantity = formatQuantity + 1;
    }
  }

  console.log(`O formato ${format} existe ${formatQuantity} vezes na lista`);
});

Esse código vai te mostrar quantas vezes cada formato se repete na array. E assim será possível ver que apenas os formatos "Alongada", "Pera" e "Irregular" aparecem só uma vez. As outras aparecem duas ou três vezes. Assim você começa a ter uma noção do resultado final.

Agora vou remover os consoles e adicionar o return que não pode faltar:

fruits.filter(function(fruit, index, array) {
  const format = fruit.format;

  let formatQuantity = 0;
  let i;

  for (i = 0; i < array.length; i++) {
    if (array[i].format === format) {
      formatQuantity = formatQuantity + 1;
    }
  }

  if (formatQuantity === 1) {
    return true;
  } else {
    return false;
  }
});

As frutas que o filter adicionou na array final foram:

Banana: formato "Alongada"
Pera: formato "Pera"
Abacaxi: formato "Irregular"

Agora, o último desafio desse artigo, vamos lá: filtrar frutas com mais de 150 gramas, e que essa fruta esteja na primeira metade da lista.

Para resolver isso, você vai precisar usar todos os parâmetros da array.

Vou começar com a informação do peso:

fruits.filter(function(fruit, index, array) {
  const weight = fruit.weight;
});

E como descubro se a fruta está na primeira metade da lista: pelo index.

fruits.filter(function(fruit, index, array) {
  const weight = fruit.weight;
  const firstHalf = (array.length / 2) > (index + 1);
});

A variável firstHalf informa se o item faz parte da primeira metade. Ele verifica se o tamanho da array dividido por 2 (ou seja, sua metade) é maior que o index + 1. O + 1 serve para ajustar o índice, já que ele inicia em zero.

Existem alguns problemas nesse código, como arrays com quantidade impar de itens. Por exemplo: em uma array de 9 itens, o quinto item faz parte da primeira ou segunda metade? Mas esse não é o foco desse artigo, então ignore isso.

O código final fica assim:

fruits.filter(function(fruit, index, array) {
  const weight = fruit.weight;
  const firstHalf = (array.length / 2) > (index + 1);

  if (weight > 150 && firstHalf) {
    return true;
  } else {
    return false;
  }
});

E o resultado será "Manga" e "Laranja". Se não existisse o critério de estar na primeira metade da lista, você também veria "Pera" e "Abacaxi".

Mas apenas explicar como o filter funciona não basta, você precisa saber quando usar.

Como saber se preciso usar o filter

Mesmo que você tenha entendido tudo, é importante perceber o momento de chamar o filter no seu dia a dia.

Então criei uma linha raciocínio que você pode seguir.

Do que você precisa?

Se a resposta for uma array, o filter é um grande candidato.

Isso porque o que o filter retorna é uma array.

Caso você precise de apenas 1 item de dentro da array, o filter não é o melhor método, mas também serve. Veja um exemplo para pegar todas as frutas chamadas "Abacaxi":

const result = fruits.filter(function(fruit) {
  if (fruit.name === "Abacaxi") {
    return true;
  } else {
    return false;
  }
});

console.log(result[0]); // Informações do abacaxi

O "problema" é que esse código retorna uma array com apenas um item, as informações do abacaxi. E para acessá-las você vai precisar usar a notação de colchetes [0].

Quando você precisa pegar apenas 1 item de dentro da array, a melhor forma é usar o método find. Mas isso fica para outro post.

Qual a quantidade de itens que quero na nova array?

Para que o filter seja uma opção, as respostas a essa pergunta devem ser:

Igual à array original
Menor que a array original
Aceito uma array vazia

E nunca pode ser: maior que a array original.

O que você tem?

Se a resposta também for uma array, o filter ganha mais força.

Isso porque como você pode ver na MDN, o filter é um método de array. Não é possível usar ele com objeto ou string, por exemplo.

Cada item na nova array é um clone dele na array original?

Se a resposta for sim, pode usar o filter à vontade.

Como falei no começo do artigo, o filter não altera os itens que ele itera. Ele apenas decide se insere o item ou não. Logo, os itens são clones deles na array original.

Lembre-se que, apesar do filter não alterar nada, você pode conectar ele com um map e "fazer chover" com o Javascript.

Callback

O método filter em Javascript funciona como um filtro de café.

Ele filtra uma array e retorna uma lista apenas com os itens que atendem aos requisitos que você definiu.

Ele recebe como parâmetro uma função callback, e o retorno dessa função define se o item fará parte da nova array (true) ou não (false).

Se você não retornar um booleano, o Javascript faz uma conversão do valor para esse tipo, a conhecida coerção de tipo. Se você não retornar nada, é como se retornasse undefined, ou false, e a nova array ficará vazia.

Ela sempre será:

Idêntica à original
Com menos itens, inclusive zero

O filter não altera os elementos individualmente, apenas decide se insere eles ou não na nova lista. Você pode alterá-los ao conectar o filter com o método map.

A função callback recebe 3 parâmetros:

Item: o próprio elemento da array naquela iteração
Index: um valor que inicia em 0 e aumenta de 1 em 1
Array: a própria array que você está iterando

Para saber se você precisa usar o filter, siga a seguinte linha de raciocínio:

Eu preciso de uma array
A quantidade de itens dessa array deve ser igual ou menor que a original
Tenho uma array em mãos
Cada item na array nova é um clone dela na array original

Seguindo esses passos, rapidamente você terá domínio do método filter.

Ele é extremamente útil no dia a dia. E conforme você pratica, fica mais fácil e legal de usá-lo.

Não tenho dúvida de que aprender o filter tornou meu código mais fácil de ler e direto ao ponto em vários aspectos. E espero que a compreensão do conteúdo possa fazer isso com o seu código também.

Se ficou alguma dúvida, deixe um comentário que será um prazer responder.

E se esse conteúdo te ajudou e você gostaria de dizer um obrigado, compartilhe esse conteúdo nas redes sociais ou mande para um amigo que precise 🤗.

Até a próxima!

Continue estudando:

Transforme arrays em ouro: aprenda a manipular dados com o map() em Javascript

deMenezes — Mon, 09 Oct 2023 11:21:13 +0000

Descubra como usar o map() em Javascript. Manipule arrays e transforme dados com esse método essencial para qualquer pessoa desenvolvedora.

O map é um método Javascript que cria uma array a partir de outra, sem alterar a original.

Fim.

Isso é tudo que você precisa saber. Daqui em diante o que você vai ler é apenas essa explicação inicial em detalhes.

Veja como gerar uma array de strings em caixa alta, a partir de outra em caixa baixa:

const lowercaseNames = [ 'goku', 'bulma', 'kuririn' ];

const uppercaseNames = lowercaseNames.map(function(name) {
  return name.toUpperCase();
});

console.log(uppercaseNames); // [ 'GOKU', 'BULMA', 'KURIRIN' ]

E agora, como gerar uma array com o dobro dos números da array original:

const numbers = [ 5, 8, 3, 6, 7, 2, 5 ];

const double = numbers.map(function(number) {
  return number * 2;
});

console.log(double); // [ 10, 16, 6, 12, 14, 4, 10 ]

Sempre explico alguns termos da programação aqui no blog com a tradução dos comandos.

Mas que diabos é "mapear"?

Por que "map"?

"Mapear" é como criar um mapa que represente algo.

Veja um exemplo. O mapa do Brasil mostra todos os estados e o Distrito Federal. O desenho de cada estado no papel representa aquela região física no Brasil. É como se o mapa fosse uma lista de itens (estados), e cada um deles apontasse para outra coisa em outro lugar:

O desenho do estado do Rio Grande do Sul no mapa representa a região do Rio Grande do Sul na vida real
O desenho do estado de Santa Catarina no mapa representa a região de Santa Catarina na vida real
O desenho do estado do Paraná no mapa representa a região do Paraná na vida real

A região física do país Brasil gera um mapa (desenho em um papel) para representar ela.

O mesmo acontece com um livro. Se você dividir todo o seu conteúdo em uma lista de capítulos, é possível gerar um mapa com o nome do capítulo e a página onde ele começa. Esse mapa se chama sumário.

Isso significa que cada item do sumário representa um capítulo do livro.

E isso é bem parecido com o que o map do Javascript faz. Ele usa uma array original (a região do país ou os capítulos do livro) para gerar uma nova array (o mapa ou o sumário).

Importante: esses exemplos são só exemplos. Você pode considerar o mapa do Brasil como um resumo da região do país Brasil. Pode ver o sumário como um resumo dos capítulos de um livro. Mas o map não gera uma "array resumida", ignore esse ponto.

Agora você já sabe o que o map faz: cria uma array a partir de outra, sem alterar a original.

E o que o map não faz?

O map faz um clone ou transforma uma array?

Tecnicamente não!

Não é certo afirmar que ele faz um clone, porque a intenção não é criar outra array igual, apesar de isso ser possível.

Também não posso dizer que o map transforma uma array em outra, pois ele não altera a original. Isso é a imutabilidade, um dos pilares da programação funcional.

Você pode modificar (ou não) cada item da lista ao colocá-la na nova. Como característica, o map sempre gera uma array com a mesma quantidade de itens que a original. Se você quer criar uma array com menos itens, precisará usar o método filter, mas isso fica para outro artigo.

Agora vamos para a prática.

Veja como fazer o seu primeiro map

Você se lembra do exemplo que dei no início do post?

const lowercaseNames = [ 'goku', 'bulma', 'kuririn' ];

const uppercaseNames = lowercaseNames.map(function(name) {
  return name.toUpperCase();
});

console.log(uppercaseNames); // [ 'GOKU', 'BULMA', 'KURIRIN' ]

Primeiro, criei uma array com vários nomes em caixa baixa (lowercase). Depois, usei o lowercaseNames.map(...) para gerar a nova array, e o resultado disso coloquei na const uppercaseNames.

O map recebe como argumento uma função callback. Declarei essa função assim:

function(name) {
  return name.toUpperCase();
}

Essa função callback vai:

Executar uma vez para cada item da array original
Realizar uma operação com esse item. No caso, transformar em caixa alta com o método de string .toUpperCase()
E colocar o resultado na array nova através do return

Abaixo veja o passo a passo de como isso acontece:

Antes de começar:

- Array original: [ 'goku', 'bulma', 'kuririn' ]
- Array final: []

Primeira iteração:

- Valor original: 'goku'
- Valor retornado: 'GOKU'
- Array final: [ 'GOKU' ]

Segunda iteração:

- Valor original: 'bulma'
- Valor retornado: 'BULMA'
- Array final: [ 'GOKU', 'BULMA' ]

Terceira iteração:

- Valor original: 'kuririn'
- Valor retornado: 'KURIRIN'
- Array final: [ 'GOKU', 'BULMA', 'KURIRIN' ]

Resultado final do map:

- [ 'GOKU', 'BULMA', 'KURIRIN' ]

Assim, cada iteração retorna um valor que vai montando a array final.

Mas será que você é obrigado a declarar esse return?

A palavra return dentro do map

"E sE eU nÃo CoLoCaR rEtUrN?"

Você deveria hehe pois é assim que o map funciona.

Se você não leu um dos últimos posts aqui do blog, eu contei uma história com exemplos de como usar o forEach. Lá eu expliquei que toda função retorna alguma coisa. E quando você não define qual é, a função retorna undefined.

Então respondendo à pergunta, se o map não retorna nada, ele formará a nova array apenas com undefined. E imagino que não seja essa sua intenção:

const lowercaseNames = [ 'goku', 'bulma', 'kuririn' ];

const uppercaseNames = lowercaseNames.map(function(name) {
  const result = name.toUpperCase();
  // sem return
});

console.log(uppercaseNames); // [ undefined, undefined, undefined ]

O map precisa de um retorno, mas não necessariamente da palavra return.

Você pode usar uma arrow function e escrever o mesmo código de exemplo assim:

const uppercaseNames = lowercaseNames.map(name => name.toUpperCase());

Veja agora mais exemplos com o map, bastante comuns no meio corporativo.

Oi, eu sou o Goku!

"Exemplo do mundo corporativo" apenas se você trabalhar com o Akira Toriyama.

Mesmo assim, espero que isso ajuda você a entender o funcionamento do map em Javascript.

Abaixo, você vai ver uma array com os personagens de Dragon Ball e suas raças:

const characters = [
  { name: 'Goku',        race: 'saiyajin'     },
  { name: 'Cell',        race: 'android'      },
  { name: 'Kuririn',     race: 'terráqueo'    },
  { name: 'Bulma',       race: 'terráqueo'    },
  { name: 'Vegeta',      race: 'saiyajin'     },
  { name: 'Mestre Kame', race: 'terráqueo'    },
  { name: 'Kami-Sama',   race: 'namekuseijin' }
];

A partir de agora, vou mostrar 3 formas de usar o map em Javascript com essa array. Em cada uma delas, vou adicionar um parâmetro a mais, para aumentar o nível de complexidade aos poucos.

O primeiro parâmetro do map: item

Ele representa cada item da array original.

Você pode chamar os parâmetros como quiser, mas dar bons nomes para as coisas ajuda demais. Costumo chamá-lo item, algo bem genérico, quando não sei o que tem na array. No primeiro exemplo do post eu usei name ou number.

Aqui, vou chamar de character:

characters.map(function(character) {
  ...
});

Vou mudar o nome dos personagens para caixa alta. Mas não de todos eles, e sim apenas dos personagens terráqueos.

Para isso, preciso descobrir a raça de cada personagem antes através do character.race:

characters.map(function(character) {
  if (character.race === 'terráqueo') {
    // mudar o nome para caixa alta
  } else {
    // retornar dados originais
  }  
});

Agora é preciso dar atenção a três pontos:

Não esquecer do return
Colocar o nome em caixa alta
Caso não seja terráqueo, retornar as informações originais

O if terá um return, e o else terá outro, porque o valor que quero retornar depende da raça. Cada um deles retorna um objeto com as novas informações do personagem. Por enquanto, vou deixar esses objetos iguais para você entender passo a passo:

characters.map(function(character) {
  if (character.race === 'terráqueo') {
    return {
      name: character.name,
      race: character.race
    };
  } else {
    return {
      name: character.name,
      race: character.race
    };
  }  
});

Como quero alterar o nome dos terráqueos, dentro do if eu adiciono o .toUpperCase() no nome, e não altero a raça:

characters.map(function(character) {
  if (character.race === 'terráqueo') {
    return {
      name: character.name.toUpperCase(),
      race: character.race
    };
  } else {
    return {
      name: character.name,
      race: character.race
    };
  }  
});

Dentro do else, o objeto que eu retornei é exatamente igual ao que recebi. Então posso simplificar apenas com return character:

characters.map(function(character) {
  if (character.race === 'terráqueo') {
    return {
      name: character.name.toUpperCase(),
      race: character.race
    };
  } else {
    return character;
  }
});

Se eu remover o else, tornar a função callback em uma arrow function e tirar as chaves do if, posso simplificar mais ainda:

characters.map(character => {
  if (character.race === 'terráqueo') return {
    name: character.name.toUpperCase(),
    race: character.race
  };

  return character;  
});

Simplificar código é um vício, mas estou me tratando (mentira).

Como o map alterou apenas os nomes de Kuririn, Bulma e Mestre Kame, o resultado é esse:

[
  { name: 'Goku', race: 'saiyajin' },
  { name: 'Cell', race: 'android' },
  { name: 'KURIRIN', race: 'terráqueo' },
  { name: 'BULMA', race: 'terráqueo' },
  { name: 'Vegeta', race: 'saiyajin' },
  { name: 'MESTRE KAME', race: 'terráqueo' },
  { name: 'Kami-Sama', race: 'namekuseijin' }
]

Veja agora um exemplo com mais um parâmetro do map.

O segundo parâmetro do map: index

Veja esse código:

characters.map(function(character, index) {
  // ...
});

Perceba que surgiu o parâmetro index. Essa variável inicia em zero, e aumenta em 1 a cada iteração do loop.

characters.map(function(character, index) {
  return index;
});

O código acima não é útil para nada, além de compreender o index:

[ 0, 1, 2, 3, 4, 5, 6, 7, 8 ]

O último index é igual à quantidade de itens do array menos 1. Se a array tem 9 itens, o index vai de 0 a 8 (9 - 1 = 8).

Ok, e agora? O que faço eu da vida?

Parafraseando Tropa de Elite 2, o desafio agora é outro. Quero adicionar em cada personagem uma nova propriedade que informa se seu index é par ou impar.

Vou explicar por partes:

characters.map(function(character, index) {
  if (index % 2 === 0) {
    return 'é par';
  }

  return 'é impar';
});

Caso você não conheça essa técnica, para descobrir se um número é par ou impar, você precisa fazer a operação módulo com o número 2. Se o resultado for zero, ele é par. Se for 1, ele é impar. Expliquei em detalhes nesse capítulo do post anterior sobre forEach.

E o resultado é:

[
  'é par',
  'é impar',
  'é par',
  'é impar',
  'é par',
  'é Impar',
  'é par',
  'é impar',
  'é par'
]

Então agora posso fazer a mesma coisa de antes, vou retornar um valor diferente dependendo do index:

characters.map(function(character, index) {
  if (index % 2 === 0) {
    return {
      name: character.name,
      race: character.race,
      evenOrOdd: 'par'
    };
  }

  return {
    name: character.name,
    race: character.race,
    evenOrOdd: 'impar'
  };
});

Vou simplificar o código novamente.

characters.map((character, index) => ({
  ...character,
  evenOrOdd: index % 2 === 0 ? 'par' : 'impar'
}));

Usei uma arrow function que retorna diretamente as informações do personagem. A linha ...character usa o operador Spread para "espalhar" as informações originais do objeto que recebi. E na linha seguinte apenas adiciono o valor de evenOrOdd.

E o resultado fica assim:

[
  { name: 'Goku', race: 'saiyajin', evenOrOdd: 'par' },
  { name: 'Cell', race: 'android', evenOrOdd: 'impar' },
  { name: 'Kuririn', race: 'terráqueo', evenOrOdd: 'par' },
  { name: 'Bulma', race: 'terráqueo', evenOrOdd: 'impar' },
  { name: 'Vegeta', race: 'saiyajin', evenOrOdd: 'par' },
  { name: 'Mestre Kame', race: 'terráqueo', evenOrOdd: 'impar' },
  { name: 'Kami-Sama', race: 'namekuseijin', evenOrOdd: 'par' }
]

Ficou com alguma dúvida? Volte e execute os códigos acima com alguns consoles, para entender o que acontece em cada linha.

Agora mais um exemplo com o último parâmetro do map.

O terceiro parâmetro do map: array

O único parâmetro estático.

Diferente os parâmetros anteriores, esse não muda a cada iteração. Ele sempre retorna a array original que você está percorrendo.

Não recomendo você usar esse parâmetro para alterar a array dentro do map, e sim consultá-la para fazer outra operação.

O desafio agora é: caso o personagem seja o único daquela raça dentro da array, insira a string Super antes do seu nome.

É possível ver que apenas as raças Android e Namekuseijin possuem um único personagem. Então já dá para ter uma noção de como ficará o resultado.

O código vai começar como nos outros exemplos:

characters.map(function(character, index, array) {
  // ...
});

A primeira coisa a fazer é descobrir a raça de um personagem:

characters.map(function(character, index, array) {
  const race = character.race;
});

Agora: como descobrir quantos personagens existem na array com essa raça?

Isso poderia ser feito com outros métodos específicos, como o reduce. Mas vou mostrar de forma mais imperativa, para simplificar, pois esse não é o objetivo principal. No futuro farei um post para explicar ele em mais detalhes.

Quero alterar apenas nomes de personagens com raças únicas. Logo, a raça de cada personagem do loop deve aparecer na array apenas 1 vez (lembre disso). Ou seja, haverá uma verificação algumValor === 1.
Então vou criar uma variável para contar quantas vezes essa raça aparece:

characters.map(function(character, index, array) {
  const race = character.race;

  let raceQuantity = 0;
});

Obviamente ela começa com o valor 0.

Depois vou usar o forloop para percorrer a array, e adicionar 1 a essa variável, sempre que encontrar outra raça igual:

characters.map(function(character, index, array) {
  const race = character.race;

  let raceQuantity = 0;

  let i;
  for (i = 0; i < array.length; i++) {
    if (array[i].race === race) {
      raceQuantity = raceQuantity + 1;
    }
  }
});

A variável raceQuantity nunca será 0, porque sempre existirá pelo menos um personagem daquela raça na array.

Então eu verifico se essa variável é igual a 1 (lembrou?), ou seja, aquela raça aparece apenas uma vez na array. Então, adiciono o 'Super ' antes do nome. Caso contrário, apenas retorno os dados originais do personagem.

characters.map(function(character, index, array) {
  const race = character.race;

  let raceQuantity = 0;

  let i;
  for (i = 0; i < array.length; i++) {
    if (array[i].race === race) raceQuantity++;
  }

  if (raceQuantity === 1) {
    return {
      name: 'Super ' + character.name,
      race: character.race
    };
  }

  return character;
});

E o resultado é:

[
  { name: 'Goku', race: 'saiyajin' },
  { name: 'Super Cell', race: 'android' },
  { name: 'Kuririn', race: 'terráqueo' },
  { name: 'Bulma', race: 'terráqueo' },
  { name: 'Vegeta', race: 'saiyajin' },
  { name: 'Mestre Kame', race: 'terráqueo' },
  { name: 'Super Kami-Sama', race: 'namekuseijin' }
]

Longe de mim dizer que, agora, você já sabe tudo sobre o método map em Javascript. Mas arrisco dizer que agora você consegue resolver pelo menos 90% dos problemas desse tipo.

Legal:

Agora você fecha essa aba do seu navegador...
Vai fazer outra coisa...
Dorme...

E amanhã encontra um problema qualquer, sem saber que o map é a solução. Então agora quero mostrar como descobrir se o map é a ferramenta certa para o seu problema.

Em quais situações você vai precisar usar o map

Não adianta de nada ter um martelo e não saber que, além de pregar, ele também serve para remover pregos. Da mesma forma, não adianta saber toda teoria que expliquei, se no dia a dia você não sabe quando usar. Então quero mostrar como eu penso para concluir que devo usar o método map.

O que eu quero (output)?

Se o que eu quero for uma array, o map está entre as ferramentas possíveis.

Isso porque o que o map te dá (o retorno ou resultado dele) é uma array.

Se você precisa de algo que não é uma array, esqueça o map.

O que eu tenho (input)?

O que tenho em mãos para gerar uma array?

Se a resposta for "eu tenho uma array", sim, o map está novamente entre as opções.

Lembre-se: ele gera uma array a partir de outra. Se você tem uma string ou objeto, vai precisar primeiro converter isso em uma array.

Qual a quantidade de itens da nova array?

A resposta sempre deve ser a mesma quantidade de itens da array original.

Conforme comentei no começo do artigo, o map gera uma array com a mesma quantidade de itens da original. Se a quantidade for maior ou menor, descarte o uso do map. Nesse caso, procure pelo filter, reduce ou até o find.

É possível fazer um mapeamento ou apontamento?

É possível que cada item da minha array atual represente algo na nova array?

Se os dados das duas arrays (a original e a nova) estão relacionados, é possível fazer esse mapeamento.

Um exemplo possível seria pegar uma array de nomes completos, e retornar uma array apenas com os últimos sobrenomes.

Um exemplo impossível seria puxar uma array de produtos do banco de dados, e gerar uma array de clientes que já compraram esse produto. Isso porque cada produto não aponta para apenas um cliente, esses dados são entidades diferentes.

Com esse pensamento, acredito que rapidinho você vai descobrir quando usar o map de forma automática. Hoje em dia ainda penso nesses tópicos, eles nunca me abandonaram.

Callback

O método map em Javascript cria uma array a partir de outra, sem alterar a original.

Você pode por exemplo:

Criar uma array de strings em caixa alta a partir de outra em caixa baixa
Criar uma array de números resultados de uma operação com os números de outra array
Etc

A palavra "map" foi escolhida para esse comando, porque o que ele faz é um mapeamento. Ou seja, cria uma lista de itens onde cada um deles represente um item na lista original.

O map não clona nem transforma nada, ele cria uma array a partir de outra.

É obrigatório retornar um valor dentro da função callback. Caso contrário, o seu map irá te devolver uma lista de undefined.

O primeiro parâmetro da função callback é o item da array original, e ele altera a cada loop.

O segundo parâmetro da função callback é o index. Ele inicia em 0 e aumenta em 1 a cada loop.

O terceiro parâmetro da função callback é a própria array original. Use ela apenas como consulta, não para alterá-la.

Quando se ver em um problema no código, use o raciocínio que mostrei no final:

Se o que você quer é uma array
Se o que você tem é uma array
Se elas têm a mesma quantidade de itens
E se existe uma relação/pareamento entre os dados delas

Provavelmente o map vai resolver o seu problema.

Mais uma vez posso dizer aliviado: eu gostaria MUITO de ter lido uma explicação assim quando comecei a estudar Javascript. Espero ter explicado da melhor forma para você esse tipo de conteúdo.

Caso algo não tenha ficado claro, deixe nos comentários que será o maior prazer te responder.

Obrigado pela sua leitura 😄 um abraço.

Continue estudando:

Codecon Summit 2023: minha primeira Codecon presencial

deMenezes — Wed, 13 Sep 2023 11:21:04 +0000

Veja o que rolou na Codecon Summit 2023, um evento presencial em Joinville Santa Catarina

A Codecon Summit 2023 presencial foi um grande evento.

Ainda esse ano, eu estive presente na Codecon Digital, que foi um evento online.

Agora, veja tudo que rolou de conteúdos e palestras na edição presencial.

Elton Minetto em: developer productivity

Elton Minetto comemorou recentemente os 20 anos do seu blog.

Ele falou sobre produtividade para devs muito além dos atalhos de teclado e snippets de código.

Ele sugeriu a criação de um histórico com datas de tudo que você fez no trabalho. Já ouvi essa dica algumas vezes de pessoas diferentes, e tento aplicar isso de uns meses para cá.

Sobre os momentos de estudo, Elton falou sobre bloquear períodos na sua agenda para estudar ou ler livros. Esses períodos em geral são do tipo "só me chama se algo pegar fogo".

Carolina Pascale Campos e Osvaldo Santana em: processos ruins e dívidas técnicas

Segundo o Google, código ruim induz à baixa qualidade de código. E consequentemente induz à baixa produtividade.

Carolina e Osvaldo definiram código legado como código sem teste ou código difícil de criar testes.

Outro ponto importante foi sobre reunião post mortem. Essas reuniões são feitas após solucionar um grande problema. O objetivo delas é encontrar soluções (e não culpados) e melhoria de processo.

Como você faz revisão de código no seu time?

Se alguém mais experiente faz a revisão de código, ela serve para evitar bugs em produção
Por outro lado, quando alguém mais júnior/sandy revisa o código, a intenção é o aumentar o aprendizado da equipe

Para mais dicas, os palestrantes deixaram a recomendação de um livro que se chama Trabalho Eficaz com Código Legado.

Leticia Coelho e Rafaella Ballerini em: soft skills

Coelho e Ballerini falaram da importância das soft skills.

Antes de começar, definiram hard skills como uma habilidade mais técnica, e que tenha relação com tecnologia. Já as soft skills são características mais difíceis de quantificar.

Uma das opiniões, que inclusive concordo muito, é não colocar soft skills no currículo. Se você escreve "habilidade de liderança", não tem como provar isso. Então é melhor para você trocar isso por alguma experiência que exigiu a sua habilidade de liderança.

Não escreva "sou muito comunicativo" no currículo. Em vez disso, conte um projeto onde sua comunicação foi essencial para atingir algum objetivo.

Luís Fernando Murara e Rodrigo Miguel em: Post mortem

Como mencionei antes, post mortem é uma reunião para encontrar soluções e criar melhorias após um incidente.

É importante você ter alertas de incidentes para seus sistemas. Cada alerta gera uma ação de correção:

Corrigir o que o alerta notificou
Mas se for um falso positivo, a ação é corrigir o próprio alerta

Documentações de post mortem ajudam a entender os alertas, e geram atividades de post mortem. Essas atividades devem ser entregues em um prazo, e o plano de ação deve ser evitar outro incidente.

Pokemaobr

Para fechar, o Rodrigo Pokemaobr fez uma meta palestra. Ou seja, uma palestra sobre palestras.

Segundo ele:

As vantagens de fazer uma palestra são inúmeras:

Aprender: para palestrar, você precisa pesquisar sobre um assunto, logo vai aprender sobre ele
Compartilhar ou ensinar: disseminar esse conhecimento para outras pessoas
Viajar: conhecer outros lugares, cidade e outras pessoas da #bolhadev
Ganhar dinheiro: sim, muitas empresas contratam palestrantes e isso pode ser uma forma de renda
Networking: conhecer pessoas, ajudar elas em projetos, ser ajudado, inclusive em oportunidades profissionais
Melhorar soft skills: melhora a sua comunicação, relação com as pessoas, empatia
Representatividade: se você faz parte de grupos sub-representados, será muito importante para outras pessoas desses grupos verem você lá, para incentivá-los e deixar a área tech cada vez mais diversa
Gerar debates: ao trazer um conteúdo para uma palestra, você pode incentivar as pessoas a debaterem sobre aquele assunto

Para começar a se envolver existem muitas formas. Participe de eventos, assista palestras, converse e conheça os organizadores. Outro ponto que o Rodrigo Pokemaobr mencionou, foi ver a programação dos eventos. Isso pode te trazer ideias de quais temas abordar.

E onde achar eventos para palestrar?

Você pode procurar no Facebook (sim, ele ainda existe e tem muitos grupos por lá). O Telegram também tem muitos canais que falam sobre tecnologias específicas. As próprias pessoas que você conhece nos eventos são uma fonte para descobrir os próximos. Também fique ligado nos links de Call4Papers, que são as inscrições para palestrantes.

Além disso, existem dois links do Github que listam eventos com frequência:

Abacatinhos
E a própria Codecon

Como última dica, eu acompanho o anúncio de novos eventos no Twitter e podcasts.

Por fim, quando for palestrar, pense no tipo de público que vai assistir você. É para uma comunidade? Público mais corporativo? Galera de marketing? São pessoas programadoras com qual senioridade? É um pessoal gamer? Isso vai guiar o seu conteúdo.

Callback

Quer ter acesso a todo esse tipo de conteúdo e experiência?

Comece a participar de eventos e a se conectar com as pessoas. Não precisa ser a Codecon ou algum evento específico, pode ser qualquer um.

Da sua linguagem, plataforma, cidade, online, presencial...

Se não tiver nenhum na sua cidade, crie um evento. Chame as pessoas próximas, crie um servidor no Discord e combine com todos.

Como usar o forEach em Javascript: exemplos detalhados contados em uma história

deMenezes — Mon, 04 Sep 2023 11:21:22 +0000

Nessa história envolvente você vai ver em detalhes exemplos simples e complexos sobre o uso do forEach em Javascript. Não deixe de conferir.

É o seu primeiro dia de trabalho como pessoa desenvolvedora Javascript.

E a sua primeira tarefa é fazer uma alteração em todos os cards de produto de uma página. Esses cards estão em formato de grid:

Durante seus estudos, você descobriu que o forEach executa uma função callback para cada item de uma array:

for: para
each: cada

Essa explicação pode parecer muito ampla, mas é isso mesmo que o forEach é, amplo. Você pode usar ele para fazer muitas coisas, não existe uma só intenção.

Um erro muito comum é achar que ele serve apenas para alterar cada item da array. O forEach também pode usar cada um deles para fazer outro tipo de alteração.

const names = [ 'andre', 'marcus', 'mario' ];

names.forEach(function(name) {
  console.log(name);
});

No exemplo acima, o forEach escreve cada nome na lista no console.

Depois de revisar o forEach, você pega os cards com document.getElementsByClassName('product-card'), coloca em uma variável e usa o forEach. Malandramente, você usa um console para saber se tudo ocorreu bem:

const productCards = document.getElementsByClassName('product-card');

productCards.forEach(function(card) {
  console.log(card);
});

Até que BOOM!!

Uncaught TypeError: document.getElementsByClassName(...).forEach is not a function

"O que há de errado com essa array?!", você pensa.

Antes de mais nada, isso não é uma array, é um HTMLCollection. Existem alguns tipos de listas iteráveis no Javascript além da array. E de todos eles, apenas array e nodelist possuem o método forEach.

Eu escrevi um post no blog sobre array, nodelist, HTMLCollection e outros iteráveis em Javascript. É importante ler para entender essa diferença.

Antes de prosseguir, saiba que esse post faz parte de uma série de 7 artigos sobre os principais métodos de array em Javascript. Vou postar os próximos na sequência aqui no blog.

Veja agora a solução desse caso.

O método forEach

O método forEach existe tanto em array, quanto em nodelist.

Se você leu o artigo sobre os iteráveis em Javascript, percebeu que a solução não é tão complicada:

O método getElementsByClassName retorna um HTMLCollection
Já o querySelectorAll retorna um nodelist

Então você precisa mudar a forma de pegar elementos da DOM:

const productCards = document.querySelectorAll('.product-card');

productCards.forEach(function(card) {
  console.log(card);
});

Agora sim, nada de erros. Então você remove o console e começa a alteração de verdade. Não vou me aprofundar no tipo de alteração:

const productCards = document.querySelectorAll('.product-card');

productCards.forEach(function(card) {
  fazerAlteracao(card);
});

Show de bola. Tudo perfeito para uma primeira manhã de trabalho.

Você vai para o almoço tranquilo, já que finalizou a sua primeira tarefa. Mas na volta, outra pauta surge no Jira.

O parâmetro index da função callback

O desafio agora é outro, mas ainda no grid de produtos.

Esse grid tem 5 cards de produto por linha. E agora a pessoa PO decidiu que o último produto de cada linha terá um estilo diferente.

Como aplicar esse estilo apenas no último produto de cada linha?

Para corrigir, você precisa lembrar que o forEach recebe uma função como parâmetro . Essa função se chama callback, um nome bonito para descrever uma função que você informa como argumento para outra função.

Essa callback pode receber um segundo parâmetro, ele geralmente se chama index:

const productCards = document.querySelectorAll('.product-card');

productCards.forEach(function(card, index) {
  // ...
});

Index é o índice daquele item dentro da array, e esse valor inicia em zero.

Por exemplo, se você executar o código abaixo:

const items = [ 'teclado', 'mouse', 'monitor', 'mesa' ];

items.forEach(function(item, index) {
  console.log('Item: ' + item);
  console.log('Index: ' + index);
  console.log('---');
});

Receberá o seguinte resultado:

Item: teclado
Index: 0
---
Item: mouse
Index: 1
---
Item: monitor
Index: 2
---
Item: mesa
Index: 3
---

O índice será fundamental para criar um estilo diferente para alguns cards do grid.

Se cada item da lista tem um index, cada card de produto no grid também tem:

Os cards da primeira fileira têm o index 0, 5, 10...
Os cards da segunda fileira têm o index 1, 6, 11...
Os cards da terceira fileira têm o index 2, 7, 12...
Os cards da quarta fileira têm o index 3, 8, 13...
Os cards da quinta fileira têm o index 4, 9, 14...

O foco está nos índices 4, 9, 14... Agora, como alterar apenas eles? Após muito Google, Stackoverflow e lágrimas, você descobre o operador módulo (%) que retorna o resto da divisão. Exemplos:

3 % 2 = 1 (três dividido por dois dá 1 e sobra 1)
9 % 5 = 4 (nove dividido por cinco dá 1 e sobra 4)
12 % 5 = 2 (doze dividido por cinco dá 2 e sobra 2)

Após mais alguns testes, você descobre que se usar eles com módulo em 5, o resultado é sempre o mesmo, 4:

4 % 5 = 4 (quatro dividido por cinco dá 0 e sobra 4)
9 % 5 = 4 (nove dividido por cinco dá 1 e sobra 4)
14 % 5 = 4 (quatorze dividido por cinco dá 2 e sobra 4)

Não importa quanto dá, ou seja, o resultado, e sim quanto sobra no final da divisão.

O número 5 funciona aqui, porque ele é a quantidade de cards por linha.

Lembra como estava a sua função antes? Veja como ela fica agora:

const productCards = document.querySelectorAll('.product-card');

productCards.forEach(function(card, index) {
  if (index % 5 === 4) {
    // alterar o estilo ao adicionar uma classe
    card.classList.add('alternate-style');
  } else {
    // não alterar o estilo
  }
});

Tudo está perfeito... até que o requisito muda...

O parâmetro array da função callback

Agora tudo mudou.

Eles não querem mais alterar o estilo do último card de cada linha. E sim alterar o estilo da segunda metade dos cards. What?!

Sim, se o grid tiver 16 produtos, você deve alterar o estilo dos últimos 8. Ignore por enquanto casos de grids com número ímpar de cards.

Legal, e agora?

Além dos parâmetros item e index, a função callback também pode receber o terceiro e último parâmetro. Ele geralmente se chama array e retorna a própria lista que você está iterando.

No exemplo abaixo:

const items = [ 'teclado', 'mouse', 'monitor', 'mesa' ];

items.forEach(function(item, index, array) {
  console.log('---');
  console.log('item:', item);
  console.log('index:', index);
  console.log('array:', array);
});

O resultado é:

---
item: teclado
index: 0
array: (4) ['teclado', 'mouse', 'monitor', 'mesa']
---
item: mouse
index: 1
array: (4) ['teclado', 'mouse', 'monitor', 'mesa']
---
item: monitor
index: 2
array: (4) ['teclado', 'mouse', 'monitor', 'mesa']
---
item: mesa
index: 3
array: (4) ['teclado', 'mouse', 'monitor', 'mesa']

Se você voltar agora para o exemplo do grid, pode usar esse parâmetro a seu favor.

Se você acessar array.length, vai receber a quantidade de itens da array. Se dividir por 2, estará mais perto ainda do resultado. Veja como fica:

const productCards = document.querySelectorAll('.product-card');

productCards.forEach(function(card, index, array) {
  const half = (array.length - 1) / 2;

  if (index > half) {
    // alterar o estilo ao adicionar uma classe
    card.classList.add('alternate-style');
  } else {
    // não alterar o estilo
  }
});

Aqui você descobre qual é o número que representa a metade da quantidade de itens da array (half). Depois verifica se o index atual é maior do que isso. Se sim, altera o estilo do card.

Apesar de a função callback poder receber 3 parâmetros, dificilmente você usará todos. Arrisco dizer que 90% das tarefas você faz apenas com o primeiro, o item.

Após executar esse último forEach, você deseja pegar o valor dele e fazer alguma operação, porém...

O que o forEach retorna?

O forEach não retorna nada.

Ou melhor, toda função retorna alguma coisa. Mas quando você ouvir que a função não retorna nada, significa que ela retorna undefined. E esse é o caso do forEach:

const list = [ 'qualquer', 'coisa', 'na', 'lista' ];

const result = list.forEach(function(item) {
  // executa alguma coisa com o item
});

console.log(result); // undefined

Logo, você não precisa criar uma variável para receber o retorno dele, pois o retorno não varia.

Como falei no começo, o forEach executa uma função para cada item de uma array, e depois disso ele encerra aquela expressão. Não é possível ligar outros métodos no forEach.

Mas se você realmente precisa de um retorno, não deve usar o forEach, e sim o map. Map é um outro método famoso no Javascript, e será tema do próximo artigo da série sobre os principais métodos Javascript 😬

Callback

Não estou falando da callback do forEach haha

Caso você não saiba, Callback é como eu chamo o capítulo final dos posts. Porque agora é o momento de retomar o que você aprendeu. Então vamos lá.

O forEach é um método Javascript que executa uma função para cada item de uma array ou nodelist.

Ele não serve apenas para alterar cada item de uma lista.

Se você tentar usar esse método com outros tipos de lista, como um HTMLCollection, receberá um erro.

A função callback que você informa para o forEach pode receber três parâmetros. O primeiro é cada um dos itens da lista. O segundo é o índice do item. Ele inicia em zero e avança até o tamanho total da lista menos 1. E o terceiro é a própria array que você está iterando.

O forEach é um método que não retorna nada. Ou melhor dizendo, sempre retorna undefined.

Os problemas que apresentei nesse post servem apenas para fins didáticos. Isso significa que o forEach não é a melhor solução para eles. Se você ainda está no início dos estudos, ignore isso e foque apenas em entender como o forEach funciona.

Esse e os próximos artigos sobre os principais métodos Javascript são muito especiais. Não só porque os projetos exigem o uso deles, mas porque tive uma certa dificuldade para aprender.

Aqui no blog busco explicar de uma forma que você não tenha as mesmas dificuldades que eu tive. Se ficou com alguma dúvida, não deixe de comentar para que eu possa melhorar as explicações cada vez mais.

Obrigado pelo seu tempo e sua leitura 😬.

Continue estudando:

DEV Community: deMenezes

Domine loops em Javascript: como iterar sobre qualquer array e array-like

Ao trabalhar com JavaScript, é importante saber iterar sobre array e array-like. Neste artigo, você aprenderá a dominar loops e iterações.

Por que escrevi "lista" no título do post?

Como iterar sobre qualquer lista em Javascript

O todo poderoso for...of

O seletivo forEach

Arrays: flexibilidade total

Array-like é só isso mesmo?

Converter array like para array

E o for...in?

Callback

O enigma do visually-hidden: mestre da acessibilidade ou sabotador de SEO?

Ao usar a técnica visually-hidden você pode acabar fazendo cloaking e penalizando o seu SEO. Clique e veja como não ser banido pelo Google

O que essa técnica faz?

Melhorar a compreensão do botão "Saiba mais"

Solução 1: colocar mais informações no botão

Solução 2: visually-hidden

Solução 3: aria-label

Visually-hidden impacta o SEO do site?

Aplicar visually-hidden no H1 da página impacta no SEO?

A liderança mandou eu fazer cloaking. E agora?

Estilizar o H1

Oculte o conteúdo com Javascript

O Google baniu ou penalizou meu site e olha no que deu

Callback

Fui na Codecon Summit 2024 e olha no que deu

A Codecon Summit 2024 é um evento de tecnologia que conta com palestras, bate papos, networking, dinâmicas, brindes, bebedeiras... não pera

Como foi a Codecon Summit 2024

Palestras que mais gostei

O tão desejado patinho amarelo

Pós evento

Valeu a pena

De bits a posts: vantagens, desafios e métricas da produção de conteúdo de tecnologia em 2023

Veja como ter ideias para produzir conteúdo de tecnologia, vantagens, desafios e métricas de um blog em 2023.

Como escrevo os posts sobre tecnologia no blog

Planejamento

Criação

Imagens

Revisão

Título

Publicação

Divulgação

Como ter ideias para produzir conteúdo de tecnologia?

Conquistas: o que eu ganhei com tudo isso?

Conhecimento para desenvolver o blog

Conhecimento para escrever os posts

Conhecimento de SEO

Um "quase patrocínio" para ir a um evento

Treino para palestrar

Desafios para produzir conteúdo

O demenezes.dev em números

Acessos

Métricas internas

Callback

Projetos pessoais: 5 dicas para você decidir se deve melhorar ou começar um novo

Você não sabe se melhora o seu projeto pessoal ou começa um novo? Clique e veja essas 5 dicas para analisar com carinho e decidir.

Aprendizado: o quanto você já aprendeu com esse projeto? E quanto ainda pode aprender?

Comunidade: outras pessoas contribuem e usam esse projeto?

Stack: você quer se aprimorar nas tecnologias desse projeto?

Desejo: você tem vontade de continuar com esse projeto?

Retomar o projeto: se eu abandonar agora, como será voltar nele no futuro?

Callback

Quem tem medo do reduce? Entenda esse método agora ou seu dinheiro de volta

Veja os diferentes tipos de operações que o reduce pode aplicar em uma array. Entenda esse método agora, ou devolvo seu dinheiro.

O valor inicial do reduce

O retorno da função callback do reduce

O reduce pode substituir outros métodos de array

Reduce ou map?

Reduce ou filter?

Reduce ou find?

Reduce ou every?

Reduce ou some?

Os 4 parâmetros da função callback

O parâmetro "acumulado"

O parâmetro "atual"

O parâmetro "index"

O parâmetro "array"

Como saber o momento de usar o reduce?

Você precisa de um dado

O todo poderoso `for...of`

O seletivo `forEach`

E o `for...in`?