TUDO que você deve estudar de JavaScript antes do React

E aí beleza mais o vídeo aqui para o canal do YouTube da Rocket City e hoje eu vou trazer um dos vídeos que o pessoal mais me pede quando chega lá na Ignite começar a estudar o iett Diego o que que eu preciso aprender JavaScript antes de começar no Riachão melhor para começar com o iett no pé direito e hoje eu vou fazer um vídeo completo sem pausas sem cortes Com tudo o que que você precisa aprender sobre JavaScript Para iniciar no riacho aí da maneira certa então bora sem mais delongas a gente conversar já

aqui no código e você já podem ver que aqui na minha tela eu já tenho uma das coisas que é super importante saber que é o seguinte o JavaScript ele consegue avançar hoje mais rápido que os próprios browsers conseguem avançar o que que eu quero dizer com isso tá o JavaScript ele é uma linguagem que surgiu a partir de uma outra linguagem chamada é que me escute O actionscript ele é digamos assim um padrão seguido por várias outras linguagens de programação como Java scrip como actionscript como your next Trip todas essas linguagens elas seguem a

intenção de padrões ou seja são linguagens que elas têm a sintaxe extremamente semelhante o JavaScript em se ele segue esse padrão Deca + clip e o é que me desculpe em si a cada ano Existem várias novas funcionalidades que são implementadas dentro da linguagem em Si e os browsers eles implementam o Java scripts entender o Java script em si Nem sempre o JavaScript do browser consegue entender todas as novas implementações que são incluídas na linguagem a cada ano ou seja tem muita coisa que já existe no JavaScript ou digamos está em Beta ali na nas

especificações que elas ainda não são suportadas pelo browser e se e por isso por muito tempo e ainda hoje a gente precisa de certos compiladores de código e veja que eu tô Começando bem do básico antes da gente começar a colocar a mão na massa para a gente entender o que são esses compiladores de código se você já fez a cidade de alguma coisa de tá aí ou já estudou um pouquinho mais conceito você já já deve saber que compiladores são ferramentas que vão transformar o nosso código de um formato para outro né e dentro

do ecossistema jovens clipe da ferramenta que ficou mais famosa ao longo de todo o tempo aí foi o Babel né O Babel ele é um compilador específico para JavaScript o quê que isso quer dizer como os browsers nem sempre suportam todas as funcionalidades mais recentes do próprio navegador o melhor do próprio JavaScript a gente precisa de uma ferramenta que vai conseguir compilar o código que a gente escreve para que todos os browsers mais recentes consigo entender ou seja bom por exemplo aqui no próprio site do Badoo eu a gente consegue escrever algum tipo de Funcionalidade

que ainda não é suportada por todos os browsers Então vamos ver talvez uma funcionalidade aqui seja os generator Então vou criar aqui uma função de diretor e eu vou dar um Field a 10 para gente ver nos generator já são suportados Talvez uma função assíncrona do chover aqui a Assunção assim coisa também é suportada talvez a gente usar aqui um lanche colar assim aproveitou Então deixa eu botar aqui um conste a teste igual a zero ou desta vez será que Isso aqui os browsers aí cheguei uma função que os browsers nem todos os browsers mais

modernos já entendem que é o no leite colar assim o pró-reitor se eu não me engano Então veja só eu escrevi um código que nem todo browser já entendi esse código seja um operador que foi incluído aí nas últimas versões do actionscript o Babel ele gerou um código compilado que é compatível com todos os navegadores mais recentes então a gente pode ver que ele cria uma Variável teste aí ele assinou o valor zero a essa variável underline que ele tinha criado aqui antes e se ela for diferente de no E aí ele vai usar a

variável underline senão ele usa a variável 10 então isso aqui na verdade é bem diferente do operador ou que a gente usava antigamente a gente pode ver até que o código é diferente porque o operador ou né nesse caso aqui ele ia retornar 10 mas o zero é um valor possível para variável teste né Então Nesse caso aqui ele retorna zero é porque ele é eu só quero verificar se ele é diferente de Nub não seria um fal'cie velho dentro do JavaScript mas tudo bem é o povo que eu queria trazer aqui ó porque a

gente precisa entender o que que é o Babel esse show entendido Babel que existe uma infinidade de ferramentas que têm o mesmo propósito que o babado algumas muito mais rápidas algumas mais lentas e por aí vai não tem porque a gente ficar entrando em qual Ferramenta é melhor para gente utilizar mas o Babel Com certeza é a mais famosa E aí a gente precisa partir para entender sobre outra ferramenta que ficou muito conhecida no ecossistema jovens clipe que é o web check-in e não é uma ferramenta que tem o mesmo propósito que o barulho webpack

é uma ferramenta de bullying e aí bundle já se prepara é uma palavra que você vai ouvir muito quando você corta com JavaScript que nada mais é do que pegar vários Arquivos fonte da nossa aplicação e converter eles em um bundle em um único arquivo que contém vários outros arquivos dentro dele porque que a gente precisa fazer isso né como você pode ver aqui na própria imagem né a gente tem vários arquivos JavaScript arquivos como joias renda Wars arquivos arquivos jpg png e no final a gente pode ter que todos os arquivos JavaScript ou como

joias foram traduzidos em um único arquivo James Kate todas as imagens Foram traduzidas em uma imagem jpg em um png em um CSS por quê que isso precisa acontecer e por muito tempo os browsers eles não suportavam importações entre arquivos JavaScript e lá na minha época em 2014/2015 começaram a surgir algumas alternativas para gente lidar com isso se eu não me engano a mais famosa era o Power JS e o browserify se não me engano eram as ferramentas mais famosas que a gente Tinha na época para conseguir fazer importação e Nossa esse site aqui me

dá uma nostalgia desvira sente mas também me dá uma dor do olho desgracento uma botar aqui é essas ferramentas elas meio que aplicavam ali inclusive o recorde JS Olha só era ele era compatível com Internet Explorer sexta na minha época eu tinha que dar manutenção para sites com Internet Explorer 6 para ver o naipe das Ferramentas que eu tinha que usar na época e nascer 2010 o morreu 2018 já não O melhor a taça ccop White não sei mas essas ferramentas as não são mais usadas na web pack ainda é muito utilizado mas o que

que acontece como os browsers vezes não tinham um mecanismo próprio de importar arquivos JavaScript entre eles ou qualquer ou lidar com importações de arquivos que não sejam Chaves crip com png jpg e sass essa é a partir dos arquivos JavaScript cozinha importar imagens ou arquivos CSS por exemplo por Muito tempo a gente teve que utilizar essas ferramentas como webpack nem você tá as outras mas como o próprio webpack para conseguir lidar com isso para conseguir fazer com que antes de um browser ler o nosso código a gente pega e convertam nosso código já para um

formato que browser consigo entender e veja que eu não tô falando do Babel agora na questão do código foi o formato de código que o browser consegui entender eu tô falando no arquivo bundle Na Então como browser não consegue entender importações entre arquivos olha pego e crie um arquivo só é um arquivo que tem toda aplicação o tempo a gente teve aplicações que tinham a o seu bundle pronto JS que era o arquivo que tinha lá 10mg com toda aplicação lá dentro e claro que ao longo do tempo isso foi melhorando né quando eu comecei

lá com a Ingrid e essa na versão 1.3 lá em 2013 se eu não me engano era isso é um bando Dei essa eu Lembro que o meu arquivo tinha 5 Mega se tu fosse Abrir o site da 3G Espera aí carregar porque ia demorar bastante tempo mas as coisas elas foram melhorando né porque eu tô te contando tudo isso porque você vai se deparar com muitos projetos que ainda usam essas ferramentas que ainda usam Babel que ainda usa webpack e tudo bem são ferramentas que elas vão estar no mercado ainda por muito tempo e

não quer dizer que todas as aplicações que você For criar ele da manutenção daqui pra frente e sempre vão estar utilizando o melhor não utilizando essas ferramentas mas mesmo assim é super importante falar que a gente não precisa mais delas tá nativamente o os browsers mais e eles já suportam importações entre arquivos até posso te dar uma dica utilizando esse site chamado can I Yours né que eu posso usar o melhor para uma pergunta é posso eu usar é você pode colocar alguma funcionalidade é que eu posso votar Ekman Street models né lembra que é

que me desculpe é a convenção é que eu boto mode onde a gente vem aqui para baixo deixa eu botar e s models talvez aqui ó já disse primórdios via isso foi até que a gente pode ver que todos os browsers mais recentes tirando essas graça aqui todos eles suportam a importação né a parte de módulos dentro do do JavaScript então a gente não precisa mais se preocupar com com isso e com isso a gente não precisa Mais do Webcast e do Valeu Diego Ainda precisamos dele sim e não sim porque ainda precisamos de uma

ferramenta que faça a compilação do nosso código que converta o nosso código é o Stitch mais moderno que o JavaScript que todos os browsers entendam precisamos usar o Babel especificamente não existem várias outras alternativas que a gente vai conhecer uma delas que é uma das mais performática se é um Yes Beauty que é uma ferramenta que tá bem em alta tá é Uma ferramenta que queria inclusive com para aqui com aquele tá comparando com o aspecto mais Mas promete o webtech com o Babel tá ele é westfield ele é um banner assim como é webpack

porém ele tenha ele ele faz a funcionalidade do Babel também por baixo dos planos né então a gente consegue usar ele para fazer só a parte da compilação e não para fazer a parte de banda em caso a gente não queira né então a gente pode ver aqui alguns exemplos dele e aí a gente pode Pesquisar Inclusive babbel.com parson a e talvez a gente consiga achar aqui o swc que é feita investe também é muito comparável o Babel é extremamente rápido eu acho que sente procurar swc variável a bild talvez a gente consiga encontrar alguma

algum post que compare todos eles para você ver um pouquinho da questão da da performance né então aqui a gente pode ver né que um projeto menor aqui ó acho que é um projeto menor Oeste viu é o Mais rápido entre todos eles a um projeto médio Oeste viu de continua sendo o mais rápido que todos eles comparando aqui e no projeto durante o SUV outro continua sendo o mais rápido que todos eles e que eu não tô aqui necessariamente para defender o s Beauty para mim não deveria existir nenhuma dessas e todos os browsers

deveria entender eu já vi escrito de mais moderno para mim essas ferramentas por todas queimarem ser bem sincero mas bom A gente vai utilizar o que tem de mais rápido melhor mas no mercado você vai encontrar de tudo tá já vou te avisando desde então e aí a gente vai começar criando o nosso projeto aqui para gente começar a ver quais são as funcionalidades do JavaScript que a gente precisa saber antes de ir para o iett e para criar o nosso projeto não tem como eu vou utilizar uma ferramenta em que e nada vídeo que

aqui por causa da minha intenção de dar como do site Ficou parecendo um bicho Chernobyl Agora sim o Vick ele nada mais é do que uma ferramenta que traz para a gente o s Wylde para gente fazer ali a escrita do nosso código mas ele traz também ali por baixo dos panos o [Música] Oi Eita vai Como escreve mod os ali dentro do próprio browser então a gente não precisa instalar nada dentro do Nossa da nossa aplicação ir é basicamente muito rápido ele traz alguns Plugins assim só para facilitar nossa vida tá então ele traz

por exemplo a parte da gente conseguir alterar o código e ver o código o resultado da nossa alteração em tempo real ele traz suporte a typescript a águia sexo do próprio yatch a importações de CSS então a gente pode pensar como visto como uma um ambiente de desenvolvimento para aplicações modernas em javscript né então ele traz algumas coisinhas ali mas é é Pouquíssima coisa então o geram over head muito pequeno ou seja a performance é é muito grande então a gente vai começar criando nosso projeto aqui eu vou começar escrevendo aqui então npm Create 20@leite

e aqui vou dar um enter ele já vai perguntar qual que é o nosso o nome do nosso projeto eu vou a JS antes do rio aqui e aqui a gente vai escolher a opção Vanilla a Vanilla se você não sabe é um termo que existiu Antigamente eu acho que tinha até um site para zoar com esse termo Vanilla e as não tem achei isso aqui não era Vanilla de e essa aqui é a Vanilla DS Slim Fast lightweight cross-platform Framework for building very beautiful girls with applications são me engano isso aqui é um meme

tá que surgiu há muito tempo atrás e ele chama de freio porque mas na verdade Vanilla não é um Framework é é hoje é a vez clipe esse vanilla.js ele surgiu como um meme para Meio que desmistificar essa questão de que a gente sempre precisava de uma biblioteca para fazer tudo o Vanilla de essa aí que ele surgiu para mostrar a cara não olha você consegue fazer isso com JavaScript puro você não precisa instalar Jah cure todas essas bibliotecas para conseguir fazer o que você quer fazer né então aqui o inferno eu acho que são

here we use on your web site and cure Prototype at Nossa Prototype motion Sky Way and Google Web Toolkit né porque Claro vanilla.js é mais usado em em websites do que todos esses porque o Vanderlei S Eu já vi se ele for aí aí tem um meme aqui comparando Como que você faz é tal coisa com já cru E como que você faz Company lá e a forma serviço é o Vanilla no caso sem nenhum tipo de frango aqui ou biblioteca mas esse aqui foi o meme que surgiu as seladas me quis assim muito máscara

porque agora que a gente já assinou Vanilla aqui a gente Pode crescer um projeto com JavaScript puro ou com typescript por mais que eu acho que você devo aprender typescript vai ter o momento certo para isso então eu vou criar o projeto java script tradicional para que todo mundo consegui entender acessando o nosso projeto que eu vou dar um npm install para instalar todas as dependências aqui do Projeto Super rapidinho com 114 dependência sim sozinho é super tranquilo eu vou abrir Isso aqui no meu verso saúde deixou arrastar aqui não se arrastar não vou deixar

aqui do lado e agora assim a gente vai para a parte onde a gente precisa entender o que que a gente fez entender do JavaScript antes da gente continuar E aí eu vou dar uma limpada aqui na nossa estruturantes para a gente começar bem do básico tá então vou resolver esse arquivo de estilo esse Style pontos SS ou remover svg aqui vou remover esse câncer No endereço aqui por enquanto tá tranquilo e aqui no meu meio ponto de S eu vou limpar ele deixar ele o mais simples possível mais limpo possível sem nenhum tipo de

conteúdo aqui dentro fecham E aí para gente já visualizar todo o código que a gente faz aqui dentro Eu vou dar um npm Run Dev aqui dentro ele vai abrir aqui o local rosto na porta 5173 e eu vou usar o Simple browser aqui do viés ficou para abrir aqui local host 51117 É isso aqui vai basicamente abrir um browser dentro do próprio a vez ficou só tem que cuidar porque tem algumas coisas que não são suportadas por esse browser do Versa ou como por exemplo não posso escrever um alerta aqui dentro do JavaScript não

vai funcionar Mas qualquer outra coisa que eu escrevo aqui por exemplo posso dar um documento. Bar e ponto Inner Tex igual hello-word seu salve isso aqui agora Teoricamente O mãe não é [Música] e eu vou usar o browser aqui o 5° apresentar uns bugs nessa questão de Reload tá então a gente vai usar o browser mesmo e a gente pode ver como eu falei que por eu tá utilizando o vídeo aqui dentro toda vez que alterar qualquer coisa no meu JavaScript o vs code para a última versão ele começou dar uns bons de cores aqui

deixa eu fazer o seguinte aqui sim achei Só corpo que eu trocar aqui para o homem só para ele tá dando uns bugs de cores aqui então vamos continuar com um homem por enquanto mesmo a como eu falei como a gente tá usando o vídeo sempre a gente alterar qualquer coisa no jogo escrito aqui ó e salvar ele já vai carregar fazer um Fast Flash ali do nosso navegador em tempo real negócio muito rápido mesmo assim questão de dois meses seguintes três meses agora que o meu arquivo em branco aqui Pra gente partir do total

0 vamos começar a ver um pouco da sintaxe do que a gente precisa saber sobre JavaScript antes de partir para o iett e aqui eu não vou seguir uma ordem de di e eu ordem de que vocês deveria estudar eu tenho minha ordem aqui do meu tudo aqui do lado e eu vou seguir essa ordem primeira coisa que a gente vai falar sobre já que a gente já viu Nessa aula é sobre o no lixo coalescing ou por razón que é um Descolasse operator tá ele é um operador para gente lidar com valores nulos Tá

o que que acontece imagina que eu tenho uma variável essa variável aqui ela é idade Tá daqui eu vou botar por exemplo 27 E aí eu tenho aqui embaixo um com o seu blog eu vou botar a Cindy sua idade é: é que eu boto idade vou trocar o consulado aqui por Doc mente ponto bar e ponto Inner táxi e aí eu boto Essa maneira aqui assim a gente já vê o resultado aqui na tela conforme eu vou Escrevendo show de bola né quando a idade é 27 ele mostrou 27 se a minha idade agora

eu colocar aqui zero ele mostra 0 cm se for Dudu ele mostra no Ou seja quando eu quero lidar com valores nulos dentro do Java scripts ou melhor Qual que é o valor de fou para uma variável quando ela não for citada eu tenho duas formas de fazer uma das formas é utilizando o operador ou né então o operador ou ele vai fazer o seguinte Olha a primeira instrução aqui Do lado esquerdo do operador ou ela é válida é um valor válido sim ou não senão ele vai mostrar o valor que está na parte direita

da instrução aqui do operador ou então aqui eu posso botar por exemplo não informado né eu só faço aqui agora ver seguinte sua idade é não informado porque ele mundo não é um valor a o qual o JavaScript considera válido mas tem um problema nesse operador ou se eu colocar o valor zero aqui e Mesmo assim ele continua quem não informado por quê Pro JavaScript o valor zero assim como uma string vazia assim como com Array vazio se eu não me engano assim como o falso assim como o Under Fire assim como duro são valores

que projeto escrito que a gente chama de falso se ou seja valores não válidos quando a gente traz para uma operador ou né E aí a gente vem com o com Duda de coleta incorporator que ele faz a mesma coisa o operador ou porém ele é mais Restritivo que ele vai olhar apenas para valores que realmente não são vários como nulo Under Fire ou valores assim que eles não têm valor significativo mas o zero ele é o valor real ele é um valor primitivo real na Então nesse caso quando eu boto 0 a idade continua

zero né E aí se eu colocar aqui no Lu Aí sim ele vai mostrar ou não informado então e era coisa que a gente precisava saber que é um nula este colar se aproveitou e aí a gente vai falar sobre a próxima Coisa deixou até trazer aqui um pouquinho arrumar aqui a minha a minha ordem dos assuntos para a gente parte para o próximo que é o vamos lá a gente vai falar um pouquinho sobre objetos agora tá objeto eu acho que é a parte mais importante que a gente precisa antes do beat cifra que

a gente usa muito objetos lá dentro objetos no Java scripts são basicamente estruturas de dados não que a gente consegue armazenar conjuntos de Chaves e Valor então um objeto por exemplo zuar eu posso ter o nome do usuário que é dia né eu posso ter a idade que é 27 eu posso ter um endereço que é um objeto aninhado ou seja tem um objeto dentro do outro e aí eu tenho por exemplo rua e eu tenho o número do celular foto 176 176 WhatsApp ou seja objetos eu acho que provavelmente você já sabe o que

é porém como que a gente faz uma boa manipulação de objetos Range mais nada eu queria te mostrar um pouco alguns métodos de Objetos que talvez você não conheça tá então eu vou lá e talvez o método que você não conheça que a gente pode usar em objetos é a expressão hino tá quê que é expressão implement a gente fazer a gente pode verificar se existe uma informação dentro de um objeto ou seja existe nome dentro de usuário seu salve isso aqui agora ele retorna true da que eu tô com uma Extenção por isso que

ele retornou nesse formato Tá mas ele retorna tu Porque existe nome dentro de usuário se eu colocasse aqui por exemplo a neném e salvar se a gente vai ver que ele retorna a falsa mas eu quero te mostrar outras coisas aqui interessante tá esse tem alguns métodos que a gente pode fazer aqui para obter informações específicas de um objeto então por exemplo a gente pode utilizar o método objeto. Quis para retornar um vetor com Todas as chaves do nosso objeto então aquele retornou o nome a idade e o endereço que é exatamente nome da o

endereço eu posso utilizar o objeto. Velhos para retornar todos os valores do nosso objeto ao invés das chaves Então nesse caso ele retorna O Diego 27 que essa luta informação e Object Object porque ele não conseguiu entender qual como que printa esse valor em tela né então uma tática para quando você tá mostrando coisas em tela que elas são Estruturas de dados mais complexas é o usar o Jason. Street Fighter Por volta do teu Consul love ou qualquer coisa assim e aí a gente vai ver o retorno de uma maneira um pouco melhor aqui nesse

caso a gente consegue ver então Diego 27 que a idade e próximo o valor que seria esse aqui e aí a gente tem também o óbvio que ponto entre isso que é outro método Super Interessante que você vai acabar utilizando no seu dia a dia quando trabalhar com leque que ele Retorna de uma forma um pouquinho diferente ele retorna um vetor com vários vetores dentro e cada um desses subvetores que tem dentro de si e ele tem duas informações dentro a primeira informação sendo a chave do objeto EA segunda informação sendo o valor então o

nome é Diego idade é 27 endereço é esse aqui Então veja que tem alguns métodos super importantes para a gente entender sobre objetos aqui net em outra coisa super importante da gente aprender sobre Objetos é um conceito que você vai utilizar muito dentro do iett que é a desestruturação desestruturação nada mais é do que eu consegui remover parte do objeto para uma variável a parte Então imagina que eu quero obter as informações aqui do endereço dentro de uma variável uma instrução uma forma de eu fazer isso seria AdSense igual aí usar ponto é ver se

concorda comigo e eu Don Jason pontos free Fire salvo e eu tenho o meu Endereço uma outra forma de eu fazer isso é utilizando desestruturação Ou seja eu não coloco ela tá vendo que o nome aqui da variável adware é igual o nome que eu coloco o ponto onde isso acontece eu posso simplesmente colocar essa sintaxe de Chaves né do lado esquerdo da operação ou seja do lado esquerdo do igual e assim eu faço uma desestruturação seu salve isso aqui agora a gente vai ver que o resultado é o mesmo tá fui o mais legal

é que eu não Preciso pegar uma única informação se eu quiser pegar o Edson uma variável e pegar a idade em outra Basta dar uma, e agora eu tenho tanto o Ederson quanto à idade que eu vou ter que colocar em outro Jesus wi-fi ou vou ter que colocar eles dentro de um objeto aqui para ser mais fácil beleza vejo que agora eu tenho tanto o endereço quanto à idade sendo exibidas aqui em tela E aí tem outra coisa muito interessante que eu consigo fazer quando Estou fazendo desestruturação né a gente pode ver que Edna

está em inglês name está em inglês idade está em português Seria melhor eu vou escrever page eu posso fazer aqui na desestruturação a a parte de renomear variáveis então se eu quero renomear variável idade para e agora é só eu utilizar page aqui embaixo eu salvo e pronto eu já tenho essa variável atualizado outra coisa muito legal que eu consigo fazer é setar valores de fou para variáveis Então veja Só eu vou tentar buscar uma variável que não existe aqui dentro do objeto user que a variável nickname né a propriedade nickname Se eu colocar aqui

dentro para dar um print nela a gente vai ver que nada vem aqui dentro né Não tem nenhum conteúdo dentro de nickname E aí eu posso fazer o seguinte se eu quero que minha variável name caso ela não exista caso ela não tem o valor válido dentro do objeto user ela tenha um valor-padrão eu posso botar aqui um igual A foto aqui por exemplo Fernandes salvo e agora a gente vai ver que já aparece nickname Fernandes porém se eu passar aqui por mim que nem salvo agora sim ele vai mostrar o valor que está no

objeto e não o valor padrão porque agora sim ele tem um valor válido aqui dentro então isso aqui é a base da desestruturação e é muito importante a gente entender isso porque a desestruturação ela pode ser utilizado inclusive dentro de funções Então Imagina que eu tenho uma função chamada mostra idade e essa função ela recebe o objeto do usuário e ela vai basicamente retornar a idade do usuário aqui dentro né E aí eu poderia botar aqui no blog no e Nordeste a função mostra idade passando o nosso próprio usuário e a gente vai ver quem

tela aparece 27 porque é a idade do usuário a desestruturação ela pode ser utilizado um todo lugar que a gente tem a referência para um objeto então por Exemplo aqui nos parâmetros da função onde eu recebo um e eu posso também no lugar desse objeto colocar Chaves e desestruturadas e usuário então eu pego por exemplo apenas a idade do usuário que eu tô passando como parâmetro para essa função e aí eu posso dar um retorno apenas na idade e olha só eu tenho também 27 e aqui novamente eu posso fazer tudo aquilo que eu tinha

visto antes posso pegar um nickname posso ser um valor-padrão posso renomear caso eu Queira tudo isso pode acontecer em qualquer lugar que eu lhe digo objetos seja parâmetros de funções seja variáveis seja dentro de construtores seja em métodos de classes tudo isso eu posso trabalhar com a desestruturação E aí é importante a gente falar sobre desestruturação porque desestruturação abre para gente um outro leque de possibilidades que é sobre rest operacional o operador de resto isso é muito importante a gente aprender Junto com a desestruturação tá o quê que é o resto operator Lembra que eu

falei que a gente e aqui buscar do nosso usuário apenas o nome dele né E aí eu posso mostrar esse nome Quintela né o que que acontece com o restante das informações do usuário que não são o nome que eu não busquei será que é uma forma de buscar essas informações têm com o resto perfeito Então veja só se eu pego a variável name né desestruturo a variável name propriedade name deste Usuário e eu quero pegar o resto eu utilizo... Dentro aqui da nossa desestruturação isso aqui vai retornar para a gente o resto das informações

que sobraram a partir do name então se eu der innertext agora com a variável resto veja que ele vai me retornar aqui Deixa eu botar um Geison pontos with por volta veja que ele vai me retornar aqui um objeto agora contendo todas as propriedades do objeto menos a propriedade o Ou seja é o resto das Propriedades deste usuário menos a que eu já tirei e aqui se eu tirar uma outra propriedade por exemplo idade veja que agora o resto não vai mais conter a idade esse e o resto é um operador que a gente consegue

utilizar não só para objetos a gente pode utilizar operadores vestes também para ao Rei se né Então imagina que eu tenha um Array contendo vários números 1 2 3 4 5 6 7 8 9 10 tá E aí eu vou fazer o seguinte veja aqui agora como eu tô tratando diarréias eu Não uso chaves para fazer a desestruturação eu uso eu uso colchetes aqui eu tô falando de desestruturação junto com Oeste tá são coisas que andam geralmente juntas a e aqui eu faço o meu rei Deixa eu botar aqui no singular e aí Imagine que

eu queira pegar apenas esse primeiro elemento eu posso fazer de duas formas ou eu boto array 10 e aí eu tenho aqui um primeiro que elemento dentro de força por exemplo Deixa eu colocar aqui força em tela tá logo um Veja a porém se eu quero pegar o segundo elemento Sé quanto que eu tenho que botar um E aí por diante né eu tenho que ir colocando a mudando o índice aqui na 01 para cada elemento que eu quero buscar ao Rei porém eu posso fazer desestruturação também dentro de Race então host a e aqui

eu posso escrever por exemplo first the Second Son é igual ao rei e agora se eu der um blog Aqui no nosso first e no nosso second eu vou ver aqui dentro de força ele retorna O valor um que é esse valor para que isso é quando ele retorna O valor dois porque eu tô fazendo uma desestruturação ou seja o primeiro item desse a Raven para variável força o segundo item do Array vem para o século E caso queira o restante e eu escrevo rest Day eu mostro essa aqui embaixo eu já estou usando essa

variável o resto aqui em cima Então Deixa eu comentar esse código aqui em cima salvo e a gente vai ver agora Kefir se tem um Sé Quanto tem dois e vestem o restante três quatro cinco seis sete oito nove dez é o restante dos números que eu não busquei e quando eu trabalho com desse estruturação EA Reis o jogo ele fica até mais interessante porque imagine ser eu eu eu quisesse pular um número pular um índice do Array então eu quero um eu quero o três e o restante os dois eu Quero pular olha só

que interessante eu posso colocar fazer a desestruturação seja eu quero com um e o três então botar for second Tour a e agora eu vim aqui ó e apaga o século eu deixo só, dele tá vendo que ficou uma, sem nenhum conteúdo aqui dentro agora eu consigo dar o mogno First no Story do Oeste e o meu século ele se perdeu eu pulei ele digamos assim então vejo que agora eu tenho o 3 e o restante Quatro cinco seis até chegar no 10 e assim a gente falou basicamente tudo que a gente precisava falar sobre

desestruturação e o resto o perfeito aqui dentro do JavaScript desde aumentar tudo isso aqui porque a gente vai continuar aqui falando sobre objetos e tudo mais mas eu já tenho muita coisa aqui em tela e eu preciso liberar um pouquinho aqui de espaço na minha cabeça vamos lá próxima coisa que a gente vai falar sobre Sobre objetos ainda é sobre a sorte sintex tá então Imagine que eu tenho uma variável nome que é igual a dinheiro e eu tenho uma variável idade = 27 e agora eu quero criar um objeto que o usuário contendo essas

informações o que eu posso fazer nem o valor vai ser nem idade O valor vai ser idade tá e aquilo que você pode estar percebendo é que o nome da propriedade é igual o nome da variável que armazena qual é o valor dessa Propriedade tá vendo nem idade idade com isso eu posso utilizar a short sintex né que a sintaxe curta que basicamente eu não fazer esse dois pontos eu simplesmente colocar Qual que é o nome da variável e automaticamente o já vez que ele que vai assumir que o nome da propriedade name é neném

e o valor é o valor que está na na variável name e mesma coisa para idade aí aqui vamo trocar para ele já que eu tô cansando de misturar Português Inglês e agora aqui No dia gente wi-fi vou colocar o nosso usar aqui ó e a gente vai ver que ele já criou um objeto com o Nemo sendo o Diego e o ex sendo 27 isso aqui a gente chama de short sintacta próxima coisa que a gente vai aprender do JavaScript que é super hoje é sobre o pênalti mim tá option.ini nada mais é do

que o seguinte Imagine que eu tenho um usuário esse usuário ele tenha deixa eu trazer até aquele esse objeto que a gente tinha lá Anteriormente deixa eu trocar para Leite aqui então nome aí Anderson tá imagine que agora eu tenho que te mostrar Nutella o valor de user. Edreams.it top seu só vai isso aqui agora veja que ele mostrou aqui Rua teste O que aconteceria se no JavaScript se eu remover Esse é esse daqui ou melhor seu comentário vou tirar o adware de dentro do usuário eu salvo Ele não mostrou nada porém se eu for

lá no Consul do meu JavaScript eu vou ver que Ele está retornando um erro Olha só ele tá dando um erro aqui dentro que é cannot read property of undefined Ou seja quando eu tento acessar uma propriedade de um objeto a qual e pode não existir Eu sempre tenho que conseguir trabalhar com erros tá E para eu conseguir trabalhar com erros aqui dentro qual que seria melhor forma Olha eu vou verificar se o endereço existe se o endereço existir eu vou mostrar o Stitch Senão eu mostro não informado por exemplo isso aqui funciona funciona tá

lá não informados na tela não deu nenhum erro Qual que é o problema disso aqui se dentro de Éder Se eu tivesse mais uma informação como sendo sei lá que eu vou fazer algo bem hipotético tá Talvez uma outra informação chamada Zip que dentro dela aí sim tá Qual que é o zip code é a então bota porque 89 160 000 a e Dentro dela tá também outras informações que eu consigo coletar diretamente através do CEP sei lá eu tô pensando em qualquer coisa tá então cidade Rio do Sul Beleza agora Se eu tentar mostrar

aqui em tela user ponto é: Zip. Cold e salvá-la 89 160 000 Porém se não existir o Ederson dentro do usar e eu precisava fazer novamente salvar vai dar erro Se eu precisar fazer um wi-fi agora vai ficar muito complexo tá porque primeiramente eu vou ter que Verificar se existe o Edson beleza se não existir eu vou botar não informado se o Éder se existir aí eu preciso verificar se existe dentro do adware use PI [Música] e se existir aí eu vou pegar o Edson thusy.com Cold senão eu também retorno ou não informado salve só

que agora e beleza deu certo mas olha esse código aqui ou seja quando eu tenho que lidar com possíveis valores de um objeto que Podem ser nulos ou podem não existir eu utilizo o opcional TIM tá e o opcional jeanny ele vai transformar isso aqui no seguinte código nilzer?. Ederson?. Zip.com veja que eu coloquei um ponto de interrogação antes do ponto que acesso uma propriedade interna do objeto em cada propriedade que pode não existir e aí eu posso unir isso aqui junto com um Operador de no lanche Collection para falar que isso aqui não foi

informado olha só que legal e no dia aqui os aprendizados em uma coisa só então eu salvo isso aqui agora e veja que ele tá como não informado se eu tirar o comentário aqui do Ederson mas manter o comentário no Zip ou seja o zip continua não existindo veja que eu coloquei o ponto de interrogação aqui antes de acessar o SIP também eu salvo continua como não informado e aqui tá dando erro Canal porque pode preciso definir Green code tá bom é que esse ponto de interrogação aqui eu botei no lugar errado tá o ponto

de interrogação aqui que eu coloquei do lado do user ele tá pensando que o iuser pode não existir mais o Wilson Na verdade ele sempre vai existir tá o adware pode não existir por isso que o. Interrogação tá junto com Ederson e o se pode não existir por isso que eu posso interrogação vem junto com o zipe tá agora sim eu salvo ele vai Parar de dar erro e continua como não informado se eu tiro o comentário aqui do Zip e salvo veja que agora sim ele mostrou o e aqui para gente 89 160 000

ou seja esse. De interrogação maldito aqui ele vai fazer o seguinte Olha eu vou tentar acessar o Éder do user porém se ele não existir eu não vou mais tentar acessar o restante é basicamente isso e o mais massa é que eu consigo utilizar essa sintaxe para ir mais a fundo tá Então Olha só que legal Imagine que dentro aqui do meu pedras eu tivesse uma função tá isso é muito comum a gente tem objetos que tem funções dentro desse objeto então aqui dentro desse édios eu poderia ter uma função como por exemplo o show

o Ederson coisa que é que eu não vou não vou entrar no mérito do que essa função faz tá eu vou botar aqui retorne Ok E aí novamente se eu for tentar chamar Essa função user ponto Edson esse ponto show Edson e eu colocar isso aqui e eu salvar Olha deu um ok que eu retorno que eu passei para função porém o que que acontece se o Edson não existir erro bom Então olha só eu consigo botar um ponto de interrogação aqui antes do Ederson eu salvo irem para agir aí ele retorna definir E aí

po aí eu posso ter um valor-padrão preço retorno mas o que acontece se o Éder existir mas a função não existir O erro olha só que legal eu consigo botar o ponto de interrogação e um ponto aqui no final na chamada da função ou seja ele só vai chamar essa função caso ela exista eu salvo isso aqui agora e não dá não dá mais ele agora se a função existe ele retorna O Ok podemos ir mais a fundo ainda né veja que tem muita coisa legal nesse aqui Imagine que eu tenha uma variável chamada é

que que ela vai determinar Qual é a propriedade que eu quero buscar Do meu usuário Então nesse caso eu quero buscar a propriedade nem então é muito comum a gente fazer o seguinte quando eu quero utilizar uma variável para buscar qual a propriedade eu posso usar colchetes nos objetos então se eu quero procurar a variável a propriedade nem que é o valor dessa variável que eu posso passar aqui aqui o e veja que ele vai mostrar em tela Diego porque porque aqui o valor daqui é nem Então qual que é a propriedade name do Objeto

user de Vitória retorna isso agora o que que acontece se o meu nome não existir né nesse caso não vai dar erro nenhum porque não é um objeto aninhado só dá erro quando o objeto está alinhado Então vamos fazer isso aqui com Edson aqui eu vou botar Street e aqui eu quero buscar deilza pronto heathers que agora sim ó Rua teste se eu boto aqui agora uma coisa que eu alguma informação que eu não tenho celular state salvo ele deu Under Fire II [Música] o século buguei agora é bom pelo jeito a gente não precisa

nesse caso mas eu sei que a gente consegue usar? E o ponto aqui também para fazer o option mas agora eu vou aí também olha vivendo e aprendendo nesse caso aqui não precisou e eu não sei dizer o porquê mas é isso vamos continuar aqui que tem muita coisa pra gente aprender ainda tá Então deixa eu comentar tudo isso aqui que a gente aprendeu até agora e a gente vai para o próximo aqui o que é aprender sobre métodos de areia vou lá para o link para tomar água e eu já volto agora que eu

também água estamos de volta aqui a gente vai falar sobre métodos de ajeitar porque metros de areia bem lá do actionscript seis lá em 2017 a gente tem vários novos métodos Para trabalhar com a Reis Por eu vejo muita gente falando de alguns deles e esquecendo de outros que são extremamente importante tá então vamos lá a gente vai criar um Array aqui E esse ar ele vai ser super simples 1 2 3 4 5 a gente e começar a utilizar alguns métodos aqui tá primeira coisa a gente tem alguns métodos para percorrer a Resident do

JavaScript a gente consegue percorrer utilizando um forte então por exemplo eu posso criar uma variável e ó Ao rei e eu dou um console log aqui dentro do meu ir ou melhor não [Música] o sexo a fazer document. Baixo. Innertext mais igual funciona deixa eu tentar deu certo ele emocional um dois três quatro cinco que cada índice aqui cada posição no nosso rei a E aí Isso aqui é uma das formas da gente que percorrer um Array a gente tem uma outra forma de percorrer um Array que é utilizando for Each Então posso dar um

Array foreach E aí para cada item eu coloco uma era funcionar aqui dentro né uma função aí eu dou um documento. Baixo innertext daqui eu chamei de item pode ser salvo a gente vai ver que o resultado é o mesmo porém nós temos mais uma opção de percorrer um Array que é utilizando o MEC porém o map ele é um pouquinho diferente a sintaxe dele é igual for each então eu vou fazer um lequinho aqui dentro e aqui dentro eu vou ter algum Tipo de código porém o que que difere do Mec para o fortnite

o que difere é que o map eu consigo fazer um retorno de dentro do Map do O que quer dizer se eu quero percorrer uma Array e retornar alguma coisa a partir desse Array foreach ele não é muito bom para isso então por exemplo Imagine que eu quero a percorrer o meu rei e retornar todo o meu rei x 2 eu quero eu quero criar um novo Reis porém com todos os números dessa re x 2 é claro que você quer um Exemplo muito bobo mas no dia de a gente vai cair em coisas muito

semelhantes a essa então aqui dentro do fora e eu não consigo por exemplo retornar item vezes 2 e salvar o retorno disso aqui no novo Array por exemplo E aí colocar aqui Dogma de ponto bar e ponto Inner text Jason post with novo Array a gente vai ver que o novo Rei aquele Under Fire não tem valor se eu quero fazer isso aqui fora isso eu vou ter que fazer tipo assim é const novo array Ó e aqui de dentro do Farid eu vou ter que fazer o seguinte novo Array. Push o item vezes 2

E aí sim eu vou ter o meu Array com os números multiplicados aqui então 2 4 6 8 e 10 porém com o MEC eu consigo fazer o retorno de dentro desse método então eu dou um retorno aí Tom ponto o melhor vezes 2 e aqui eu dou um conste novo Array é igual a esse retorno se eu salvo aqui agora eu vejo que o retorno aqui é o mesmo ou seja o map eu Consigo ter um retorno de dentro do meu método para algum elemento por fora desse map conseguir obter informações ali de dentro

de uma informação super importante é que o map Ele sempre vai retornar um vetor ou seja um Array com o mesmo tamanho do vetor original ou seja esse novo rei ele sempre vai ter o mesmo tamanho mesmo tanto de itens do que o Array original eu não consigo com o map fazer qualquer tipo de filtro exclusão E como sempre vai ser um Array do mesmo Tamanho Ou seja eu só uso o Mac quando eu quero transformar o meu rei e uma outra informação porém em outro Array né Eu só uso map quando eu quero transformar

uma rei em outro mudando alguma coisa dentro desses itens E aí eu posso fazer aqui dentro condicionais por exemplo se o meu item na o melhor se meu entre um dois três e quatro cinco aqui se ele for par então por exemplo para ele para eu verificar que ele é para eu posso fazer de Diversas formas eu posso usar o molde aqui né então se o módulo do item em dois for zero é o melhor se ele for no caso ele for par eu vou retornar esse item x 10 se não eu vou retornar o

item sem multiplicar por nada olha que interessante eu fiz uma condicional dentro do MEC eu salvo isso aqui agora e veja só um continua o 2 agora é 23 continuou três ou quatro agora é 41 15 ou seja eu criei um novo Array baseado no Array anterior porém eu fiz certas Condicionais certas operações dentro do MEC que vão modificar esses itens de maneira diferente dado o valor do item esse E aí junto com o map a gente tem mais uma cacetada de método para gente utilizar eu não vou entrar em todos eu vou entrar nos

mais importantes que para mim são o map o fio ter o every o som o Five For Fighting index with da são os métodos que são os mais importantes tá E aí vamos lá map a gente já falou vamos falar sobre o fio ter então o fio ter Ele com o próprio nome já diz ele filtra uma Rei então aqui a gente faz o seguinte eu quero filtrar o meu rei eu quero buscar uma seleção de Campos desse Array só que o Filter diferente do Map ele não pode alterar os valores ele só filtra corta

pega um é do aí então eu vou filtrar o meu rei e aí como que eu quero filtrar eu quero apenas os itens que o módulo de 2 seja igual a zero ou seja apenas os itens Paris Olha só seu salvo isso aqui agora ele retorna um Array apenas com dois e quatro se eu quero só os ímpares eu boto um um ponto de exclamação aqui no começo ele vai entregar só 1 3 e 5 né então o filtro ele vai basicamente me retornar uma parte do Array dado se essa condição que eu passei retornar

true ou false se for two ou seja se esse valor aqui retornar true ele vai dizer o quanto show esse no essa esse item vai contendo nova Rei se for falso não ele não vai e aí a gente pode unir os métodos né Então olha só eu Posso filtrar o rei e depois de frio trabalhei eu posso percorrer o meu rei multiplicando os itens por 10 olha só que interessante Então eu tô pegando meu Array original fio e os itens que são ímpares esse novo a re que retornou que foi retornado pelo Filter eu tô

percorrendo ele multiplicando cada item por 10 então é muito legal porque a gente vai concatenando esses métodos aqui e vai fazendo muito sentido tudo tá E aí vamos Lá a gente já falou do neto do filtro a gente vai falar sobre o every então ué ver que que ele vai retornar ele vai retornar um booleano Petro ou falso a ele vai retornar um outro caso todos os itens every todos abre a importante fazer essa analogia se todos os itens satisfazem a uma condição tá então por exemplo aqui é um criar um uma constante chamando o

nome dessa constante vai ser o seguinte todos itens São números é igual e aí vou fazer o seguinte se ao Rei. É ver todo o item todo tipo do item for a Number ele vai retornar tio E se eu colocar um item aqui dentro que não é um número e ele retorna falsa então o every ele retorna true ou false true se todos os itens passarem na condição que eu coloquei aqui dentro falsa se pelo menos um deles não passar perfeito Então veja é super importante Entender isso aqui tá E veja que eu tô utilizando

uma sintaxe curta né para fazer uma em vetor Mas isso é que poderia ser facilmente escrito desse formato aqui ó retorne Type of item e Guanambi então de dentro do é ver eu preciso retornar qual que vai ser a cheka gen na se retorno ele precisa ser um booleano lá então isso aqui sempre vai entrar por falso então do é ver eu sempre preciso retornar de dentro dele tio ou falso também fechou a E aí o sono né o somo ele é como se fosse o ever porém ele não verifica se todos os itens satisfazem

aquela condição ele verifica se pelo menos um item satisfaz Então pelo menos um item e não é um número a reconstrução eu quero verificar se pelo menos um item é o melhor se pelo menos um item é diferente o tipo de Um item é diferente de número seu salvo agora tenho que botar aqui o valor pelo menos O ensino é o número do tio né pelo menos um item desse aqui não é número porque a esse teste se eu tiro o teste aqui e salvo falsa né Eu não tenho nenhum item que satisfaça essa condição

então o sal eo é ver eles são dois métodos que Retornam booleanos só que de maneiras diferentes e aí agora eu tenho o fine né o Fairy ele serve para eu encontrar um item desse aí Então veja só eu quero encontrar um número par dentro desse aí Então eu vou pegar o meu rei vou dar um site e eu quero encontrar um item que o mod de Olá seja zero se eu dar um Consulado aqui no meu quarto ele vai retornar dois porque ele encontra o primeiro item que satisfaça aquela condição o prefeito Diego e

se eu não tiver nenhum número par se eu tivesse algum 3 e 5 a definir Ele não retorna nada ele retorna O valor Indefinido se o quatro vier antes que o dois ele Vai retornar quatro porque ele percorre do começo do Rei até o final e retorna O primeiro que satisfaça a condição então o pai ele faz isso E aí nós temos o Finn index que é exatamente a mesma coisa que o funk porém ao invés de ele retornar o valor do item que ele encontrou ele retorna O índice daquele valor ao Rei Então qual

que é o índice do valor do primeiro valor par no Array nesse caso ele vai retornar um por quê Porque o índice um que é isso aqui o A recomeça do zero zero um o índice do dois é um na então ele retorna um porque o índice do primeiro número par que ele encontrou no Array e por último oi né Oi Dulce ele é muito usado quando eu quero pegar um Array e criar uma nova estrutura de dados com base nesse Away criar algo novo tá e aí o reduce ele não tem muita regra não

tá eu consigo fazer quase que tudo que eu quiser dentro dele então assim tá se dele é a seguinte Consta aqui eu vou criar vou fazer uma Soma e aí eu vou fazer o seguinte Olha eu quero fazer um reduz ou seja eu quero reduzir o meu rei a algo esse algo pode ser um objeto pode ser outro rei pode ser que eu quiser tá E aí o reduz ele tem a sintaxe de um pouquinho mais complexa da gente entender tá então ouvidos assim como os outros métodos são every no primeiro parâmetro aqui dele ele

vai receber uma função assim como esses aqui que a gente já fez é assim como somos assim como é verde não é uma Função Não é maior fã só que o Brasil se ele re o segundo parâmetro o segundo parâmetro é qual o valor inicial e dessa nova estrutura de dados que eu quero criar a partir do aí então Olha só eu quero somar todos os itens deixarei então eu quero somar um com dois três três com 3664 10 10 15 15 eu quero que no final e me retorne 15 e qual que é o

valor inicial dessa soma Zero eu vou iniciar a soma a partir de um número zero se eu fosse criar um objeto por exemplo a partir desse a lei eu ia iniciar aqui com um objeto mesmo que seja vazio ou seja eu tô criando algo a partir do meu rei aqui eu conversar com 10 e aí essa minha função aqui dentro ela recebe duas informações e o meu objeto que eu tô criando que geralmente a gente chama de acumulator e cada informação do aí tá E aqui é bem interessante porque veja só se eu dou um

Bloquinho de ponto Vale. Innertext mais igual e é que eu boto Vamos botar o mais fino aqui acumu leitor botar, no meio e eu boto o item olha só que interessante ele está percorrendo ali o meu o meu rei e na primeira iteração que ele fez ou seja no primeiro item que ele percorreu do rei ele retornou 0110 calculator until it 0 pro como leitor foi porque a gente passou o valor zero que se a gente vai Passar o valor 10 ele ia começar com 10 tá vendo Oi e aí um porque o primeiro item

do Array é um Agora se a gente for ver a segunda iteração que teve aqui dentro seja quando o reduce o reduce foi percorrer o segundo item do Array ele até retornou dois aqui ó tá vendo dois para o item que é o dois aqui ó porém flocculator ele retornou definir porque o e Dulce ele espera que de dentro dele a gente Retorna e qual que é o novo valor do acumu leitor a cada iteração então se eu retornará como leitor é daqui de dentro é o mesmo valor que eu tinha recebido eu fazer o

retorno aqui dentro a gente vai ver que agora invés de um defender ele vai me retornar 0 né Então deixa eu botar aqui há mais alguma coisa para dividir melhor essas essas interações então alguns itens aqui pra gente visualizar melhor Então olha só a primeira iteração o acúmulo leitura zero E o item era um a segunda 02 a terceira a 04 e 05 né 10 vendo aqui e 1 2 3 4 5 - 1 2 3 4 5 e agora para eu fazer a soma basta eu retornar o acumu leitor porém somado do meu item

eu salvo aqui agora e veja que no final das contas o meu accumulator ele foi aumentando ao longo do tempo então ele era 0101 da quanto um depois ele começou comum e que 21 com 23 então 33 mais 366 mais 41010 mais cinco No final a gente acabou não mostrando nada porque o valor da soma no final das contas tá dentro dessa variável soma aqui então se eu mostrar agora a variável soma aqui no corpo do meu do meu HTML aí sim eu tenho o meu 15 e assim a gente passou por todas as todos

os métodos de Array que eu acho mais importante aqui é de dentro do Java script para começar a trabalhar com Direction e é super importante saber esses métodos aqui porque ele é que a Gente usa muito eles por causa de um conceito que o iett implementa que se chama imutabilidade quando você chegar lá no leque para aprender você vai lembrar disso que eu tô falando e você vai saber o porquê que esses métodos aqui de Array eles são tão importantes para você saber aí no dia a dia então vamos lá agora a gente vai partir

para a próxima coisa importante da gente saber aqui que é sobre template literals Tá o que que acontece isso aqui é super Simples Tá vou passar super rápido quando a gente tem a uma mensagem por exemplo eu quero incluir uma variável dentro dessa mensagem então eu tenho o nome Diego e eu quero falar bem vindo a E aí eu quero botar Diego aqui no final então eu posso fazer dessa forma aqui certo se eu dou aqui um DOC net o Bari. Pinger text message e salva Olá bem-vindo Diego só que existem formas melhores de fazer

isso aqui que é utilizando a interpolação de trens né Então eu boto ao invés aqui do das "eu boto o acento grave né ou a crase e boto aqui dentro com o sinal de dólar e entre Chaves A o nome né que a variável que eu quero colocar aqui dentro salvo e tá lá bem-vindo Diego o legal você quer que eu consigo também aqui dentro fazer tudo aquilo que a gente já tinha visto então posso assistir o nome não existir eu quero botar um nome padrão por exemplo visitante tá então aqui existe se eu troco

aqui para Lulú ele bota visitante então eu consigo fazer condicionais aqui dentro né então a se o nome poderia fazer de outra forma seu nome existir eu boto o nome senão e bota o visitante posso fazer if aqui dentro posso fazer o que eu quiser não temos contas tá isso aqui não é o mais importante é não existe outro conceito aqui é que a gente pode ir e eu acho que esse conceito não é tão importante tá mas são as tags tempo aí Então será que eu passo por isso conceito que eu acho que não

precisa estar os pega template marcam importante que as você quiser aprender um pouquinho mais sobre isso foi por aqui por tag template pega o tempo a letra os Aqui não na lua já não dura porque não cara por favor vamos ver o posto aqui do Paulo a pega template então é basicamente uma forma de você conseguir não é isso aqui não pega não E é isso é isso aqui não não isso é isso aqui é uma forma da gente conseguir passar chamar uma função de uma maneira diferente tá para eu conseguir passar fazer com cada

valor que eu passo dentro de um template literals seja é seja passada por dentro de uma função eu não vou passar e por isso porque porque não é importante você saber isso para trabalhar com ele é que a gente usa pouquíssimo is isso usa mais lá dentro do estado do componente Mas são coisas Que assim oh tem tanta necessidade de você saber aí vamos continuar aqui a gente vai falar agora sobre Promises que é um dos últimos assuntos que eu quero passar a pra gente aprender antes da gente trabalhar com o iett Então vamos lá

é para gente começar a entender o que são pronomes a gente tem que partir do pressuposto que nem tudo na programação é síncrono ou seja nem tudo na programação executa Exatamente no mesmo momento que a gente Manda executar ou seja existem coisas que elas demoram para nos retornar informações e a gente não pode ficar evitando que todo o restante do nosso código continue executando até aquilo nos devolver a resposta que a gente espera por exemplo se eu quero buscar uma informação de um servidor que tá lá nos Estados Unidos se eu busco essa informação aqui

do Brasil isso tem um tempo de resposta existe uma latência para isso nos retornar a resposta Geralmente 200mm segundos 300m segundo sei lá Depende muito da sua conexão mas essa latência esses 300 milissegundos a gente não pode com que todo o restante da nossa aplicação fique esperando isso acontecer para aplicar eu voltar a funcionar ou seja a gente precisa com que algumas coisas da nossa aplicação sejam assíncronas que elas podem acontecer de forma em paralelo e a gente conseguir dar a tratativa correta quando isso terminar de acontecer né então e Por isso que vem o

conceito de pronomes né promessas são promessas Promessas de que algo vai acontecer ou vai dar errado e aí a gente pode saber só que isso é no futuro né a gente ainda não sabe se aqui do já deu certo ou errado e aí quando a gente vai trazer no isso para para dentro do código não é como é que a gente entende o que que é uma forma se você já deve ter visto as planícies por aí Promises nada mais são daquele aqueles métodos que a gente pode ouvir o Resultado através do ponto de no

por exemplo ou do.cat da Mas a gente pode criar uma provas também então por exemplo eu posso criar uma variável a chamado E é só uma função Preciso achar um nome legal soma dois números Nossa torcida Mas é isso aí soma dos números que eu posso criar uma forma se veja só ó e aqui dentro dessa provas eu passo uma função é o fim Essa era fanfiction Ela recebe dois parâmetros usou e o leque resolvi é uma função que eu chamo para indicar que deu tudo certo Project é uma função que eu chamo para falar

que deu ui né E aqui para eu mostrar que isso aqui é a cinco no quinto aqui pode demorar um tempo para responder eu vou fazer o seguinte eu vou usar 17 tá empauto do JavaScript Isso aqui vai demorar dois segundos para executar quando isso aqui executar eu vou chamar a função resolvi passando Dois números por exemplo o melhor uma soma mandar cinco aqui tanto faz é só para mostrar o exemplo mais esdrúxulo do mundo aqui na e agora que acontece quando eu chamo a função soma dois números a gente pode ver que se eu

der um ponto aqui no final é melhor eu não preciso isso aqui na nenhuma função né para ser uma função eu tenho que fazer dessa forma aqui ó sou a soma dois números é igual a Assim teria que ser dessa forma por ser que você é uma função e aí eu posso chamar E aí eu posso ver que tem o ponto dentro e o cat e aí como eu Isso aqui é uma função eu posso receber o número a e o b e aqui eu retorno a mais para ficar um pouquinho mais descritivo eu pego

a forma inteira e joga o dentro de um critério tá achou então quando eu chamar a função soma dos números passando o número a e o número B eu tô retornando uma promessa de que isso aqui vai dar Certo ou não essa promessa ela demora 2 segundos para resolver e aí ela retorna a soma dos dois números então quando eu chamo o método soma dos números eu posso usar o ponto vem para buscar o valor da soma e aí eu coloco esse valor dentro do documento. Innertext os seus alvos aqui agora a gente vai ver

que nada parece Nutella depois de dois segundos aparece nota a Number A porque eu não botei aqui os números 1 e 3 só salva ó espera um pouquinho dois Segundos e agora aparece quatro então a provas no JavaScript ela é algo que vai demorar um certo tempo para resolver para retornar os dados e nesse caso a soma deu certo né por isso que eu chamei um novo Mas se eu tivesse chamado o cheque a gente ia ver que daí não ia mostrar nada em tela pelo contrário ele é retornar um erro aqui no nosso Consul

falando aqui intromete né porque eu não tratei a O Retorno de erro da prova em cima e aí eu tenho o ponto Kate que é o Método que é chamado quando eu tenho algum erro né Então vão Consulado por exemplo aqui no erro salvo aqui só pra gente visualizar se eu venho aqui no consultale retornou o erro que o valor é quatro porque eu passei o valor para o erro né como seria o 4 o que a gente teria talvez algum erro especificamente aí aquele fala em qual o arquivo ocorreu esse erro e tudo mais

Então a prova mas ela sempre vai contar com o ponto vem e o cat né O Dani quer Dizer deu tudo certo o cat alguma coisa não deu certo e aí para gente não ficar nesses exemplos de soma a gente vai partir para algo mais mundo real por exemplo como eu trouxe antes Imagine que eu queira buscar a informação alguma informação que tá em outro servidor por exemplo eu posso usar para isso a Perfect do navegador que ela serve para eu ver disparar uma requisição http e eu vou separar essa requisição lá no servidor do

bitgamer na peido viciante Então https: ba ap constructive. Com barra e os barra Diego 3G a a e agora isso aqui é uma prova está eu posso usar o ponto dentro para pegar a minha resposta vou dar um consolo aqui para gente ver o que que tem dentro dessa resposta e posso usar um ponto quente para pegar meu erro caso eu tenho algo mesmo vou dar uma com solado erro aqui também E se eu salvar isso aqui agora a gente vai ver que aqui no meu consulog agora ele Retornou a resposta porque ele caiu aqui

no dentro quer dizer que deu tudo certo se eu fui ver dentro dessa resposta eu tenho várias informações aqui headers URL Type statustext redirectto OK e eu tenho que o Bari né o Bari ele é uma string né do JavaScript E aí eu posso converter essa resposta aqui para algum formato para eu conseguir ler isso de uma melhor forma né então aqui dentro do response eu tenho alguns métodos que eu posso utilizar por Exemplo o Jason e o teste né o teste é um método que ele vai pegar a qual que foi o retorno dessa

requisição e vai converter texto porém o teste ele também é é uma forma né então quando eu chamo o teste aqui ó ele a gente pode dizer que passando até o mouse por cima tá ali ó Thrones stream né Ele é uma Promise com a promessa de que vai retornar um texto no final das contas e aí eu posso fazer um alinhamento eu posso o seguinte ponto de New horizons Response. Text. Vem eu pego o Bari E aí seu dom consulog no meu bar aqui a gente vai ver que agora ele retornou aqui ó todo

o conteúdo retornado por essa requisição a gente pode ver que esse conteúdo Aquele é um objeto java script então ao invés de conversão converter um texto a gente poderia converter isso aqui no Jeison que ele é converter esse objeto eu já inscrito então salva agora assim ó ele Já retorna como um objeto JavaScript já fica até mais fácil eu visualizar as informações que eu tenho ali dentro e tudo bem a gente já entendeu Como trabalhar comprove esses mais vamos entender aqui um pouquinho de como que a gente pode melhorar isso aqui tá Então a primeira

dica que eu queria dar para você quando a gente trabalha com Promises é quando eu tenho prova esses aninhadas tá vendo que eu tenho aqui um ponto dentro e dentro Eu tenho outra Prova esse ponto dentro é ruim né porque vai chegar um momento que eu vou fazer uma cascata vai a Ferrari do do Goku Então nesse caso eu posso fazer o seguinte veja som eu posso dar um ponto vem aqui dentro pegar a minha resposta e retornar daqui de dentro outra Ponce Então vou retornar responso ponto de Jason tá vendo e aí eu posso

fazer um ponto dentro alinhado um abaixo do outro e agora aqui eu vou ter o meu baile e bom então nessas linhas Aqui ó eu tenho Exatamente esse mesmo código A diferença é que esse ponto dela meu Deus do céu e o cachorro destruir uma luz aqui pressiona uma cara de mal de cada um o prefeito voltando a diferença é que esse ponto de aqui ó ele fica na mesma coluna e o Denis anterior então não precisa ficar criando essas Cascatas né E no final vai dar na mesma eu salvo Aguarda um pouquinho que já

tá aqui o resultado do Meu do meu bairro outra dica que eu gostaria de deixar para você é que a gente tem mais um metro além do tempo e do cat que é ufile.io file é algo que vai ser executado o método que vai ser executado Independente se deu certo ou errado porém vai sempre executar no final da planície ser resolvida ou rejeitado seja no final dela executar Então vou correr aqui apresento um deu seu salve só que agora a gente vai ver que ele dá o Console aqui do Vale do resultado e depois ele

dá um consuloc deu né porque foi executado aqui no final se eu botar aqui uma URL não existente e para forçar cair aqui no erro Olha só salvo ele deu o erro aqui em cima e ele deu também a mensagem deu aqui no final porque ela vai executar Independente se deu certo ou errado ela sempre vai executar no final de tudo isso é bom caso a gente quer tirar algum louder algum login da tela né que tá esperando ali a prova de Terminar ou qualquer coisa assim e aí é super importante falar que quando a

gente trabalha compromissos Nem sempre é trabalhar aqui com o ponto de n e Kate é o mais visualmente bonito né a gente tem outras formas de trabalhar com isso por exemplo eu posso criar uma função chamada busca dados no 20 Rubi essa função aqui ela vai fazer esse mesmo conteúdo que eu tinha antes aqui então posso até tirar o comentário porém eu posso utilizar a Sintaxe de async-await na do próprio do próprio juiz e a sintaxe Dia cinco ela permite com que eu faço e aqui falar que essa função aqui ela é assim né certo

ela é uma função que ela tem algum código dentro dela que demora para executar que é uma prova se E aí o que eu posso fazer é transcrever esse código da seguinte forma com se response que tá aqui no de no eu boto desse lado: igual e aí eu boto ao leite ou seja eu quero que Alguma aguardar alguma coisa executar que é a minha chamada aqui para obter https aperitivo. Com barra e o Celso Barbieri 3G E aí com o leite a próxima linha de código só vai executar quando essa aqui terminar ou seja

ele vai aguardar essa promessa aqui finalizar para daí Executar a próxima linha de código E aí eu posso usar o ao leite novamente no expulso.de Só que também era uma prova e aqui eu dou um consulog nesse meu bar Oi e aí se eu tiro tudo Isso aqui e salvo a gente vai ver que no final das contas [Música] e eu preciso chamar funciona tá Chama a função aqui e no final das contas ele dá um blog do baile tá dia que como é que eu faço Kate e o Finale que nesses casos o cat

basta eu vou fazer um frete aqui por volta então faço aqui um vai coloca o código aqui dentro Kate pego o erro com seu blog do meu erro esse Salvo Não Vai dar erro aqui mas se eu mudar URL aqui para alguma coisa qualquer salvo a gente pode ver que ele já mostrou o erro que dentro e o Finale mesma coisa eu faço só um Fire aqui no final escrevo o teu E aí ele vai executar o Finale tanto no caso se ele cair no pet quantos ele não cair no pet o Finale sempre é

executado E aí uma coisa importante de falar sobre sobre isso quando eu uso a sintaxe de async-await é que por padrão toda função que eu uso aqui o ascendente Do JavaScript ela automaticamente vira uma prova está então quê que eu quero dizer Imagine que a por exemplo aqui de dentro quando eu dei esse consolar di Bari Ele trouxe aqui várias informações do usuário tá vendo eu vou pegar só o login Ou melhor só o nome então eu vou retornar daqui de dentro Bari. Nem Então olha só eu tenho um retorno agora desse método buscar dados

no beterraba Se eu tentar salvar essa variável Man Aqui no busca da chamando a função busca da solides deve salvar o retorno dela numa variável name e tentar dar um consulog e nem olha só ele não mostrou o nome Diego Fernandes na verdade retorno Chrome se tá vendo formas Depende por quê Porque toda a função assíncrona ela vira uma promessa automaticamente então para eu buscar o nome do usuário Agora eu tenho que dessa função aqui usar o ponto dentro e aí eu vou ter o nome do usuário salvo e agora Eu tenho aqui ó Diego

Fernandes e agora o deu ele veio antes né porque esse Fi nele aqui ele executou por causa dessa pronomes aqui né então ele retorna antes do que esse consulog que está aguardando essa planície maior Mas beleza a gente entrou bastante aqui para falar sobre Promises e tem mais um assunto importante que eu acho importante você saber antes de você começar a trabalhar com o iett que é sobre importações e exportações dentro dos jovens clipes tá Isso eu vou passar de uma maneira bem simples porque a gente não precisa então dá para a gente falar sobre

isso então vou pagar tudo conteúdo que eu tenho aqui dentro vou criar uma outra pastinha chamada Lily ó e vou criar um arquivo chamado né. JS e aqui a gente faz o seguinte imagina que eu tenho uma função soma recebe aí ver e ela retorna a mais tá E aí dentro aqui também eu posso importar essa função soma para conseguir utilizar ela Aqui dentro então se eu tô usando vs code basta eu escrever aqui ó soma e ele já vai fazer a importação para mim automaticamente não não vai fazer matar então eu importo de dentro

de livre barra né eu importo a minha soma a ele não importou porque eu não escutei ela daqui de dentro Eu preciso exportar a função daqui de dentro e aí eu posso importar essa função e aí se eu dou um consolar de soma 12 salvo tá lá já mostra o três ali Para mim E aí eu posso exportar várias funções aqui direto então eu posso exportar mais uma outra função chamada subtração A e B e torna Oi e aí eu posso importar aqui tanto a soma quanto a subtração subtração de dois e um ficam né

2 - 11 então a gente pode importar várias funções e variáveis de dentro de um único ativo no não preciso importar só funções eu posso exportar também uma variável chamada selap que é igual amar Nas ponto PSI Eu salvei só que agora eu posso importar aqui de dentro o pin e eu dou um consuloc e salvo Italy Cup A então o que que eu quero mostrar que a gente tem várias formas de fazer essa importação exportação e quando eu faço à exportação com o EcoSport o que que acontece tá vendo que o nome da função

é soma e aqui a importação precisa ser soma eu sempre preciso importar com o mesmo nome que eu exportei a gente chama isso de nem me Ecosport qual que seria a outra alternativa Diego eu posso ter EcoSport de fou o que que acontece imagina que eu tenho um arquivo que ele só tem uma exportação ou seja transportando uma só função de dentro dele Oi [Aplausos] e aí lá de dentro do meu bem eu posso importar de dentro de pontos Lib/some a função some quando eu tenho uma única a que ficou duplicada na vou Chamar de

sangue que só pra gente não ficar com mesmo nome como eu tenho uma única exportação uma outra alternativa seria utilizar uma funcionalidade que se chama EcoSport de pouco eu posso exportar o valor padrão para essa importação digamos assim e aí aqui dentro eu não uso chaves para importar eu importo simplesmente dessa forma o que que é isso possibilita para gente no fim das contas Só se eu for utilizar essa função some o quê que isso Possibilita é a gente renomear é a importação aqui então aqui ó eu tô escutando a função com nome some-se aqui

eu quero importar ela com outro nome o tempo soma não tem problema vai funcionar o que eu particularmente acho ruim né Eu prefiro sempre utilizar aquele padrão de Neymar ex fortes Independentes eu tenho apenas uma única exportação então eu nunca eu praticamente nunca uso o default sócio muito necessário E aí eu faço sempre Assim ó são e aqui o importo mesmo que seja a única importação são porque isso aqui abre portas para gente se a gente não usa nele Export abre portas para gente esquecer de trocar nomes de importações quando a gente troca o nome

das funções é abre portas também para a gente vê menos possibilidades de adicionar novas exportações em arquivos que antes só tinham uma importação mas tem mais coisas que eu quero te mostrar aqui tá Então vamos lá olha outras Coisas legais que a gente pode ver aqui Imagine que eu queira importar tudo o que que eu tenho dentro de um arquivo dentro de uma única variável olha só que legal eu posso fazer um Import* ou seja tudo e é que eu dou o nome a vou chamar de na é de dentro do arquivo livre barra mas

se eu der um consulog agora nesta variável mar dentro dela eu vou ver que ela tem o pi o soma e o subir são as duas funções então é um ponto soma por exemplo 1 e 2 eu tenho Três ou seja eu importei tudo que que o arquivo mais exporta e coloquei dentro de uma variável e aqui dá para a gente ir mais a fundo ainda olha só imagina que eu quero importar a variável a a função solo porém o que era renomear ela eu posso dar soma S são E aí eu dou um tom

seu lado some 1 e 2 Volta tem três aqui também ou seja eu consigo renomear as importações é aquele momento que eu tô importando e vou te mostrar mais uma outra coisa que dá para fazer que são Pouquíssimos casos de uso mais Talvez seja interessante você saber então eu posso por exemplo imagina aqui dentro desse arquivo são ah ah eu queira importar a variável a função soma aqui dentro dele então eu vou importar a função soma que tá dentro do arquivo né ah é isso é só tá certinho e eu quero exportar essa função daqui

de dentro Então eu posso importar e depois eu posso exportar ela daqui de dentro porém eu posso fazer tudo numa Linha só então era só se eu te trocar o importe por EcoSport eu tô escutando uma função soma que nem é desse arquivo que está em outro arquivo E aí aqui no meio do meio eu posso importar a função soma direto de dentro do arquivo Sam e posso usar ela sem problemas nenhum aqui dentro e tá lá o resultado três Então esse arquivos a mole tá fazendo bem que o proxy né ele tá importando um

a função que tem mar e Reis portando ela para os arquivos que importam esse aqui vencer e Agora sim a gente finalizou e faz é de falar sobre todas as funcionalidades que eu acho que você deveria saber do JavaScript antes de partir para o iett em cima é importante dizer que claro alguns exemplos desse aqueles foram mais simples porque era para ser mais rápido mesmo a gente já tá aqui acho que só mais de uma hora de conteúdo mas se você ficou com dúvidas em algum em algum desses conteúdos tem tudo isso muito mais a

fundo lá dentro do discovery Inclusive a importante dizer que aqui do próprio Discover da rocketz it depois que você aprendeu todos esses conceitos você pode então partir já para o iett aí já deu e transferir leva aqui no hotel deixou entrar aqui quando você entra aqui no Discovery e você vem aqui na trilha especializar você vai ver vários desses conteúdos que eu mostrei aqui para você mais assuntos né então por exemplo java script a 5 mícrons isso como trabalhar com ideais e No final de tudo que você já tá confiante aí depois de pegar todos

esses conceitos confiante de ir para o iett aqui fundamentos do Yeti pegar aí entrar a fundo no iate se você vai ver como que esses conceitos são utilizados na prática e eu vou me despedindo por aqui deixa aí nos comentários que que você achou desse vídeo outros vídeos que você gostaria de ver em qual desses conteúdos aí você talvez aprendeu de novo que você não conhecia deixa o like a gente vê na Próxima um grande abraço e valeu e [Música] E aí