TransWikia.com

Duvida sobre usabilidade - var e functions - JavaScript

Stack Overflow em Português Asked by DeElfos on September 27, 2021

Me deparei com uma situação que até hoje não havia ocorrido, meu amigo estava codificando e fez o seguinte bloco de código (apenas simulação)

function teste() {
  teste = true // Ele faz uma verificação
  if (teste) {
    teste2('verdadeiro')
  } else {
    teste2('falso')
  }

  function teste2(texto) {
    var element = document.getElementById('element');
    element.innerHTML = texto

  }
}
teste()
<div id="element">
</div>

Eu teria outra abordagem:

function teste() {
  var testando = ''
  var teste = true // ele faz uma verificação
  if (teste) {
    testando = 'verdadeiro'
  } else {
    testando = 'falso'
  }
  var element = document.getElementById('element');
  element.innerHTML = testando
}

teste()
<div id='element'>
</div>

Não estou perguntando em termos de funcionalidade, até porque as duas abordagens servem, mas qual é mais indicada e por que?

2 Answers

De forma geral a sua é mais simples, então, entre as duas, é a que eu faria porque eu prefiro a Navalha de Ocam.

Eu não estou vendo motivos para fazer da primeira forma. Mas poderia ter em um exemplo mais real. Exemplos artificiais são complicados para estabelecer o que é bom ou não porque eles não tem contexto, e contexto é tudo para decidir sobre a aplicabilidade de algo. E não saber isso é o maior problema de programadores novatos (alguns programam por décadas e ainda são como novatos porque não gostam de aprender, gostam só de ver resultados).

Um motivo para fazer da primeira forma seria dar nome para uma rotina, e isso é uma forma de evitar um comentário explicando o que aquilo faz. Mas só faria sentido se a função tivesse um nome explicativo, chamando teste2() não serve para isso.

Ainda acho exagerado na maioria das vezes, e quase certamente nesse caso, até porque é pequeno e o código ali faz algo bem padronizado e que é quase auto explicativo por ele mesmo. Sem falar que criar essa função pode piorar a performance (não estou afirmando porque pode haver otimizações), mas não é o melhor motivo para evitar criar a função.

Se a função fosse genérica e recebesse inclusive que elemento que deve pegar faria um pouco mais de sentido, mas tenho minhas dúvidas se não seria exagerado. De qualquer forma fazendo assim seria outro código. Para esse exemplo eu não faria a função secundária fora dela tentando manter a ideia do primeiro código, ainda mais se manter o nome teste(). Para outro exemplo o problema é outro e a decisão deve ser outra. Aí novamente, esse não é o melhor motivo para escolher fazer uma função genérica, essa decisão deve observar outras coisas para decidir por isso.

De fato dá para simplificar, esse exemplo eu faria assim:

function boolPortugueseElement() {
    document.getElementById('element').innerHTML = true ? 'verdadeiro' : 'falso';
}

boolPortugueseElement();
<div id='element'>
</div>

Coloquei no GitHub para referência futura.

Quando você simplifica tende a ficar mais fácil entender e fica menos necessário fazer outras coisas. Algumas pessoas não gostam porque dizem que é menos legível. Eu não acho que esse caso seja, legibilidade é subjetiva. Alguns dizem que dificulta para o estagiário, mas o estagiário deve ser ensinado programar, não diminuir a barra para ele. Eu bato o olho nisso e entendo perfeitamente o que acontece ali. Os códigos da pergunta eu demorei para entender, especialmente o primeiro. Mas reforço que a falta de bons nomes ajudou não entender.

O mais indicado é dar bons nomes antes de qualquer outra preocupação.

Acho muito mais importante colocar o ; do que essa preocupação, porque isso pode dar problema. Não entendo porque pegou moda das pessoas não usarem mais ele.

Eu acho que as pessoas criam variáveis demais. Eu criaria uma para dar legibilidade, mas só se o nome for muito explicativo e o código que ela processe seja complexo, caso contrário é só para complicar o código.

Embora tivesse no título, na pergunta mesmo não havia clareza que queria saber sobre o var. Nunca deixe de usar o var, a não ser que prefira usar o let. Então nesse ponto o primeiro código está errado. Sim, funciona, mas ele poderia apresentar problemas em outra situação. Acostume-se usar sempre do jeito mais correto, igual ao que eu falei sobre o ;, só porque pode não usar em algumas situações, pra que não usar? Que ganho espera ter em não usar?

Mas eu colocaria o var no primeiro código, não sei porque não foi colocado.

Veja Qual é a diferença entre declaração de variáveis usando let e var?.

Correct answer by Maniero on September 27, 2021

Isso depende do programador e o do quão limpo você quer que o seu programa seja, por exemplo:

  • Uma função que verifique uma condição e atualize uma parte do HTML

Neste caso a sua abordagem seria a mais simples e fácil de entender, não vejo a necessidade definir uma função dentro a uma função como o seu amigo fez simplesmente para fezer um check e então chamar o método definido dentro dele mesmo, quando você tem poucas linhas de código a coisa ainda é fácil de entender, mas quando o código fica complexo a leitura vai ficando mais difícil, neste entra em jogo fazer o refactor do código o máximo possível, ou seja cada função faz somente aquilo que ela foi feita pra fazer, ela não deve saber o que as coisas funções fazem e não deve se preocupar em definir outros métodos que existem somente ao interno dela mesma. Não acredito que exista uma mais indicada, existem boas práticas que a comunidade tende a seguir com o passar do tempo programando em uma linguagem, para o seu caso por exemplo a minha abordagem seria mais algo como o exemplo abaixo em cada de necessidade de fazer o update do HTML em mais partes do código.

function updateElement(elementId, innerHTML){
  let element = document.getElementById(elementId);
  element.innerHTML = innerHTML;
}

function teste() {
  // Dê preferência por usar let ao invés de var se a váriavel for local
  let teste = false;
  if (teste) {
    updateElement('elementId', 'verdadeiro');
  } else {
    updateElement('elementId', 'falso');
  }
}

teste();
<div id="elementId"></div>

Ao menos que exista um motivo especifico, acredito que o mais correto é seguir uma abordagem mais simples que ajude você mesmo a entender o próprio código e que ajude o próximo também caso você esteja trabalhando em grupo. É para isso que existem princípios de programação como o KISS (Keep It Simple, Stupid), que basicamente significa: Mantenha simples e estupido.

Answered by Leo Letto on September 27, 2021

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP