[Música] fala Mestres beleza no vídeo de hoje nós vamos ver aqui sobre iterações em Aris e a gente vai entender a diferença entre os métodos for each e map né aqui no no JavaScript a gente vai entender como que usa nos nossos exemplos aqui no nosso famoso arrei de frutas Tá então vamos lá vamos falar aqui usando o a iteração e a rede usando for each vamos começar pelo for each o que que é esse for each ele é um método uma função que também está dentro lá daquela nossa lista de arris de métodos dos
ar Reis né então se a gente vem aqui frutas ponto nós teremos todos esses métodos aqui e o for it é um deles tá então o for each né a tradução disso aqui é é a gente pode entender como para a gente pode traduzir né como para cada ou seja o que que o for it Recebe como argumento uma função e aquela função ela vai ser executada para cada item do Array tá a ideia seria essa então no parâmetro aqui né no for it aqui a gente vai usar funções anônimas e a gente falou de
funções anônimas lá no nosso método no nosso módulo né de funções onde a função anônima é basicamente uma função que não tem nome tá então aqui no for each eu vou passar essa função ó eu vou est usando aqui a errow function e esse forit né na verdade essa função que vai ser executada para cada item do Array ela ela não manipula o Array original tá E isso é bem importante for it ele não manipula o arrei original então o arrei de frutas ele vai continuar o mesmo a única coisa que vai acontecer é que
para cada item da função eu vou ex para cada item do Array eu vou executar aquela função então para provar isso aqui dentro do for it né o primeiro parâmetro que eu passei o primeiro argumento que eu passei foi a nossa função tá então para provar que essa função ela vai ser executada para cada item eu vou fazer o seguinte ó com console P log item ou melhor uma string né Olá ou a string de item mesmo não tem problema se eu executo esse código nós temos aqui ó ele printa no console item cinco vezes
que é o número de itens que nós temos no nosso Array tá então essa função que eu enviei a gente provou aqui né que ela foi executada para cada item e essa função que eu envio a gente dá um nome específico para essa função que é uma função de callback tá até aqui na tipagem do método ó se a gente bota o mouse em cima do desse método do Array e a gente vê que o nome do primeiro parâmetro é uma função callback tá a gente não falou de callbacks ainda a gente não tem essa
noção só que a tradução de callback é uma e seria uma função que vai ser chamada em algum outro momento né e não é exatamente essa a tradução mas a ideia por trás é isso é uma função que vai ser que eu vou enviar e ela vai ser executada em algum outro momento ela vai ser chamada de volta né o callback né chamar de volta em algum outro momento Então essa função a gente pode até olhar aqui no no que o método declara né a declaração do método isso aqui a gente chama de declaração do
método tá aqui é uma certa documentação então a maioria dos métodos nativos ali do JavaScript que são esses métodos que estão dentro dos arrs os métodos que estão dentro de objetos Strings números eles TM uma certa documentação aqui que a gente consegue consultar direto no vs code né então olhando isso aqui a gente vê que essa função callback ela vai receber alguns parâmetros tá são três parâmetros valor índice e o Array e o que que acontece a gente sabe que essas que essa função recebe esses parâmetros então eu já posso eu posso né falar aqui
na declaração da minha função anônima que eu vou receber um item um index e um Array E aqui as coisas podem tá ficando bem confusas bem confusas porque o que que acontece eh eu acho que já tá claro essa ideia de enviar a função e que ela vai ser executada em um outro momento certo isso aí tá tranquilo então a gente tá fazendo isso eu envio essa função e quem que vai executar essa função é o método for it que isso foi implementado dentro do método for it é uma coisa do JavaScript que ele mesmo
vai executar essa função que eu estou enviando tá então como é ele que vai executar ele também pode passar argumentos para essa função que é o que a documentação tá falando então a gente poderia criar aqui um exemplo pra gente entender melhor esse fluxo das coisas então primeiro eu vou executar isso aqui e quando eu executar que a gente vê o os valores aqui isso vai começar a fazer mais sentido Tá então vamos lá e esse console log meu da string item agora vai ser dessa minha desse meu parâmetro né item quando eu executo olha
lá ó maçã banana morango uva e abacaxi então o que que aconteceu né forit o método nativo do JavaScript ele enviou ele executou essa função que eu enviei né E quando ele foi executar ele passou para mim alguns argumentos né que eu recebi aqui como parâmetros então nós já vimos esse fluxo lá em no módulo de funções e aqui o que tá acontecendo é é que a Di Diferentemente de lá quando nós vios em funções que a gente enviava os argumentos que se que era números no caso dos da função que somava números né Eh
a gente enviava os números e a função eh fazia a operação nesse nosso caso aqui ao invés de enviar números eu estou enviando uma função e E aí o meu método interno ele vai executar essa função enviando os os números eh como argumento e para esclarecer melhor nós vamos fazer um exemplo aqui tá então eu vou ter duas funções eu tenho a minha função f soma a função soma vai ter né o número um e o número 2is que ela vai somar então ela vai retornar número 1 mais Cadê o mais mais número do tranquilo
aqui né e eu vou ter outra função que vai ser a função executa soma e essa função ela vai receber como parâmetro uma outra função que é o que nós estamos chamando de callback né e dentro da função executa soma ela vai chamar a minha callback ela vai Executar a minha função enviando para ela os números dois e do que são são dois parâmetros tá então aqui no final o que que eu tenho que fazer eu tenho que chamar executa soma e o parâmetro de executa soma vai ser a minha função que faz a soma
soma Então dentro da função executa soma eu vou executar essa função que eu enviei como argumento e ela vai executar passando os par parâmetros que eu quero e aqui dentro de soma eu vou receber esses dois números e realizar de fato a soma então a minha função executa soma vai chamar a minha a a função de soma né então eu vou falar aqui que ela retorna a resposta e aqui fora né onde eu realmente executo tudo eu vou ter aqui uma variável resultado e fazer aqui um console ponto log de resultado Beleza quando eu executo
executando nós temos aqui ó o log 4 tá e o que que é esse 4 é o resultado da soma de 2 + 2 só que vamos notar aqui ã a a diferença o ponto que eu tô querendo deixar claro aqui para vocês eu usei eu executei a função executa soma e a função executa soma executou a minha função de somar tá então eu enviei uma função como argumento e internamente essa função foi executada tá que é a ideia aqui do for it for it seria a minha função executa soma e eu estou enviando como
parâmetro como argumento da minha função forit uma outra função essa outra função ela vai ser executada internamente dentro do forit igual o executa soma tá está executando aqui a minha função de de soma né a diferença aqui desses dois exemplos executa soma e do forit é que no executa soma eu declarei eu criei a função soma de antemão e no forit eu estou já criando a função aonde ela vai ser enviada como argumento Então qual seria a mudança que não executa soma para ele ficar parecido com o que nós temos aqui no forit é que
ao invés de eu criar a minha função soma separado eu vou criar ela aqui ó já na hora de enviar com argumento e nesse momento eu vou criar uma função anônima que ela só vai existir dentro aqui como esse argumento e não vai ser uma função que tem um nome que vai ter tem que ser declarada anteriormente tá então a anotação aqui seria a gente pode usar isso aqui ó eu posso mover isso aqui para cá para dentro dos parênteses só que agora a função ela não tem nome né ela não precisa ter o nome
soma ela é uma função an aqui nós estamos Ana usando anotação de function mas eu poderia também usar er function N apagar aqui o function e colocar aqui o que aí o exemplo ficaria parecido com o que nós temos aqui no for tá executando novamente ele eu selecionei esse pedaço de código por isso que deu erro aqui de no nós temos lá oado funcionando normalmente só que mudou esse esse jeito de enviar o argumento tá então com isso aqui explicado eu acho que agora ficou um pouco mais fácil caso você ainda não tenha entendido volta
aí no vídeo V isso de novo com atenção para você entender o que que tá acontecendo tá eu vou deixar isso aqui comentado essa parte do executa soma vou até jogar ele aqui para baixo para não não ficar nos atrapalhando e aqui no nosso forit é um caso parecido né ou seja voltando já pro forit o forit ele vai receber como parâmetro cada item do arrei não só isso ele recebe também o índice daquele item e esse terceiro parâmetro aqui seria o arrei original tá então se eu fizer aqui um console log de item index
e de arrei né que foi o nome que eu dei aqui se eu executo isso aqui toda vez que eu salvar ele vai vai ficar jogando o meu comentário aqui então eu vou jogar o comentário para cima PR a gente deixar ele lá longe aqui do nosso código eh executando isso nós temos o seguinte Olha lá maçã n maçã é o item o índice de maçã zero e o arrei Né o terceiro parâmetro é o arrei original seria frutas tá eu consigo acessar a frutas aqui de dentro do forit e banana índice um morango índice
dois uva índice TR e abacaxi índice 4 tá então a gente consegue acessar tudo isso aqui de dentro do forit então eu quando que eu vou usar o forit seria em momentos onde eu quero executar alguma coisa alguma função fazer algo baseado em cada item de uma arrei tá eu usaria o forit para isso eh exemplos a gente pode poderia ter muitos aqui eu não quero ter dar esses exemplos mais mais reais nesse caso aqui porque a gente pode eu eu posso est acabar confundindo vocês de certa forma mas vamos imaginar o seguinte eu tenho
uma lista de usuários tá o exemplo clássico da lista de usuários E aí para para cada usuário eu quero enviar um e-mail um e-mail de boas-vindas então eu vou pegar aquela minha lista de usuários e executar um forit ou seja para cada usuário eu envio e-mail tá E aí eu dentro do forid aqui eu implementaria a minha função que envia e-mails eu acho que esse exemplo Ficou bom não não vai não não não vai confundir ninguém com isso tá eh Mas é isso tá a ideia atrás do forit é essa é quando eu quero executar
algo para cada item do meu arrei tá E no meu caso aqui eu só estou fazendo o conso log e de cada item do Array e é isso tá a gente não vai implementar nada mais complexo aqui mas esse exemplo do usuário resolveu aí pra gente entender melhor isso tá e o segundo método Aqui nós temos interação interação e arre usando forit e aqui nós os itação em a usando map tá e o que que é esse map nós teremos aqui o nossa rede de frutas eu vou deixar ele aqui ó antes do comentário do
forit porque a gente vai usar ele aqui no map também tá e o que que é o que que esse map faz map vem de mapeamento e essa ideia de mapeamento é o quê e no nosso caso aqui a gente quer transformar então eu quero pegar o meu arrei de frutas e transformar ele em um arrei de outra coisa de alguma outra coisa por exemplo aqui como nós temos Strings eu quero adicionar em cada item em cada fruta eu quero colocar o fruta dois pontos e o nome tá eu quero mexer no valor de cada
item tá eu quero manipular cada item do meu arrei eu uso o o método map eu vou fazer esse mapeamento vou fazer essa transformação então a ideia da função callback que nós vimos aqui em forit ela é a mesma pro map tá então se eu digitar aqui ó frutas pmap eu vou enviar aqui ó uma função uma função anônima né como argumento e essa função recebe o item o índice e o Array que eu estou trabalhando da mesma forma o que que é diferente a diferença aqui é que no map eu vou no final dessa
função essa função que eu vou executar para cada um eh no forit eu não retorno eu não faço retorno de nada né então eu vou até deixar um comentário aqui ó não retornamos o item não retornamos nada porque o forit ele não ele não manipula nenhuma rei ele só executa uma função para cada item daquele arrei e isso é diferente do seguinte no forit eu vou imaginar que eu tenho duas listas né dois ar Reis e aí para cada item da lista um eu quero manipular a lista dois e aí eu poderia usar o for
it e dentro aqui da implementação eu iria no meu outra arrei na posição x e faria uma alteração isso aí não tem problema o negócio é que no forit eu não retorno nenhum valor para alterar o arrei original diferente do Map né no map se eu faço o seguinte ó return zero tá E aqui depois eu vou fazer o seguinte ó console P log frutas e executo a gente vai ver que o log aqui de frutas né o arreio original ele continua o mesmo tá o a diferença aqui é que o seguinte o o Map
o método map ele vai gerar um novo Array alterado tá então aqui no map ó eu faço o seguinte ó let nova novo novo arrei e vou fazer o consol de novo a rei executando isso eu tenho isso aqui ó o nosso Arreio e frutas ele continua original ele não foi alterado só que baseado nele eu gerei um novo Array com as alterações que seria o quais seria essas alterações Eu Na verdade eu gerei um novo Array com número zero né que foi o que eu retornei da minha função map então no map né nessa
função cobec tudo que eu retorno vai ser usado como substituto para aquele novo item né para esse novo essa nova lista de itens transformados mapeados então eu eu faço o uso do Map né eu faço essa iteração a gente executa a função para cada item ali do Array a diferença é aqui no forit né como eu falei a gente não retorna nada Ou seja eu não crio um novo arrei só que no map e no map né a gente acaba criando esse novo barrei transformado alterado e eu posso alterar eh baseado no item né naquele
item que eu estou analisando então eu vou retornar ao seguinte ó como eu falei lá o exemplo das frutas né frutas dois pontos um espaço e aqui a gente concatena as Strings né que é o a soma de Strings frutas mais e item né que é o nome da fruta ou seja vai ficar é fruta dois pontos maçã frutas dois pontos banana e assim por diante Então se a gente executa olha aqui ó nós temos o arrei original de frutas que continua o mesmo só que baseado nele eh originado dele eu criei esse novo arrei
com essas alterações que eu fiz né que foi adicionar aqui esse prefixo de frutas certo então a diferença desses dois métodos principais são essas Resumindo novamente forit quando eu quero executar uma coisa para cada item do arrei Mas eu não quero gerar nenhum arrei novo forit quando eu quero gerar um arrei novo n eu quero fazer um mapeamento uma transformação naquele arrei baseada né naquele arrei original Eu uso o map que ele vai resolver isso para mim tá bem E então e é basicamente são essas aí as as formas que nós temos para fazer as
interações nos Aris na verdade eh são os métodos de arris né que vão fazer essas interações o forit o map mas nada impede da gente usar um for loop né lá quando a gente falou de Loops a gente pode porque como a gente viu na aula passada né que todo arrei ou seja frutas eu tenho a propriedade leng né leng que é quantos itens eu tenho no arrei então Nada me impede de eu criar um for Loop e esse for loop a quantidade de vezes que ele vai executar é o frutas pon lenf né que
seria o tamanho do arrei E aí baseado e aí esse for loop né dentro desse for loop eu posso fazer também várias coisas mas eh isso ficaria muito parecido aí com o nosso forit tá o o que que eu posso qual seria uma vantagem do for loop né vamos fazer aqui um for loop iteração usando for loop então aqui eu teria né o for anotação do for loop né o parênteses e a Chaves e aqui a gente faz as declarações né eu vou querer eu vou criar né a variável de controle que é a variável
I ela vai começar em zero né o o a condição de execução vai ser enquanto I for menor que frutas P Lens e para cada vez que executar né eu vou incrementar Um item Cadê I mais mais né eu vou incrementar de um em um no meu no i né na minha variável contador que que né a variável que tá controlando aqui o meu a minha execução né então com isso aqui eu posso fazer aqui ó console p Log em I vou comentar aqui esses consoles log de fruta e de novo a rei e se
eu executo não posso ter nada selecionado executando ó lá 0 1 2 3 4 tá então ele executou cinco vezes pro para esse nosso arrei ou seja o arre por quê Porque o Array tem cinco itens né então ele executou cinco vezes a partir de zero Tá mas dentro desse meu for eu posso fazer várias coisas como por exemplo essa alteração que eu fiz no meu map eu posso fazer isso aqui também no for loop só que a diferença é que no map eu vou criar um novo Array tá o Array original ele vai ficar
o mesmo com o for eu posso alterar diretamente o arrei original ou seja o arrei de frutas Eu vou acessar ele no índice que eu estou fazendo a iteração né ou seja qual que é o índice I né a variável I que controla o índice que eu estou trabalhando como a gente viu aqui no log né e a gente definiu que também i começa de zero então para cada item no índice aí do meu arrei frutas eu vou e eu vou atribuir né eu vou atribuir um novo valor que vai ser a string né frutas
dois pontos né Essa string concatenada com o meu item né Qual que é o item do Array que eu estou fazendo aqui essa essa iteração Eu vou acessar esse item né ou seja frutas na posição I tá então isso aqui ele vai conseguir executar porque o que que acontece né como que a gente Lê isso aqui eh nessa linha de código principalmente né o ele vai descobrir qual que é o valor que ele tem que atribuir em frutas naquela posição então quando ele for descobrir qual que é o valor ele vai fazer essa operação né
a string somada com frutas na posição X então ele primeiro descobre o valor para depois atribuir Ou seja eu eu não vou eu não consigo né atribuir um valor na para essa posição do arrei e usar o valor antigo né que aqui por exemplo seria o nome da fruta né maçã eu vou pegar aqui maçã somo com frutas né con cateno E aí pego essa string nova e substituo troco no lugar que estava maçã lá no Arreio original tá então se eu salvo isso aqui depois do for loop eu vou fazer ó console P log
clas executando nós temos lá o mesmo resultado que nós tivemos com o map só que a diferença é que com o for eu alterei o arrei original com o map eu não alterei o arrei original eu criei um novo arrei tá e essas diferenças eh por mais que são sutis quando a gente tá trabalhando e existe aí o caso de uso né para cada uma delas e de acord a gente for prosseguindo aí evoluindo a gente vai começar a entender isso melhor tá certo então para essa aula aqui é isso eu espero que eu ajudado
qualquer dúvida pode deixando no comentário logo abaixo e é isso aí muito obrigado e até a próxima [Música]
