Javascript para idiotas (como eu) - Iterando objetos

Eduardo Sant — Tue, 27 Dec 2022 21:16:31 +0000

E quem sou eu? Esse segr.. Opa, blog errado. O Javascript para idiotas (como eu) volta após um longo período e vamos continuar de onde paramos, explicando conceitos de Javascript para você como se tivesse seis aninhos.

E o assunto de hoje é bastante simples, mas você pode se confundir com alguns conceitos enquanto está aprendendo a linguagem. A iteração sobre objetos é a ação de passar por cada item de um objeto javascript a fim de executar uma ação sobre esses itens.

Não sei você, mas a princípio eu associei a iteração aos loops que geralmente fazemos com os métodos de array. E aqui está o drama. Se você tentar fazer um map() em um objeto vai receber Uncaught TypError na testa. O que eu vou te falar agora talvez te deixe chocado, mas... um objeto não é um array! Logo, os métodos de array não vão funcionar nele. Eu sei, chocante. Mas você vai superar. A explicação da herança de métodos e propriedades via protótipo que um array recebe (e que é diferente do que um objeto recebe) é assunto para outro post.

Os métodos estáticos de objetos

Não vou me estender e perder tempo com a forma antiga de fazer um laço em objetos (com o for...in), então vamos direto ao ponto.
Atualmente, o Javascript conta com uma forma mais simples de iterar objetos; através dos métodos estáticos.

Estes aqui são os seus novos amigos:

Object.keys()
Object.values()
Object.entries()

É muito simples de usar, não é preciso complicar nada por aqui. Só para lembrar, um objeto é formado por propriedades que têm pares de chave e valor.

Como usar o Object.keys()

O Object.keys(arg) recebe como argumento o objeto que você quer percorrer e ele vai te devolver um array com todas as chaves encontradas no objeto.

let author = {
  name: "Eduardo",
  surname: "Santana",
  age: 26,
}

let arrKeys = Object.keys(author)
console.log(arrKeys) // ["name", "surname", "age"]

Como usar o Object.values()

O Object.values(arg) também recebe como argumento o objeto que você quer percorrer. E assim como o keys, vai te devolver um array. No entanto, esse array será composto por todos os valores encontrados no objeto.

let author = {
  name: "Eduardo",
  surname: "Santana",
  age: 26,
}

let arrValues = Object.values(author)
console.log(arrValues) // ["Eduardo", "Santana", 26]

Como usar o Object.entries()

E seguimos o padrão. O Object.values(arg) recebe como argumento o objeto alvo. Só que dessa vez você vai receber de volta um array de arrays, onde cada array interno é composto por dois elementos: propriedade e valor.

let author = {
  name: "Eduardo",
  surname: "Santana",
  age: 26,
}

let arrEntries = Object.entries(author)
console.log(arrEntries) // [["name", "Eduardo"], ["surname", "Santana"], ["age", 26]]

Conclusão

Esse é o aprendizado de hoje, galerinha. Objetos são iteráveis, mas não com as mesmas ferramentas que usamos em arrays. Para essa missão temos os métodos estáticos de objetos (que como você viu, só transforma tudo em array para que então você use os métodos de array neles). Controverso, mas não sou eu quem faz as regras. Se divirta explorando!

Javascript para idiotas (como eu) - Rinha de Condicionais

Eduardo Sant — Sat, 16 Oct 2021 06:31:44 +0000

Não se espante com o título dessa série. Javascript para idiotas (como eu) é a minha contribuição a comunidade, que tanto me ajudou com conteúdos importantíssimos e de muita qualidade, assim como eu quero te ajudar a partir de hoje!

A linguagem de programação Javascript é majoritariamente usada no front-end. Mas isso você já deve saber. Sabe o que você poderia concordar comigo? Que a abordagem ao Javascript e linguagens de programação em geral, é feita diversas vezes de uma maneira mecânica e excessivamente direta. E isso não é algo bom? Alguns diriam que sim. Eu digo que depende do dia. Nem sempre estou no meu melhor dia ou melhor momento para fazer uma leitura pesada sobre um conteúdo minimamente difícil de entender. Esperar um alinhamento das estrelas, um evento cósmico que me faça encarar o cansaço do dia a dia, vencê-lo e triunfar sobre um conteúdo brevemente explicado e/ou muito complexo é pura viagem.

Atenção, mundo! Eu sou um idiota esforçado que PRECISA do máximo de conteúdo simplificado possível. A mecânica de encarar um esgotamento mental para entender um assunto (as vezes particularmente) complexo é um esforço jogado fora, sem razão e mal direcionado.

Portanto, comunico aos aspirantes a Dev Front-end que inicio hoje uma série de conteúdos sobre Javascript totalmente direcionada a idiotas como eu. Não tenha vergonha, assuma que você é limitado e venha aprender comigo de uma forma menos trabalhosa. Assim, quem sabe, não evoluamos melhor, mais rápido e com maior qualidade.

If e Else vs Operador Ternário

Condicionais são as afirmações que você vai usar nas suas linhas de código para tomar uma decisão a respeito de alguma coisa. Objetivamente, podemos trazer os famosos If e Else para o holofote e traduzi-los.

Assim, descobriremos que na verdade eles se chamam SE e SENÃO! Já ficou mais fácil, não?

Regra n° 1 para facilitar a vida de um idiota: descomplique o significado das coisas.
É muito lindo e correto chamar de If/Else Statement, mas fica mais simples atribuir significado a isso de uma vez, principalmente se você não entende tanto de inglês.

SE e SENÃO vão ficar de olho na situação que você definir e tomarão uma decisão sobre. Veja só:

//Definimos aqui uma variável chamada corDoSinal que é atribuído
//a um valor do tipo 'string'. Nesse caso, 'vermelho'.

var corDoSinal = 'vermelho'

//Situação

SE(corDoSinal === 'vermelho'){
// Atravesse a rua
}SENÃO {
// Não atravesse a rua
}

Pronto, o SE e SENÃO estão atentos a condição imposta. Substitua nossos SE e SENÃO pelo If e Else respectivamente e você terá a estrutura correta. Agora, já sabendo o que significam. Se essa condição passada dentro parêntese for atendida, o bloco de código logo após (representado pelas chaves {}) será executado. No caso da condição não ser atendida, então vamos parar direto no SENÃO, que executará o bloco de código que está ligado a ele.

Bem antiburro, não acha? Muito bem, você acabou de aprender uma estrutura condicional no Javascript. O problema é que nós não gostamos muito do If e Else para estruturas de condições simples como essa do exemplo, onde só é necessário escolher entre duas condições. Para facilitar a vida, conheça o Ternário.

Chamamos de ternário por termos como premissa básica o uso de três elementos: uma pergunta e duas possíveis respostas!

Muito bem, vamos pegar o mesmo exemplo usado lá em cima só que agora usando o ternário. Dá uma olhada:

var corDoSinal = 'vermelho'

corDoSinal === 'vermelho' ? Atravesse a rua : Não atravesse a rua

Aqui então temos uma pergunta seguida de duas possíveis ações que dependem da resposta ser verdadeira ou não.

A variável corDoSinal é igual a 'vermelho' ? Se sim, então faça isso : Se não, então faça aquilo

Existem mais formas de condicionar ações, mas fica para outro post. Espero que esse conteúdo tenha sido objetivo, simples e tenha te ajudado a entender o que foi proposto. Aprendi muito explicando e você também pode aprender bastante enviando isso para um amigo e contando o que você aprendeu aqui. Compartilhar conhecimento é uma ótima forma de aprender também!

Valeu, galera. Fiquem ligados em futuros posts sobre os mistérios do Javascript.

Forem: Eduardo Sant