10 TRUQUES DE JAVASCRIPT

Bora aprender muito JavaScript? No vídeo de hoje eu vou te mostrar 10 truques no JavaScript que vão te levar para outro patamar como programador em JavaScript. Se você tá começando no JavaScript ou se já tem uma certa experiência, o vídeo de hoje vai te ajudar bastante, porque algumas ferramentas aqui duvido que você conheça.

Então bora lá porque hoje vão ser 10 truques para você evoluir no JavaScript. Eu sou Rodolfo Mori. Seja muito bem-vindo ou bem-vinda a mais um vídeo do canal.

Bora pro vídeo de hoje. Só um detalhe, se você ainda tá escorregando JavaScript, ainda não entende muito bem, eu vou deixar aqui na descrição e também no card um curso de JavaScript gratuito para você. São várias aulas que ensinam vários conceitos importantes do JavaScript, que que é uma variável, o que que é uma função, como usar.

E não só isso, tem várias ferramentas legais para você entender do JavaScript, tá bom? Então, se ficou meio confuso com alguma coisa, assiste os vídeos lá. Então, agora bora entender a primeira dica.

Primeiro truque pra gente começar a aquecer os motores é algo muito simples, mas eu acho muito legal. Bem, tem várias situações que você vai encontrar e você tem uma string. Isso aqui é um texto.

E você quer transformar num número. Então você quer transformar uma string num número. Quando que isso acontece?

Bem, às vezes você tá trazendo um dado que vem do banco de dados e ele é uma string e aí você quer liar com esse dado como se ele fosse um number ou vice-versa. E aí, normalmente, quando uma pessoa precisa transformar o dado, ela vai às vezes criar até uma nova variável, vai criar um novo número e aí vai pegar o número, vai usar o number e aí coloca o número aqui dentro. Então ele, você vai ter que fazer tudo isso aqui para transformar em número.

Mas entretanto, todavia, tem um jeito muito mais simples, muito mais rápido, que é só você colocar um sinal de mais aqui, ó. É, é só isso mesmo. Colocou um sinal de mais na frente, ele vai transformar uma string em número.

E eu posso colocar o sinal aqui ou eu posso colocar o sinal, por exemplo, na frente do nome da variável. Quer ver? Ó, eu vou usar uma ferramenta chamada typeof.

Então, eu vou pegar o console. log typeof. O typeof vai me falar o tipo da variável.

Eu vou colocar o mais na frente. E aí vamos rodar esse código aqui, ó. Eu vou rodar o código aqui embaixo para você ver a saída.

E ele tá falando que é um number. Se eu tiro o maisinho, olha só, olha só, olha só. ele fala que é uma string.

Então, primeira dica de hoje, quer transformar uma string em número, é só colocar um maisinho do lado. Bora pra segunda. Segundo truque é o seguinte.

Você que tá começando a programação, queria te falar que a gente usa muito essa estrutura que chama objeto. Objeto é uma forma de a gente juntar informações. Então, tenho a informação da pessoa, nome, idade, sexo, escolaridade e assim por diante.

Só que às vezes a gente quer separar essas informações. Então, o que que a gente faz? A gente cria variáveis.

Eu vou criar a variável nome que vai ser igual a pessoa pon nome. Então ele vai pegar aqui o pessoa pon nome. Então dentro de nome vai ter o João.

Ah, eu vou criar a variável idade que vai ser pessoa ponto idade e assim por diante. Mas o que funciona? Funciona sim.

Ó, se eu colocar um console plog aqui, ó, em nome idade. Lembrando que console. log é um comando pra gente ver aqui a saída dos meus dados, tá?

Então eu vou salvar. Eu não tinha salvo. E aqui na saída dos meus dados eu tenho João e 25, que é o que tá dentro de nome e idade.

Mas entretanto, todavia, tem um jeito mais fácil de eu fazer isso aqui. Vou deletar tudo e a gente vai utilizar uma ferramenta do JavaScript que a gente vai fazer o seguinte, ó. Eu vou colocar aqui os bigodinhos igual a pessoa.

Agora eu consigo criar variáveis diretamente com o que tem aqui dentro. Então veja só, eu vou dar um contrl espaço, o JavaScript até completa para mim. Então eu posso criar uma variável chamado cidade, escolaridade, estado, idade, nome, sexo de uma forma bem simples.

Por exemplo, eu quero criar uma variável chamada nome e uma variável chamada idade. Então o JavaScript muito do inteligente, ele vai criar uma variável com nome, nome e vai colocar o nome, o idade e vai colocar idade. Por que isso?

Porque eu coloquei o igual pessoa. Então ele sabe que ele tem que procurar dentro de pessoa um nome, uma idade e criar variáveis com esses valores. Se a gente der um console p log de novo, você você vai ver que o resultado é o mesmo, mas de uma forma muito mais elegante.

E essa dica tem parte um e parte dois, ó. João 25. Perfeito.

Parece até texto bíblico, mas é o nome João, idade 25. Ele automaticamente cria a variável com o nome aqui das chaves dos objetos. Mas se eu quiser trocar o nome, eu não quero que o a variável nome chame nome, eu posso trocar também.

Então ele vai procurar dentro de pessoa o nome e eu coloco dois pontinhos e eu posso renomear. Então não vai ser nome, vai ser nome, pessoa. E o idade não vai ser idade, vai ser idade, pessoa.

Então basicamente o que que ele tá fazendo? Ele tá procurando lá dentro de pessoa um nome, só que na hora que ele pega o dado de nome, ele cria uma variável chamado nome pessoa. E a mesma coisa pra idade pessoa.

Agora se eu procurar por nome e idade, ele não vai encontrar, ó. Ele vai falar que não existe, deu erro. Agora, se eu procurar por nome pessoa e por idade pessoa, agora sim, deu.

Bom, eu vou rodar aqui. E aí, ó, você vai ver que ele mostrou João 25. Comenta aqui embaixo, você já conhecia essas duas dicas?

Ainda não. Quero saber de vocês. Das duas.

Já conhecia as duas? Nenhuma. Vamos pra próxima.

Terceiro truque, ele é bem interessante. Olha só, eu tenho duas variáveis. Vamos pensar aqui, ó.

Tenho duas variáveis. A variável A e a variável E. A vale 1, B vale 2.

Tá? colocar o leti na frente. A vale 1, B vale 2.

E aí, vamos supor que eu queria inverter os dados dessas variáveis. Eu quero que A valha do e B val. Aí você talvez pense: "Ah, eu vou criar uma variável C, dentro de C eu guardo A e eu vou criar a variável D.

E dentro de D eu guardo B. E agora eu falo que A é igual a C, não igual a D. E B é igual a C.

Que confusão, né? Eu só queria inverter um o valor de um pelo outro. Então, tem uma forma mais simples de eu fazer isso.

É só eu pegar A B dentro de conchetes e falar que é igual a B A. Só isso. Com isso, o JavaScript entende que ele tem que inverter as bagaças.

E eu vou colocar um console p log pra gente ver se funcionou mesmo, né? A gente tem que matar a cobra e mostrar o pau. Vamos lá.

Deixa eu limpar aqui. Vou rodar. E voá.

O A agora é dois e o B agora é um. Dessa forma aqui, ele inverte o valor que estava nas duas variáveis. Olha só que legal.

Agora vamos pra terceira. Terceira já foi, Rodolfo. Terceira foi essa.

Agora a gente vai pra quarta. Bora lá pra quarta dica. Quarta dica é o seguinte.

Imagine uma situação. Eu não vou criar o objeto data, mas imagine que existe uma variável data que tem muitas informações, muitas, muitas, muitas. Veio 30 informações do usuário.

Só que eu quero separar as informações do usuário, só nome, idade, e-mail. E aí eu crio uma segunda variável. OK?

Mas entretanto, alguns usuários t nome e outros não tm. E aí quando esse usuário não tiver nome, não veio nome nenhum aqui em data. ususer.

name, imagine que eu tenho milhares de usuários. Alguns vão ter nome, outros não vão ter. E os que não tiverem nome, eu quero colocar anônimo.

Pessoa não colocou nome, eu quero colocar anônimo aqui. Ã, que que você faria? Ah, talvez você faria o seguinte, ó.

Se data. user. name for igual a nulo ou data.

user. name user. Name for igual a falso ou vazio.

Aí se tudo isso acontecer, aí eu falo que data. user. name vai ser igual a anônimo.

Aí aqui dentro eu coloco o data. ususer. name.

Ou senão eu já crio uma variável chamada name e falo que ela é anônima e enfim, é toda uma engenharia para fazer algo que pode ser muito simples. Que que a gente vai fazer aqui? Bem, tem um operador no JavaScript que ele é assim, ó, duas interrogações.

E basicamente ele vai executar o que vem depois dele se isso aqui for nulo, se isso aqui tiver vazio, se isso aqui for falso. Então, se isso tudo aqui não existir, se a informação for falsa, for um defined, vier uma string vazia, aí sim ele coloca isso aqui. Então, aí você coloca anônimo.

Anônimo. Pronto, pronto. Pronto.

Ou seja, ele vai buscar lá dentro de data. ususer. name.

Se lá tiver vazio, usuário não preencheu nenhum dado, automaticamente ele coloca isso aqui. Ou seja, ele só coloca isso quando isso aqui for falso. A gente tem um operador no JavaScript que é basicamente o contrário, né, que é os dois e comerciais.

Os dois comerciais eles funcionam ao contrário. Se isso aqui for verdadeiro, se tiver alguma coisa aqui dentro, aí ele executa isso. Isso aqui ele vai executar o que tá à direita se isso aqui for verdadeiro.

E assim ele só executa o que tá aqui se isso aqui for falso. Essa dica aqui, ó, é bem legal e eu nunca vi ninguém falando dela, hein. Essa aqui já merece o seu like e se inscreva no canal porque toda semana tem conteúdo aí.

Likezinho maroto. Se você não tá gostando, deixa o dislike. Só não fica em cima do muro, não seja um anônimo.

Então agora vamos pra quinta dica. A quinta dica, eu vou ser bem sincero, é uma ferramenta que eu gosto muito e depois que eu aprendi a usar essa ferramenta, eu lembro que foi logo que eu aprendi JavaScript, eu utilizei ela várias vezes. Bem, vamos supor que eu tenho um arrei.

Eu tenho um arrei de frutas, poderia ser um arreio de pessoas, poderia ser um arrei do que você quisesse. E tem vezes que você quer saber se algo existe lá ou não. Imagina que você tem uma rei de usuários e você quer saber se existe um usuário lá que mora em São Paulo, por exemplo.

Como que você faz isso? Bem, para isso a gente tem uma ferramenta que chama includes. Então eu pego o meu arrei ponto includes e eu coloco o que que eu quero saber que tem lá dentro.

Então eu pergunto: "Olha, o meu arrei tem maçã dentro? " E o includes ele retorna sempre true ou false. Então ele vai percorrer todo o meu arrei um por um e vai procurar a maçã.

Se ele encontrar a maçã ele retorna true, senão ele retorna falso. Vamos ver então. Vou dar um console.

do log e vamos ver o que que ele vai retornar para nós. Eu vou rodar nosso código. Eu vou descer aqui.

E ele retornou true porque tem maçã. Se eu colocar a cerola, acerola, tem acerola ali dentro, não tem. Eu vou rodar.

E agora você vai ver que ele vai retornar falso. Então o cluts ele verifica se essa informação que tá aqui dentro ela está inclusa, se elas tio ou não. Se tiver ele retorna true.

Ó, coloquei aqui no console log true. Se não tiver ele retorna falso. Eu poderia ter guardado isso também numa variável.

constet array é igual aí ele guardaria aqui true ou false e aí eu faria alguma verificação no meu código. Então guarda a nota incluso. Inclusive eu queria te convidar para toda segunda-feira participar das nossas lives.

É aqui no canal toda segunda-feira a gente faz lives falando de JavaScript, HTML, CSS, React, Node, bancos de dados, como se tornar um programador do zero, como fazer um currículo, um LinkedIn. Eu trago convidados também. Então, se você quer se tornar um programador e um programador bom, quer fazer transmissão de carreira, clica no primeiro link da descrição e participe toda segunda-feira às 8 horas da nossas lives ao vivo respondendo perguntas e trazendo muito conteúdo.

Fechou? Tô te esperando na próxima live. E agora já estamos passamos da metade, né?

Então, se você chegou até aqui, deixa aquele like para eu saber que você chegou até aqui. E vamos agora pra sexta dica. Essa sexta dica vai salvar a sua vida.

Olha, a gente tem um objeto aqui com vários itens. Tem o nome, a idade, informação pessoal. Dentro de informação pessoal tem endereço, dentro endereço tem rua, tem número e assim por diante.

E aí você vai querer acessar uma informação ali, tudo bem? Então eu vou acessar usuário pon infoal ponindereço p rua. E aí se eu rodar meu código, ele vai mostrar essa informação para mim.

Mas vamos supor que no meio do caminho esse usuário não preencheu as informações pessoais dele. Ó, não preenchi. Só que eu continuo fazendo, buscando essa verificação aqui, porque afinal tem milhares de usuários, só esse aqui que esqueceu de preencher.

A hora que eu for rodar, olha só o que vai acontecer. Ele vai travar todo o nosso código. Isso aqui é muito perigoso.

E eu já vi grandes códigos quebrarem. Eu de contar uma história. Eu trabalhava na Tor Investimentos e aí uma hora eu tava cortando, olha só essa história, eu tava cortando o cabelo lá no cabeleireiro, era umas 7 horas da noite e aí do nada meu telefone começa a tocar, tocar, tocar, tocar, tocar e quando eu vejo meu chefe, eu falo que oi ele, cara.

Eu dis o site caiu e não tá funcionando. E meu Deus do céu, que tá acontecendo? Volta.

Eu eu era o mais antigo da equipe, então deu algum pau, chamo Rodolfo. Cara, eu voltei correndo pra casa e aí quando eu fui fuçar, fuçar, fuçar, o problema era esse aqui. Tinha várias informações aninhadas e de repente tava faltando uma informação, tinha um nome errado e aí quebrou o site inteiro.

Imagine uma corretora grande, investimentos quebrada por causa disso aqui. Para isso não acontecer mais com você, você vai usar esse carinha aqui, ó, que é a interrogação. Você coloca a interrogação, ó, na frente do dos pontos.

Caso essa informação não exista, caso o objeto não exista, alguma coisa. Olha só o que vai acontecer. Ele não quebra mais, ó.

Ele não quebra. Ele vai colocar aqui, não encontrou, deu um defined, mas ele não quebra. É uma baita de uma dica que isso aqui pode salvar sua vida naquele, naquela vez lá.

O erro não foi eu, não. Não fui eu que coloquei o erro, não. Eu, eu encontrei o erro, mas não tinha sido eu.

Mas eu já cometi essa cagadinha outras vezes e pode ferrar seu código. Então já anota aí. E essa aqui mereceu o like.

E agora essa aqui é um negócio que alguns sabem, outros não sabem. Comenta aqui embaixo já conhecia isso aqui, não conhecia? Então vamos pra próxima.

Essa sétima dica, ela me salvou quando eu trabalhava no Santander. Eu lembro que eu tinha um sistema que eu tava criando e aí eu precisava pegar uma variável e eu precisava criar um objeto. Então eu queria criar um objeto chamado, sei lá, pessoa, só que a gente tem a chave e tem o valor.

Então eu tenho a pessoa nome, eu posso ter Rodolfo. Opa, faltou o sinal de igual aqui. Aqui no Rodolfo eu posso colocar uma variável.

Aqui eu poderia colocar a variável chave. Pronto. Agora quando eu rodar pessoa, olha só o que acontece.

Ele vai trazer e vai colocar aqui o valor da variável. Legal. Nome.

Nome. Então, ficou meio estranho, mas agora vai fazer sentido. E se eu quisesse colocar o chave aqui?

Ah, eu quero colocar a variável chave aqui. E aqui vai ser Rodolfo. Ele vai pegar isso aqui?

Ele vai pegar esse valor? Vai pegar? Não vai pegar.

Ele vai encarar que esse chave não é uma variável, que esse chave é o nome que você quer dar aqui paraa sua chave. E esse aqui é o valor. Então quando é o campo do valor, eu posso colocar uma variável.

Quando é a chave, não. Tá? Mas se eu quiser colocar uma chave, aí você coloca, coloca os conchetes em volta.

Vamos ver se funciona. Eu vou rodar. E agora sim ele pegou o valor da variável.

Ahã. Isso aqui me salvou. Isso aqui me salvou várias vezes.

Então pega essa dica aí, anota essa dica e vamos pra oitava. Oitava dica é o seguinte, vamos supor que você tem um arrei, pode ser um arrei de números, só que tá vendo que tem valores repetidos e de repente você decide fazer um filtro e eu não quero mais valores repetidos. Não quero mais valores repetidos do meu arrei.

Seja número, seja o que for, não quero valor repetido. Tá proibido o valor repetido, como você faria? Ferrou, né?

Nem a gente tem no JavaScript uma estrutura, o arrei é uma estrutura de dados, né? Uma forma de organizar os dados. A gente tem uma estrutura bem parecida com a rei, que é o set.

O set ele é bem parecido com a rei, mas ele não permite números repetidos. O sete automaticamente elimina números, o que for, ele não aceita valores repetidos. E aí, se eu quero um array que não tenha números repetidos, eu vou fazer o seguinte, ó.

Vou criar aqui o meu new array. E ele vai ser, ó, presta atenção. Eu vou colocar três pontinhos aqui.

New set. Com isso, opa, set assim, ó, letra maiúscula. Com isso, eu estou criando um new set com os valores dos meus do meu arre de números.

E aí, como o set não aceita valores repetidos, ele vai eliminar todos os repetidos, tá? Então ele vai criar, eu quero criar um novo set com o meu arrei. Então ele vai eliminar os números repetidos.

OK? OK? OK.

No final você talvez pergunte: "E esses três pontinhos? " Esses três pontinhos é o spread operator. Ele serve para eu esparramar algo.

Ou seja, eu estou falando que eu quero colocar isso aqui aqui dentro. Então, dentro de um arrei, tá vendo que tá os colchetes em volta? Isso aqui vai ser um arrei.

E dentro desse arrei eu quero esparramar todas as informações que tiver aqui dentro, tá? Eu vou dar um console. log a gente vai ter um arrei, um arrei e não vai ter número repetido não.

Não tem mais nada repetido. 1 2 3 4. Eliminou todas as repetições, tá?

Essa estrutura talvez seja um pouco confusa para você que tá começando, mas confia em mim. É, depois você vai entender melhor usando em outros casos. Depois eu posso fazer um vídeo só sobre spread operator, que é uma ferramenta sensacional, mas ela é um pouquinho mais chatinha de explicar aqui.

Mas basicamente ela tá fazendo isso. Ela tá esparramando todos os valores aqui dentro. Estamos acabando, falta só duas.

E até aqui coloca o placar de oito. Quantos você conhecia? Quantas você não conhecia?

Coloca aqui para mim que quero saber. Bora pra nona. Nona dica é o seguinte, vamos supor que você queira gerar um número aleatório, tá bom?

Vamos lá. Para isso, a gente tem uma ferramenta chamado math randr randomle no JavaScript. E aí ela vai gerar números aleatórios.

Vamos colocar ela dentro de um console. log pra gente ver o que ela gera, tá? Vou rodar aqui.

E aí ela gerou um número malucão. Vamos gerar outro número. Ger número malucão.

Mas o mat. Randle sempre vai gerar números entre zer e um. Entre 0 e um.

Só que eu não quero um número entre zero e um. Vamos supor que eu queira fazer um número aleatório entre 1 e 100. Como que eu faria?

Bem, para isso, anota essa dica. Eu vou criar aqui uma random number, uma função com qualquer nome. E essa função, sempre que eu for chamá-la, eu preciso enviar dois parâmetros, o número mínimo e o número máximo, que ele vai trazer um número aleatório, né, o o range.

E aí a gente vai ter o seguinte, eu vou ter o meu math random e eu vou pegar o meu math random e vou fazer vezes o número máximo menos o número mínimo e o resultado disso aqui mais o número mínimo, tá certo? Ok. Ok.

Ok. E aí eu vou retornar isso aqui. Ou seja, quem chamar me pon random number, eu vou fazer todo esse cálculo aqui e retorno para ele o resultado.

Então eu vou pegar o meu random number, mandando o número um e o número 100. E aí vamos dar um console. log pra gente ver o que tá retornando.

Se você não entendeu direito essa parte da função, vou deixar no card aqui na descrição um vídeo só falando sobre funções do JavaScript, explicando como que elas funcionam, tá? Mas basicamente eu estou chamando random number, enviando o número um que entra aqui, o número 100 que entra aqui. Aí eu tenho acesso aqui dentro a esses números um e o 100.

E aí no final eu retorno. Ou seja, se esse cara chamou, eu retorno para ele. Então o resultado disso aqui ele traz aqui para mim e aí eu consigo ver na tela porque eu coloquei o console.

log. Eu rodei e deu 91. Rodei de novo e deu 58.

Ah, vou mudar os números agora. Eu quero um número aleatório entre 100 e 600. Rodei de novo.

Vamos ver se funciona. 289. Rodei de novo.

E 284. Eita, bem próximo. Rodei de novo.

405. Só que ele ainda tá deixando muitos números decimais. Se você quiser cortar esses números decimais, você pode usar o math ponfloor.

E aí ele vai arredondar todo mundo, ó. Todo mundo que tá aqui dentro, ele vai arredondar. E aí ele só vai deixar os inteiros.

Vou rodar. E agora ele deu 355. Rodei de novo, 234.

Então, eu falo que é um truque, mas você já aprendeu vários. Vamos pro último truque. Vamos lá.

Décimo truque. Última dica é o seguinte, imagine que você tá com a rei, uma lista de usuários, mas alguns usuários estão como nulo, estão como defined ou estão vazios. E eu quero eliminar esses usuários.

Como que eu faria isso? De forma bem simples. Vou criar até uma nova lista aqui.

Nova lista. Eu vou pegar essa lista e vou fazer um filtro nela, ó. Filter.

Eu vou filtrar. Eu só quero que ele me retorne valores que sejam verdadeiros. Verdadeiro, Rodolfo.

É, no JavaScript quando eu tenho valor, ó, isso aqui tem um valor, ó, deve. Isso aqui é verdadeiro, porque tem algo. Um defined que é indefinido, não tem nada, é falso.

Nul também é nulo, falso. Vazo, falso. Zero é falso.

Para nós, esses valores aqui eu não quero. Eu só quero valores que tenham alguma coisa. Se eu tivesse aqui, ó, outro também.

Só que tem coisa dentro. E aí ele vai fazer um filtro. Mas eu tenho que avisar que eu só quero valores buleanos verdadeiros.

Só de colocar buan assim com letra maiúscula, ele já entende que eu só vou querer valores verdadeiros. E aí se eu der um console plog em nova lista e rodar, você vai ver que ele vai retornar um novo arrei somente com os valores verdadeiros, somente com os valores preenchidos. Agora você tem uma missão aqui embaixo, você vai colocar 10/5, 10/3, 10/10.

Significa que das 10 você sabia três, sabia cinco, sabia oito. E eu quero saber quem sabia mais dicas. Deixa aquele like maroto, se inscreva no canal e vou deixar dois vídeos bem legais agora para você assistir.