1

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?

1
  • Eu sei que poderia usar um operador ternário nesta situação que eu mencionei porém segue com mais algumas verificações e quis deixar o mais simples o possível a minificação do problema
    – DeElfos
    Commented 17/07/2020 às 13:01

2 Respostas 2

4

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?.

1
  • Compreendi e muito obrigado pelo puxão de orelha, tentarei um pouco mais tarde colocar o exemplo real para facilitar. Mas amei sua abordagem, muito didático e explicativo!
    – DeElfos
    Commented 17/07/2020 às 13:52
2

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.

4
  • Concordo plenamente contigo. inclusive a sua proposta é bem mais enxuta que a que eu pensei de inicio e mais simples de acompanhar. Mas será que criar um var não tem alguns fatores externos que impactam na usabilidade? Como por exemplo, alocação de memória, mais tempo pra processamento e etc? Eu fiz um exemplo mínimo porque a função é um pouco (muito) maior que isso e não sei se isso causa algum impacto ao usuário final. Sei que normalmente não nos preocupamos com isso (eu mesmo sou exemplo) porém minha aplicação depende de respostas rápidas e assertivas, compreende?
    – DeElfos
    Commented 17/07/2020 às 13:30
  • Nunca fiz nenhum teste de performance entre uso de var e let, e não acredito que seja necessário, let foi criada para corrigir os problemas de escopo existente em variáveis definidas com var, é um modo para manter o código mais limpo e reduzir a possibilidade de errors em runtime
    – Leo Letto
    Commented 17/07/2020 às 13:33
  • Sim sim, quanto a isso eu compreendo. Porem minha duvida seria sobre uma function ou armazenamento em var (ou let) para tomadas de decisões. Pode parecer uma questão idiota mas é que eu realmente nunca vi em todos os anos que trabalho com isso esta situação específica.
    – DeElfos
    Commented 17/07/2020 às 13:35
  • Se você tem uma função que tem um return em boolean, por convenção você pode adicionar a mesma diretamente dentro da condição, exemplo if(myBooleanFunction()), não que vá fazer muito diferença para o usuário final mas é simplesmente um jeito de manter o código simples e legível.
    – Leo Letto
    Commented 17/07/2020 às 13:37

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .