JavaScript: o que é, aplicação e como aprender a linguagem JS🔥

Muito popular entre os desenvolvedores de sites  de Internet, antes de saber o que é JavaScript, devemos compreender que ele se refere a  uma linguagem de programação para a web.

Na prática, é uma linguagem suportada pela maioria dos navegadores mais populares como Google Chrome, Firefox, Safari, Internet Explorer, Edge, Opera, entre outros.

Atualmente, quando falamos em internet móvel, a maioria dos navegadores existentes para smartphones também suportam o uso dessa linguagem.

O que é JavaScript?

É uma linguagem para utilização nos processos de edição, configuração e navegação de páginas na internet.

Geralmente, essa linguagem é utilizada para o aprimoramento de páginas da internet permitindo proporcionar uma experiência melhor para o usuário.

Hoje já é possível usa-lo tanto no front end ou back end, facilitando se tornar um FullStack.

Benefícios

No front end dentre os benefícios gerados, enfatizamos uma melhor experiência de navegabilidade para o internauta, em plataformas de computador pessoal e dispositivos móveis.

O JavaScript oferece também atualização dinâmica de páginas, aprimoramentos da interface do usuário incluindo menus e caixas de diálogo e navegabilidade otimizada para animações, gráficos 2D e 3D, mapas interativos, reprodutores de vídeo e muito mais.

Usado no back end, ganhamos vários benefícios como: Flexibilidade, Leveza, Produtividade da equipe, aplicação em tempo real, entre muitos outros.

Um exemplo comum é uma aplicação de conversa (chat). Tal aplicação exige muito pouco processamento e basicamente consiste em transferir as mensagens de um lado para outro.

A importância da página da internet

A página na internet carrega diferentes elementos visuais, textuais e interativos que podem envolver diferentes linguagem de edição, plugins e extensões para proporcionar acessibilidade e direcionamentos na usabilidade do internauta que visita determinadas páginas de um site.

A tríade da internet

Quando nos referimos à tríade ou tripé da web, podemos considerar os componentes que compõem uma página da web, nesse sentido o JavaScript forma o terceiro componente da tríade, sendo HTML e CSS os outros dois.

Configurações e linguagens

Compreendendo a tríade da web, podemos descrever que o HTML descreve a página , incluindo texto, imagens, entre outros aspectos.

O CSS é utilizado para controlar e personalizar a aparência da página da Web, incluindo cores, fontes e outros atributos.

Nesse conjunto, o JavaScript é utilizado para adicionar um componente dinâmico à página da internet e aproveitar ao máximo elementos na página programável.

A origem

Quando sabemos o que é JavaScript, devemos lembrar que o desenvolvimento da linguagem foi iniciado no ano de 1995, pela Netscape Communications que na época também desenvolviam o extinto navegador “Netscape”.

Na época, verificaram que a adição de uma “linguagem de cola” para aprimorar a experiência do usuário na web aumentaria a aceitação do usuário.

Decidiram convidar o profissional Brendan Eich para incorporar a linguagem de programação no projeto da equipe.

Mas, como a linguagem do Java era muito esperada e necessária para a tecnologia de dados e visualização dos anos 1990, a empresa decidiu tornar a linguagem mais próxima da sintaxe do Java.

A evolução

Ao buscar uma linguagem mais próxima da sintaxe do Java, o resultado foi a criação do JavaScript, com recursos do Scheme, a orientação a objetos do SmallTalk e a sintaxe do Java.

A primeira versão seria lançada em 1995, sob o nome de “Mocha” e, posteriormente, renomeada como LiveScript em setembro de 1995 e novamente renomeada para JavaScript em dezembro de 1995.

Padrão

O produto seria padronizado a partir de 1996. Neste ano, o JavaScript foi enviado à ECMA Internacional para finalização como uma especificação padrão.

Em junho de 1997, a primeira especificação oficial para o idioma foi lançada como “ECMA-262”. A versão mais recente do idioma é “ECMAScript 2017”, lançada em junho de 2017.

Utilidade

Essa linguagem tem muita utilidade para a acessibilidade e navegabilidade do internauta.

A utilidade do Javascript, nele temos:

• Declarar variáveis;
• Armazenar e recuperar valores;
• Definir e chamar funções;
• Definir suas próprias classes;
• Carregar e usar módulos externos.

Ele também permite redigir manipuladores de eventos que respondem ao usuário e outros eventos complexos no processo de programação e aplicação.

Frameworks mais famosos de Javascript: o que são e por que são importantes?

Angular

O Angular é uma plataforma e framework JS de código aberto mantida pelo Google e baseada em TypeScript. É usado para a criação de Single Page Applications (SPAs). Você pode conhecer mais sobre no nossos posts sobre Angular.

VueJs

O VueJs é um framework de código aberto também usado para criar interfaces.

React

O React é uma biblioteca de código aberto em JS mantida pelo Facebook. Ela é usada para criar interfaces com a pessoa usuária. Ela traz o conceito de componentes, que são códigos pequenos e isolados que são usados para compor uma UI.

TypeScript ( super set javascript )

O Typescript é um super conjunto de Javascript que é mantido pela Microsoft e que adiciona tipagem e vários outros recursos à linguagem. Você pode conhecer mais sobre no nossos posts de Typescript.

As áreas da programação em que o JS é usado?

Javascript no desenvolvimento web

Quando falamos de desenvolvimento web no front-end, além do simples Javascript puro, temos também uma infinidade de frameworks. Quem nunca ouviu a brincadeira de “enquanto você está lendo esse post, pelo menos um framework Javascript foi criado”? Isso é porque realmente existem muitos frameworks e estão surgindo novas “ondas” a todo momento.

Javascript no desenvolvimento Backend

Em 2019, o Javascript começou a se popularizar também no backend com a ajuda do NodeJs. Dessa forma, começou a ser muito mais simples para pessoas do frontend se aventurarem no backend e fazerem uma aplicação completa, já que elas não teriam que aprender uma nova linguagem para isso. 

Você usando o Nodejs junto com uma biblioteca como o express, que auxilia com a parte de criar um servidor web, usar algum dos frameworks frontend e um banco de dados da sua escolha, a sua aplicação web já está completa.

Javascript no desenvolvimento mobile

Com a infinidade de frameworks sendo criados com Javascript, não poderíamos esquecer do desenvolvimento mobile. Um dos mais famosos frameworks JS para mobile é o React Native, mas existem outros também como Ionic, NativeScript, Mobile Angular UI, entre outros. 

Javascript no desenvolvimento de games

Uma forma interessante e divertida de você aprender Javascript é através de jogos! E óbvio que o Javascript teria frameworks para ajudar a desenvolver seus jogos para a web. Existe uma página dedicada a esse assunto na MDN.

Outras funções

Em sua utilização, durante o carregamento de uma página da internet pelo navegador da web, existe a análise do HTML e a criação do “DOM” ( Document Object Model ) a partir do conteúdo.

Posteriormente, o DOM apresenta uma visualização ao vivo da página da web no seu código JavaScript.

Para o internauta, o código pode realizar atualizações no DOM e apresentá-lo instantaneamente ao usuário.

O que o navegador consegue fazer?

Com a ajuda dessa linguagem, o navegador de internet proporciona ao usuário que faça o registro de seu código para ser notificado sobre eventos da interface do usuário, como movimento do mouse, clique no botão, entre outras interações.

Ao utilizar esses recursos, o usuário pode criar aplicativos legais para servir a qualquer finalidade.

Hoje ele tem várias libs e frameworks onde conseguimos fazer mágica com ele. Desde apps para celulares até programa para computadores.

A aplicação

Relembrando, quando o navegador carrega uma página da web ele realiza um processo de análise sobre o arquivo HTML da página e cria o DOM. Porém, quando o analisador encontra uma diretiva CSS ou JavaScript esses dados são repassados para o analisador CSS ou ao mecanismo JavaScript, conforme necessário.

Os arquivos

Nesse processo digital, quando aprendemos o que é JavaScript, ele carrega arquivos Java externos e outros códigos embutidos.

Porém, mas não executa o código imediatamente para aguardar a conclusão da análise de HTML e CSS.

Posteriormente, o JavaScript é executado na ordem em que foram encontrados na página da Web. Essa execução envolve variáveis ​​e funções são definidas, chamadas de funções são executadas, manipuladores de eventos.

Geralmente, as atividades resultam na atualização do DOM pelo JavaScript e é renderizado instantaneamente pelo navegador.

Interpretação

Em sua utilização, aprendemos que é uma linguagem de script interpretada do lado do cliente que permite a um webdesigner a capacidade de inserir código em sua página da web.

O JavaScript geralmente é inserido em um arquivo HTML ou ASP e é executado diretamente da página da web e hoje é a linguagem de programação mais popular.

Essa linguagem pode ser utilizada para execução de tarefas mais avançadas, como imprimir a hora e a data, criar um calendário ou outras tarefas que não são possíveis em HTML.

Como executar?

O JavaScript exige apenas o uso de um navegador da Internet com o JavaScript ativado, que todos os navegadores possuem por padrão.

Ou usando o Terminal com o nodeJs instalado.

Ele é seguro?

Anteriormente, relatamos sobre os possíveis riscos na utilização dessa linguagem.

Sim e muito, porém como todas as linguagens de programação podemos ter problemas caso usado para coisas maliciosas.

Como aprender JavaScript

JavaScript é uma linguagem muito popular e geralmente após aprendermos HTML e CSS, vamos iniciar nossa jornada no famoso JS.

Mas como absorver tudo, aprender e sair satisfeito dos estudos? Pois em muitos momentos ao longo dele, nos vemos sem a ideia se realmente estamos aprendendo.

Neste post vou mostrar algumas maneiras que usei e aprendi ao longo da carreira de como estudar, seja JavaScript ou qualquer outra linguagem.

Comece pela teoria

Vamos começar pelo básico, sempre! Precisamos de uma base sólida para nos desbravar no mundo dos códigos, é como se nós fossemos fazer uma casa, precisamos da fundação antes de erguer a casa em si.

Ao longo dos estudos básicos, vamos aprender os tipos, como declarar uma variável e receber valores. Aqui já podemos colocar a mão na massa, vamos mudando os tipos, declarando variáveis e ver como se comporta tudo isso se alterarmos algumas informações nele.

Aplique o que aprendeu

Aqui é a parte onde as pessoas acham que já devem ter a sabedoria suprema da linguagem, o que não é verdade, aplique sempre o que aprendeu em pequenos projetos.

Um exemplo é fazer a famosa calculadora, mas caso você sinta que isso é batido, comece a inventar projetos pequenos, mas lembre-se pequenos, não seja megalomaníaco e queira fazer uma aplicação completa, pois assim você vai se frustrar e acaba perdendo o interesse pela linguagem.

Code uma pequena página, coloque algumas funções nela, como pressionar um botão e mudar de cor, mas tente fazer isso usando o JavaScript ao invés de CSS puro, o que vale nessa etapa é testar teoria e errar com ela, o erro sempre é importante, pois assim nos força a procurar a solução e essa é uma skill muito valiosa para nós desenvolvedores.

Repita o processo

Aqui é onde eu lutei bastante para entender o que acontecia comigo, quando estamos estudando e vendo as informações novas, tudo é muito claro e acabamos achando que já absorvemos tudo aquilo, aí o tombo vem, quando precisamos usar aquele conhecimento de alguns dias atrás em um projeto que estamos codando e nos damos conta que esquecemos tudo, acabamos achando que nada entra em nossa cabeça e pode ser mais um momento que acabamos ficando frustrado.

Mas aí vem o pulo do gato, vamos repetir sempre o que estudamos de três em três dias (pelo menos é como funciona para mim, pode ser que você seja de dois em dois ou cinco em cinco), mas o importante é repetir o processo sempre, não ache que no começo só de ver uma vez já absorvemos aquilo, precisamos reforçar a informação passada para nós.

Então o intuito de fazer anotações e pequenos projetos é o reforço da informação.

Ideias de projetos

Vou deixar algumas ideias de projetos para você começar, alguns são mais complicados e outros mais simples:

• Todo List;
• Jogo da memória;
• Calculadora;
• Cronômetro;
• Ranking.

São algumas ideias básicas, mas com muito conceito por trás de cada projeto, por mais básico que sejam eles, o valor do reforço e a satisfação de terminar um projeto é muito legal.

De tempo ao tempo e entenda o seu momento de vida e aprendizado, não fique se comparando com as pessoas que aprendem mais rápido ou devagar, com persistência e dedicação a gente vai longe, acredite.

Javascript: var, let e const

Uma das primeiras coisas que aprendemos na programação são as variáveis, e quando iniciamos o javascript sabemos que ela é uma linguagem fracamente tipada, ao contrário de outras linguagens como Java, C++, etc.

E para definirmos nossa variáveis no Javascript, utilizamos a palavra chamada var e nela podemos inserir caracteres, números, funções ou objetos.

Sendo fracamente tipada, podemos fazer várias coisas que não podemos fazer em outras linguagens. E isso pode ser muito ruim para nosso aprendizado, mas vamos com calma aprendendo aos poucos.

Var com Javascript

Vou usar um exemplo de uma variável e o que podemos fazer com ela.

//Podemos declarar as variáveis assim
var objeto = {};
var nome = "Dener Troquatte";
var numero = 150;
var lista = ["Maçã", "Banana", "Pêra"];

console.log(nome + numero); // Dener Troquatte 150 ( isso aqui é horrível mas funciona )
console.log(numero + numero); // 300 Isso é muito bom para gerar cálculos

Fora que conseguimos usar o var em um contexto global e isso é muito ruim para alguns casos, podendo nos atrapalhar.

Como o Javascript tem uma determinada forma de identificar os tipos, ele converte um dos tipo deles no outro. Assim realizando a operação. Transforma número em string juntando e criando um texto.

Outro contexto é o famoso Hoisting, que no javascript, podemos declarar nossas variáveis em um contexto global ou não.

Podemos usar uma variável ou funções antes mesmo de declará-las, vou criar um exemplo que vai declarar a função antes mesmo dela existir, você vai entender vendo no código.

//Declarando a função antes dela ser criada
validarDia(new Date());

//Criando a função depois de declara
function validarDia(date){
     return date;
}

É aí onde o hoisting vai atuar, levando nossas funções para o topo do escopo.

//Hoisting Agindo e mudando de posição
function validarDia(date){
return date;
}

//Hoisting Agindo e mudando de posição
validarDia(new Date());

Já no ES6 ( let e const ) ele funciona diferente, eles entram no Tempoaral Dead Zone, este comportamento evita que tenhamos resultados diferentes e estranhos do valor setado, assim evitando dores de cabeça.

Mas essas história que por um lado facilitava mas atrapalhava, vai mudar com o ES6 que já estamos usando nos nossos dias.

Porém com let e const ainda não temos uma linguagem tipada, mas Dener é possível escrever Javascript Tipado chegando perto de alguma outra linguagem?

E a resposta é sim, podemos escrever com a solução mais famosa do mercado que se chama TypeScript que é adotado pelo Angular 2 + e alguns outros frameworks Js como React e Vue vem querendo adotar.

No Backend já existem soluções com TypeScript. Que seu time vai amar ao usar.

Let com Javascript

Basicamente, é a nova forma de declarar variáveis no JavaScript, foi pensando em trazer o escopo de bloco que o ECMAScript 6 destinou-se a disponibilizar essa mesma flexibilidade para a linguagem.

Através da palavra-chave let podemos declarar variáveis com escopo de bloco.

Com isso podemos considerar o let o novo var no javascript. Consideramos usar-lo quando precisamos declarar variáveis que esperamos que mudem com o valor e com o tempo de execução.

Se declaramos ele duas vezes dentro de um escopo, recebemos um erro, bora conferir?

//Bloco 1
//Use isso no escopo do seu código
let saldo = 0;
let deposito = 250;
saldo = saldo + deposito;

console.log(saldo) // Retorno do salto => 250;

//Bloco 2
let saldo = 0;
const saldo = 0;
//Geramos um erro => Uncaught SyntaxError: Identifier 'saldo' has already been declared

//Bloco 3
//Diferente do var que podemos usar mais vezes
var valorTotal = 250;
var valorTotal = 600;

console.log(valorTotal) // Retorno do valor Total => 600;

Usando o var podemos ter problemas futuros na aplicação, alterando valores de um escopo importantes em nosso código.

Const com javascript ( Constantes )

O Const tem uma diferença entre Var e Let, usaremos ele nas variáveis que não esperamo que mudem de valor ao decorrer do tempo de execução.

Um bom exemplo, é o site dos correios, onde podemos guardar o CPF em uma const pois ele é único e não precisamos fazer alterações. =D

//Declaramos o Cpf
const CPF = "000.000.000-00";
// Podemos tentar burlar mas já aviso que um erro iremos tomar

CPF = "100.000.000-00"; // Tentando burlar a const
//E receberemos um erro
//Uncaught SyntaxError: Assignment to constant variable.

Quando for utilizar pense em um cenário imutável onde sempre usaremos o mesmo valor.

Esse erro indica que não podemos alterar ou tentar atribuir valores nesta constante.
Tenha em mente que o const não é exatamente uma variável na prática não é um valor imutável.

Constante: que não muda; inalterável, invariável, fixo.

Podemos salvar vários valores dentro de uma const, porém não podemos alterá-lo.

JavaScript: Veja como usar os métodos: forEach(), map(), filter(), find(), every(), some() e reduce()🔥

O Javascript está em grande crescimento e cada dia que se passa temos métodos auxiliares que nos ajudam todos os dias.

Antes dos novos métodos serem integrados oficialmente, eles eram implementados por bibliotecas externas.

Em 2015 no ECMAScript 6 foi introduzido alguns métodos auxiliares, como:

• forEach();
• map();
• filter();
• find();
• every();
• some();
• reduce();

Nossa Dener em 2011 foram introduzidos, faz tempo né?
Exato, porém apenas em 2015 que foi realmente implementados forEach(), map(), filter(), find(), every(), some() e reduce() com JavaScript.

Esses novos métodos foram inseridos para deixar nosso código mais legíveis, performaticos, reduzindo a complexibilidade retirando os efeitos colaterais das formas que o código eram feitos antes.

Como é usado o loop no Javascript

Tarefas repetitivas na vida de um desenvolvedor é percorrer registros em uma lista.

E nessas horas de muitas repetições podem surgir muitos problemas dependendo o tamanho do código.

O Loop oferece um jeito fácil e rápido de executar uma ação repetidas vezes. Porém cuidado de como vai utiliza-lo, pois pode trazer uma complexibilidade bem ruim para o código.

Em muitos projetos me deparo com o loop for,  não é errado usar-lo, porém os outros métodos são mais legíveis no momento.

let frutas = [
    "Banana",
    "Uva",
    "Maracuja",
    "Morango"
];

for (i = 0; i < frutas.length; i++) {
    console.log(frutas[i]);
}

Esse código mostra todas as frutas sendo iteradas no console.log(), no meu ponto de vista não é uma forma amigável de se entender perto dos novos métodos que temos hoje.

Usando o forEach deixo o código mais legível, veja a baixo:

let frutas = [
    "Banana",
    "Uva",
    "Maracuja",
    "Morango"
];

frutas.forEach( fruta => console.log(fruta));

ForEach Javascript

Já que dei o primeiro exemplo com forEach vamos falar um pouco mais dele, será o primeiro método que veremos agora.

Ele  muito bom para iterar elementos de um Array.

Imagine que estamos em um restaurante e chegou 5 pedidos do aplicativo.

Precisa ser apresentando na tela do Chefe para efetuar o preparo dos pedido.

//Lista de Pedidos
let pedidos = [
     {'id': 420, 'nome':'Dener', 'alimento': 'Sandubão de Bacon', 'bebida': 'Suco Limão' },
     {'id': 152, 'nome':'Naiady', 'alimento': 'Sandubão Vegano', 'bebida': 'Suco de Laranja' },
     {'id': 29, 'nome':'Marcio', 'alimento': 'Coxinha', 'bebida': 'Suco de Uva' },
     {'id': 33, 'nome':'Isabel', 'alimento': 'Sandubão de Picanha', 'bebida': 'Refrigerante' },
     {'id': 55, 'nome':'José', 'alimento': 'Pizza', 'bebida': 'Refrigerante' }
];

//Iterador forEach
pedidos.forEach( ( pedido, index ) => {
     let { nome, alimento, bebida } = pedido;
     console.log(`${index} - O Cliente: ${nome} fez o pedido do alimento: ${alimento} e a bebida: ${bebida}.`);
})

No exemplo a cima vimos que o let recebeu um Array de pedidos.

Depois foi iterado pelo forEach, dentro dele desestruturamos o valor (“pedido”) ( { nome, alimento, bebida } ) e logo em seguida mostramos os pedidos no console com o posicionamento de cada Array utilizando o index.

O forEach será nosso melhor amigo para iterar Array, mas tome muito cuidado ao utilizar-lo.

Se você der push com mais elementos para o exemplo iterado ( pedidos ), esse valor será ignorado nesse mesmo forEach.

Então antes de iterar o mesmo determine os valores para ser valido no callback.

Map Javascript

O método Map além de iterar todo o Array ele é muito bom para editar o iterado ( resumindo o Array ).

Imagine que precisamos verificar um valor do Array. Usaremos o mesmo exemplo do restaurante.

Precisamos verificar se temos coxinha em nosso estoque, se não tiver ele envia para o Chefe da cozinha avisando que estão escolhendo o pedido e já podem preparar a bebida escolhida.

Como vimos o iterador Map do Javascript, executa a ação e logo no callback já retorna a resposta modificada.

//Lista de Pedidos
let pedidos = [
     {'id': 420, 'nome':'Dener', 'alimento': 'Sandubão de Bacon', 'bebida': 'Suco Limão' },
     {'id': 152, 'nome':'Naiady', 'alimento': 'Sandubão Vegano', 'bebida': 'Suco de Laranja' },
     {'id': 29, 'nome':'Marcio', 'alimento': 'Coxinha', 'bebida': 'Suco de Uva' },
     {'id': 33, 'nome':'Isabel', 'alimento': 'Sandubão de Picanha', 'bebida': 'Refrigerante' },
     {'id': 55, 'nome':'José', 'alimento': 'Pizza', 'bebida': 'Refrigerante' }
];

//Iterador Map
pedidos.map( ( pedido ) => {

  if(pedido.alimento == 'Coxinha'){
      return pedido.alimento = 'Não temos no momento';
   }
});

console.log(pedidos)

Como vimos o iterador Map do Javascript, executa a ação e logo no callback já retorna a resposta modificada.

Filter Javascript

Agora vamos falar sobre o que tem o nome mais óbvio, nosso famoso Filter.

Como o nome já diz, esse método deve ser utilizado quando temos a necessidade de filtrar nossa lista.

Imagine que precisamos filtrar todos os pedidos que contém apenas Refrigerante nas bebidas, para agilizar os pedidos.

//Lista de Pedidos
let pedidos = [
     {'id': 420, 'nome':'Dener', 'alimento': 'Sandubão de Bacon', 'bebida': 'Suco Limão' },
     {'id': 152, 'nome':'Naiady', 'alimento': 'Sandubão Vegano', 'bebida': 'Suco de Laranja' },
     {'id': 29, 'nome':'Marcio', 'alimento': 'Coxinha', 'bebida': 'Suco de Uva' },
     {'id': 33, 'nome':'Isabel', 'alimento': 'Sandubão de Picanha', 'bebida': 'Refrigerante' },
     {'id': 55, 'nome':'José', 'alimento': 'Pizza', 'bebida': 'Refrigerante' }
];

//Iterador filter
let filter = pedidos.filter( ( pedido ) => {
     return pedido.bebida == 'Refrigerante'
});

console.log(filter)

Perceba que fizemos diferente dos outros exemplos, salvamos o filtro de array em outra let.

Essa let, ficou mais leve pois só tem pessoas que pediram refrigerante.

Conseguimos abstrair os dados e utiliza-los em outras atribuições.

Find Javascript

Nome bem subjetivo também, mas ele procura e te retorna 1 o primeiro valor encontrado da array.

É bem parecido com o Filter, porém o Find eu utilizo muito quando temos a propriedade id em nosso Array.

//Lista de Pedidos
let pedidos = [
      {'id': 420, 'nome':'Dener', 'alimento': 'Sandubão de Bacon', 'bebida': 'Suco Limão' },
      {'id': 152, 'nome':'Naiady', 'alimento': 'Sandubão Vegano', 'bebida': 'Suco de Laranja' },
      {'id': 29, 'nome':'Marcio', 'alimento': 'Coxinha', 'bebida': 'Suco de Uva' },
      {'id': 33, 'nome':'Isabel', 'alimento': 'Sandubão de Picanha', 'bebida': 'Refrigerante' },
      {'id': 55, 'nome':'José', 'alimento': 'Pizza', 'bebida': 'Refrigerante' }
];

//Iterador find
let find = pedidos.find( ( pedido ) => {
      return pedido.id == 420
});

console.log(find);

Ele vai te retornar apenas 1 registro, então cuidado, se tivermos 2 itens iguais, ele vai retornar apenas o primeiro que encontrar.

Every Javascript

Esse método tem que pensar bem antes de sair usando, pois ele não cria uma nova Array e sim retorna um valor Booleano.

É bacana entender que, se você tem uma condição, ela vai tratar toda sua Array, assim podemos verificar se eles estão ok, ou não. Sacou?

Vamos pensar com o Array de pedidos que já usamos. Nosso Chefe só pode fazer pedidos que tem o tipo de bebida = refrigerante.

Se for algum pedido de suco para esse Chefe ele não vai dar conta do serviço e na cozinha vai dar ruim!

//Lista de Pedidos
let pedidos = [
     {'id': 420, 'nome':'Dener', 'alimento': 'Sandubão de Bacon', 'bebida': 'Suco Limão' },
     {'id': 152, 'nome':'Naiady', 'alimento': 'Sandubão Vegano', 'bebida': 'Suco de Laranja' },
     {'id': 29, 'nome':'Marcio', 'alimento': 'Coxinha', 'bebida': 'Suco de Uva' },
     {'id': 33, 'nome':'Isabel', 'alimento': 'Sandubão de Picanha', 'bebida': 'Refrigerante' },
     {'id': 55, 'nome':'José', 'alimento': 'Pizza', 'bebida': 'Refrigerante' }
];

//Iterador Every
let every = pedidos.every( ( pedido ) => {
     let { bebida } = pedido
     return bebida == "Refrigerante";
});
console.log(every) // false

Nesse Caso a cima, teremos o retorno falso, pois temos outros tipos de bebidas além de refrigerante.

Então nessa caso, o envio de pedidos para o Chefe não chegaria.

Some Javascript

Essa aqui é um pouco parecida com o Every, pois tem uma diferença, ele pergunta se apenas 1 dos valores da Array equivale a sua condição.

Usando nosso Array de pedidos, imagine que nosso Chefe exige que apenas ao menos 1 dos pedido o alimento tem que ser pizza.

O retorno dele também é booleano, então bora para o código.

//Lista de Pedidos
let pedidos = [
    {'id': 420, 'nome':'Dener', 'alimento': 'Sandubão de Bacon', 'bebida': 'Suco Limão' },
    {'id': 152, 'nome':'Naiady', 'alimento': 'Sandubão Vegano', 'bebida': 'Suco de Laranja' },
    {'id': 29, 'nome':'Marcio', 'alimento': 'Coxinha', 'bebida': 'Suco de Uva' },
    {'id': 33, 'nome':'Isabel', 'alimento': 'Sandubão de Picanha', 'bebida': 'Refrigerante' },
    {'id': 55, 'nome':'José', 'alimento': 'Pizza', 'bebida': 'Refrigerante' }
];

//Iterador some
let some = pedidos.some( ( pedido ) => {
     let { alimento } = pedido
     return alimento == "Pizza";
});
console.log(some) // true

A primeira ocorrência que aconteceu já fomos alertados e recebemos o valor true.

Nessa caso 1 dos pedidos veio com alimento = Pizza, então já foi avisado para o Chefe que um dos pedidos tem Pizza.

Mas Dener, mas por que de verificar se tem apenas 1 pedido com Pizza?

Nessa caso suponhamos que o Chefe precisa saber se vem Pizza, pois ai ele vai ter que se preparar para trabalhar mais rápido, etc.

Reduce Javascript

O reduce é mais chatinho para explicar, fiquei pensando muito antes de montar esse tutorial devido ele, mas no final deu tudo certo!

A ideia dele é pegar todos os valores um Array e condensá-los  em um só.

Vou usar os preços e somar o total que teve nessa leva do pedido da nossa Array, borá ver!

//Lista de Pedidos
let pedidos = [
     {'id': 420, 'nome':'Dener', 'alimento': 'Sandubão de Bacon', 'bebida': 'Suco Limão', 'preco': 100 },
     {'id': 152, 'nome':'Naiady', 'alimento': 'Sandubão Vegano', 'bebida': 'Suco de Laranja', 'preco': 59 },
     {'id': 29, 'nome':'Marcio', 'alimento': 'Coxinha', 'bebida': 'Suco de Uva', 'preco': 33 },
     {'id': 33, 'nome':'Isabel', 'alimento': 'Sandubão de Picanha', 'bebida': 'Refrigerante', 'preco': 79 },
     {'id': 55, 'nome':'José', 'alimento': 'Pizza', 'bebida': 'Refrigerante', 'preco': 47 }
];

//Iterador Reduce
let reduce = pedidos.reduce( ( total, pedido ) => {
     let { preco } = pedido
     return total + preco;
},0);
console.log(reduce) // total = 318

Temos alguns pontos de atenção aqui, no reduce passei um parâmetro diferente que se chama next e no final dele o valor 0.

• Total= ele verifica o próximo valor a partir do que foi iniciado que no caso era 0.
• 0 =  Foi meu valor inicial, poderia ser 30, 20, 22 ou 48, etc.

Por cada iteração, o valor pode ser alterado até a ultima iteração, no caso somei e fiz um balanço de todos os pedidos, legal né?

Conclusão

Portanto, tudo que vimos é muito utilizado nos dias de hoje, então já comece utilizar em seus projetos e tenha um código bonito, elegante e performático.

Veja as versões do Javascript para você estudar mais e aplicar suas melhorias.

Se você gostou forEach(), map(), filter(), find(), every(), some() e reduce() com JavaScript, curta nossas páginas, baixe nossos materiais.

E se quiser ter mais sucesso faça o curso FullStack => Curso.

Ou se você quiser aprender mais sobre Front end… Baixe nosso Material Gratuito ou aprenda mais sobre html no youtube.

Deixe suas perguntas ai nos comentários que irei responder, e até a próxima forte abraço!

Forte abraço fique com Deus, Fui!