Photo by <a href=Joan Gamell / Unsplash">
Photo by Joan Gamell / Unsplash

JavaScript: Dicas de bolso – parte 1

Dicas rápidas de JavaScript, uma linguagem beeem legal mas cheia de pegadinhas do malandro.

JavaScript é uma linguagem bem legal mas cheia de pegadinhas. A idéia desse post é documentar alguma dessas pegadinhas, para que possamos evitar dores de cabeça principalmente à galera que ainda não se deparou com alguma delas.

Guarde o tamanho do array

No JavaScript temos nossos brothers loops for, que conseguem iterar em arrays ou também em objetos semelhantes a arrays. Semelhantes? Como assim!? Por exemplo os objetos arguments e HTMLCollection. Provavelmente você já deve ter se deparado com um loop for (já deve ter escrito alguns):

De bate pronto, conseguimos perceber algo não tão bacana no código acima. O comprimento (length) do array é acessado em toda iteração do loop. Isso não fica tão legal quando por exemplo, o objeto é um HTMLCollection. Lembra o que são esses caras? Eles que são retornados quando a gente chama:

  • getElementsByName()
  • getElementsByClassName()
  • getElementsByTagName()

Tá! Legal! Mas eaí né?! A zica mesmo é que toda vez que a gente itera sobre esses caras significa que estamos consultando o nosso DOM ao vivo e a cores, e a *toda hora*, o que não é nada bacana.

Com base nisso, uma solução que podemos chegar seria guardarmos o comprimento do array; algo parecido com isso:

O que fizemos acima foi armazenar o valor da propriedade length, evitando assim ter que calculá-la a cada iteração do loop.

Verifique se a propriedade pertence àquele objeto

Além do nosso amigo do exemplo anterior, no JavaScript temos o loop for-in que usamos pra iterar em objetos. Uma coisa bacana de se fazer e que pode evitar que algo que você não queira aconteça, é usar o método hasOwnProperty(). Esse método simplesmente vai filtrar apenas as propriedades do objeto em si, excluindo as propriedades herdadas pelo prototype.

Um exemplo rápido:

Aí em uma parte obscura, aparece algo que adiciona uma propriedade a todos os objetos.

O que aconteceu acima foi que verificamos se existe a propriedade feijao em Object e, caso ela não exista definimos ela com o valor preto. Aí que está o negócio da coisa do JavaScript, nosso objeto burger, já herda a propriedade feijao via prototype.

Com isso, para evitarmos que feijao apareça quando listarmos as propriedades de burger (até porque feijão, na minha opinião, não combina muito com hamburguer), fazemos o seguinte:

Do contrário, caso não fizéssemos essa verificação, teríamos algo assim:


Era isso! Dicas rápidas sobre a linguagem, que para alguns podem ser básicas, mas que muita gente ainda pode não conhecer e, que podem evitar alguns problemas no futuro.

Você sabia que temos conteúdos exclusivos para assinantes do portal?

Além de ter acesso ilimitado a todos os conteúdos, você também pode participar de palestras exclusivas, sessões de Q&A, mentorias em grupo e acesso à descontos em cursos. E claro, assinando você nos ajuda a manter o projeto e aumentar a nossa produção de conteúdo.

Você pode assinar clicando aqui

Inscreva-se no Product Oversee

Textos todas às quartas 7h45 na sua caixa de entrada.
Inscreva-se grátis