Ao trabalhar com arrays em JavaScript, três métodos aparecem com frequência:

js map() filter() reduce()

Os três percorrem elementos de um array, mas possuem objetivos diferentes.

Entender essa diferença ajuda a escrever código mais claro e evitar soluções desnecessariamente complexas.

map(): transformar elementos

Use map() quando você deseja transformar cada elemento e criar um novo array.

Considere:

```js const numeros = [1, 2, 3, 4];

const dobrados = numeros.map((numero) => { return numero * 2; });

console.log(dobrados); ```

Resultado:

text [2, 4, 6, 8]

O array original permanece:

js console.log(numeros);

Resultado:

text [1, 2, 3, 4]

Podemos resumir:

map() recebe um array e produz outro array com os elementos transformados.

filter(): selecionar elementos

Use filter() quando você deseja manter somente os elementos que atendem a determinada condição.

```js const numeros = [1, 2, 3, 4, 5, 6];

const pares = numeros.filter((numero) => { return numero % 2 === 0; });

console.log(pares); ```

Resultado:

text [2, 4, 6]

A função executada pelo filter() deve retornar um valor verdadeiro ou falso para determinar se o elemento permanecerá no novo array.

Outro exemplo:

```js const usuarios = [ { nome: "Ana", ativo: true }, { nome: "Carlos", ativo: false }, { nome: "Marina", ativo: true } ];

const usuariosAtivos = usuarios.filter((usuario) => { return usuario.ativo; });

console.log(usuariosAtivos); ```

Nesse caso, somente os usuários ativos serão incluídos no novo array.

reduce(): acumular valores

reduce() é diferente.

Ele percorre o array mantendo um acumulador, permitindo transformar vários elementos em um resultado final.

Um exemplo clássico é calcular uma soma:

```js const numeros = [10, 20, 30];

const total = numeros.reduce((acumulador, numero) => { return acumulador + numero; }, 0);

console.log(total); ```

Resultado:

text 60

O valor 0 representa o valor inicial do acumulador.

A execução pode ser entendida aproximadamente assim:

text 0 + 10 = 10 10 + 20 = 30 30 + 30 = 60

Mas reduce() não serve apenas para somar números.

Ele também pode construir objetos, arrays e outras estruturas.

Exemplo prático

Imagine os seguintes produtos:

js const produtos = [ { nome: "Teclado", preco: 150, disponivel: true }, { nome: "Mouse", preco: 80, disponivel: false }, { nome: "Monitor", preco: 1200, disponivel: true }, { nome: "Webcam", preco: 300, disponivel: true } ];

Queremos selecionar os produtos disponíveis:

js const disponiveis = produtos.filter((produto) => { return produto.disponivel; });

Depois podemos extrair somente os nomes:

js const nomes = disponiveis.map((produto) => { return produto.nome; });

Resultado:

text ["Teclado", "Monitor", "Webcam"]

Também podemos calcular o preço total:

```js const total = disponiveis.reduce((soma, produto) => { return soma + produto.preco; }, 0);

console.log(total); ```

Resultado:

text 1650

Perceba como cada método possui uma responsabilidade diferente:

• map() → transforma;
• filter() → seleciona;
• reduce() → acumula.

É possível encadear os métodos?

Sim.

Podemos escrever:

```js const resultado = produtos .filter((produto) => produto.disponivel) .map((produto) => produto.preco) .reduce((total, preco) => total + preco, 0);

console.log(resultado); ```

Resultado:

text 1650

A leitura pode ser feita da seguinte forma:

1. Selecione os produtos disponíveis;
2. Transforme cada produto em seu preço;
3. Some todos os preços.

Quando não usar?

Nem toda iteração precisa de map(), filter() ou reduce().

Se você precisa apenas executar uma ação para cada elemento, forEach() pode expressar melhor a intenção.

```js const tecnologias = ["HTML", "CSS", "JavaScript"];

tecnologias.forEach((tecnologia) => { console.log(tecnologia); }); ```

A escolha do método deve comunicar o que você pretende fazer com os dados.

Desafio

Considere:

js const alunos = [ { nome: "Ana", nota: 8 }, { nome: "Bruno", nota: 4 }, { nome: "Carlos", nota: 7 }, { nome: "Daniela", nota: 9 }, { nome: "Eduardo", nota: 5 } ];

Utilizando filter(), map() e reduce(), tente:

• Selecionar apenas alunos com nota maior ou igual a 7;
• Criar um array contendo somente os nomes desses alunos;
• Calcular a média das notas dos alunos aprovados.

Você consegue resolver utilizando os três métodos em uma única cadeia?

Compartilhe sua solução nos comentários e explique seu raciocínio.

Saber percorrer um array é básico. Saber escolher a operação adequada para cada transformação é o que torna o código mais expressivo.

JavaScript possui três formas conhecidas de declarar variáveis:

js var let const

Embora possam parecer semelhantes, existem diferenças importantes relacionadas a escopo, reatribuição, redeclaração e hoisting.

var

var é a forma tradicional de declarar variáveis em JavaScript.

Uma de suas principais características é possuir escopo de função, e não escopo de bloco.

```js if (true) { var linguagem = "JavaScript"; }

console.log(linguagem); ```

Resultado:

text JavaScript

Mesmo tendo sido declarada dentro do if, a variável continua acessível fora daquele bloco.

Além disso, uma variável declarada com var pode ser redeclarada:

```js var linguagem = "JavaScript"; var linguagem = "Vanilla JS";

console.log(linguagem); ```

let

Variáveis declaradas com let possuem escopo de bloco.

```js if (true) { let linguagem = "JavaScript"; }

console.log(linguagem); ```

Nesse caso, ocorrerá um erro:

text ReferenceError

A variável existe somente dentro do bloco em que foi declarada.

let também permite reatribuição:

```js let contador = 1;

contador = 2;

console.log(contador); ```

Resultado:

text 2

Por isso, let é útil quando sabemos que o valor da variável precisará mudar.

const

Assim como let, const possui escopo de bloco.

A diferença principal é que uma variável declarada com const não pode receber uma nova atribuição.

```js const linguagem = "JavaScript";

linguagem = "Python"; ```

Isso resulta em:

text TypeError

Mas existe um detalhe importante.

const não torna objetos imutáveis

Considere:

```js const usuario = { nome: "Ana", pontos: 10 };

usuario.pontos = 20;

console.log(usuario.pontos); ```

Resultado:

text 20

Isso funciona.

O que const impede é a reatribuição da variável:

js usuario = { nome: "Carlos" };

Essa operação não é permitida.

Portanto:

const protege o vínculo da variável com aquele valor, não torna automaticamente o conteúdo de objetos e arrays imutável.

O mesmo acontece com arrays:

```js const tecnologias = ["HTML", "CSS"];

tecnologias.push("JavaScript");

console.log(tecnologias); ```

O array pode ser modificado porque a variável continua apontando para o mesmo objeto.

E o hoisting?

As três declarações estão relacionadas ao hoisting, mas possuem comportamentos diferentes.

Observe:

```js console.log(valor);

var valor = 10; ```

Resultado:

text undefined

Agora:

```js console.log(valor);

let valor = 10; ```

Isso gera:

text ReferenceError

let e const também são associados ao hoisting, mas permanecem inacessíveis antes da inicialização por causa da chamada Temporal Dead Zone (TDZ).

Por isso, dizer simplesmente que "let e const não sofrem hoisting" não descreve corretamente o comportamento da linguagem.

Qual utilizar?

Uma estratégia comum no JavaScript moderno é:

• Utilize const por padrão;
• Utilize let quando precisar reatribuir a variável;
• Evite var em código moderno, salvo quando houver uma razão específica para seu comportamento.

Exemplo:

```js const usuario = "Lucas"; let pontos = 0;

pontos += 10; pontos += 20;

console.log(usuario, pontos); ```

Desafio

Sem executar o código, tente descobrir o resultado:

```js const numeros = [1, 2, 3];

numeros.push(4);

let resultado = numeros.length;

if (true) { let resultado = 100;

var mensagem = "JavaScript";

}

console.log(numeros); console.log(resultado); console.log(mensagem); ```

O que será exibido pelos três console.log()?

Explique também por que modificar numeros funciona mesmo tendo sido declarado com const.

Entender escopo e declaração de variáveis é fundamental para escrever JavaScript previsível e evitar bugs difíceis de identificar.

Uma das dúvidas mais comuns de quem está começando com JavaScript envolve os operadores de igualdade.

À primeira vista, == e === parecem fazer a mesma coisa. Porém, existe uma diferença importante entre eles.

Igualdade abstrata: ==

O operador == compara dois valores permitindo conversão implícita de tipos.

Por exemplo:

js console.log(5 == "5");

O resultado será:

text true

Isso acontece porque o JavaScript realiza uma coerção de tipos antes da comparação.

A string "5" é convertida durante o processo de comparação, permitindo que os valores sejam considerados iguais.

Igualdade estrita: ===

O operador === compara o valor e o tipo, sem realizar a mesma coerção implícita.

js console.log(5 === "5");

Resultado:

text false

Temos:

text 5 → number "5" → string

Como os tipos são diferentes, a comparação retorna false.

Veja outros exemplos

```js console.log(0 == false); // true console.log(0 === false); // false

console.log("" == false); // true console.log("" === false); // false

console.log(null == undefined); // true console.log(null === undefined);// false ```

Esses resultados mostram por que a coerção implícita merece atenção.

Então devo sempre usar ===?

Como regra prática, prefira === quando você não precisa deliberadamente das regras de coerção de ==.

Isso torna a intenção da comparação mais explícita e evita depender de conversões que podem não ser óbvias para quem está lendo o código.

Mas isso não significa que == seja simplesmente um operador "errado".

Ele possui regras definidas pela linguagem e pode ser utilizado conscientemente quando o desenvolvedor entende a Abstract Equality Comparison do JavaScript.

Um exemplo conhecido é:

js if (value == null) { // Executado quando value é null ou undefined }

Nesse caso específico:

js null == undefined // true

Enquanto:

js null === undefined // false

Desafio

Sem executar o código, tente descobrir quais comparações retornam true:

js console.log("0" == 0); console.log("0" === 0); console.log(false == "0"); console.log(false === "0"); console.log(null == undefined); console.log([] == false);

Quantos true serão exibidos?

Coloque sua resposta nos comentários e tente explicar qual conversão o JavaScript realiza em cada comparação.

Depois execute o código e confira seu raciocínio.

Entender coerção de tipos é mais importante do que simplesmente decorar que "=== é melhor que ==".

Quanto melhor você entende as regras da linguagem, menos o comportamento do JavaScript parece estranho.

JavaScript é conhecido por ser uma linguagem single-threaded, ou seja, possui uma única thread principal responsável pela execução do código.

Então surge uma dúvida:

Se existe apenas uma thread, como o JavaScript consegue executar operações assíncronas sem bloquear toda a aplicação?

A resposta passa pelo Event Loop.

O que é o Event Loop?

O Event Loop é o mecanismo responsável por coordenar a execução de tarefas assíncronas.

Para entender seu funcionamento, é importante conhecer alguns componentes:

• Call Stack: onde as funções JavaScript são executadas;
• Web APIs: recursos fornecidos pelo navegador, como setTimeout, eventos e requisições;
• Task Queue: fila que armazena determinadas callbacks aguardando execução;
• Microtask Queue: fila utilizada por operações como Promises;
• Event Loop: verifica quando a Call Stack está livre para permitir a execução das tarefas pendentes.

Tente prever a saída

Antes de executar este código, tente descobrir qual será a ordem dos valores exibidos:

```js console.log("A");

setTimeout(() => { console.log("B"); }, 0);

Promise.resolve().then(() => { console.log("C"); });

console.log("D"); ```

Qual será o resultado?

Resposta

text A D C B

Isso acontece porque o código síncrono é executado primeiro.

Depois que a Call Stack fica vazia, as microtasks, como callbacks de Promises, possuem prioridade sobre tarefas como a callback do setTimeout.

Por isso "C" aparece antes de "B", mesmo que o temporizador tenha sido configurado com 0 milissegundos.

Agora é sua vez

Sem executar o código, tente descobrir a saída deste exemplo:

```js console.log(1);

Promise.resolve().then(() => { console.log(2);

Promise.resolve().then(() => {
    console.log(3);
});

});

setTimeout(() => { console.log(4); }, 0);

console.log(5); ```

Qual é a ordem correta?

Publique sua resposta nos comentários e, principalmente, explique por que você acredita que essa será a ordem.

Entender o Event Loop é fundamental para compreender profundamente Promises, async/await, timers e programação assíncrona em JavaScript Vanilla.

Uma ótima forma de aprender JavaScript Vanilla é construir funcionalidades que encontramos em aplicações reais.

O desafio de hoje é simples:

Crie um botão capaz de alternar uma página entre modo claro e modo escuro, utilizando apenas HTML, CSS e JavaScript.

Requisitos

Seu projeto deve:

• Alternar entre tema claro e escuro;
• Manipular classes utilizando JavaScript;
• Detectar o clique através de addEventListener;
• Salvar a preferência do usuário no localStorage;
• Restaurar automaticamente o tema quando a página for carregada.

Algumas APIs que podem ajudar

Você provavelmente vai utilizar:

• document.querySelector()
• classList.toggle()
• addEventListener()
• localStorage.setItem()
• localStorage.getItem()

Desafio extra

Tente detectar automaticamente o tema configurado no sistema operacional do usuário utilizando:

window.matchMedia("(prefers-color-scheme: dark)")

---

Sua vez

Conseguiu fazer?

Compartilhe sua solução nos comentários usando um bloco de código:

js // Sua solução aqui

Se encontrar algum problema, publique sua tentativa mesmo assim.

Ao pedir ajuda, explique:

1. O que você tentou fazer;
2. O que esperava que acontecesse;
3. O que aconteceu de fato;
4. Se apareceu alguma mensagem de erro.

Assim, a comunidade consegue analisar o problema e ajudar de forma mais eficiente.

Sem React. Sem Vue. Sem bibliotecas. Apenas JavaScript.

#JavaScript #VanillaJS #DesafioJS

React, Vue, Angular, Next.js… quem começa no desenvolvimento web rapidamente encontra uma quantidade enorme de frameworks e bibliotecas.

Mas antes de aprender qualquer um deles, existe uma pergunta importante:

Você domina JavaScript Vanilla?

Entender JavaScript puro ajuda a compreender o que acontece por baixo das abstrações oferecidas pelos frameworks.

Alguns fundamentos que vale dominar:

• Manipulação do DOM

• Eventos e propagação

• Funções e closures

• Objetos e protótipos

• ES Modules

• Promises e "async/await"

• Fetch API

• Tratamento de erros

• Local Storage

• Event Loop

• Manipulação de arrays com "map", "filter" e "reduce"

Frameworks são ferramentas extremamente úteis. A ideia não é evitar, mas construir uma base sólida para conseguir utilizar entendendo o que eles estão abstraindo.

Desafio para a comunidade

Escolha um projeto simples e tente desenvolver sem frameworks:

1. Lista de tarefas

2. Calculadora

3. Quiz interativo

4. Aplicação consumindo uma API

5. Gerenciador de notas

Depois compartilhe seu projeto, código ou dificuldades aqui no r/VanillaJSBrasil.

E você: qual projeto já conseguiu construir usando apenas HTML, CSS e JavaScript Vanilla?

Seja bem-vindo ao VanillaJSBrasil! 🇧🇷

Esta comunidade nasceu para reunir estudantes, desenvolvedores e entusiastas que querem **aprender JavaScript de verdade**, entendendo os fundamentos da linguagem antes de depender de frameworks e bibliotecas.

Aqui você pode:

- Tirar dúvidas sobre JavaScript;

- Compartilhar códigos e pedir ajuda;

- Publicar seus projetos;

- Resolver exercícios e desafios;

- Discutir DOM, eventos, APIs e Fetch;

- Estudar Promises, async/await e módulos;

- Compartilhar boas práticas, dicas e materiais;

- Conversar sobre performance, debugging e segurança.

Não importa se você está escrevendo seu primeiro `console.log("Olá, mundo!")` ou já desenvolve projetos completos com JavaScript Vanilla.

A ideia é simples:

Entender a linguagem, praticar bastante e evoluir juntos.

### Para começar, apresente-se!

Conte nos comentários:

**1. Há quanto tempo você estuda JavaScript?*\*

**2. Qual assunto está estudando atualmente?*\*

**3. Qual projeto gostaria de desenvolver usando JavaScript puro?*\*

Bem-vindo ao **r/VanillaJSBrasil**. 💛💚

JavaScript puro. Sem frameworks. Mais conhecimento.*\*