Best Practice / Lesbarkeit JS

[D0bby]

Moin,

kurze Frage in die Runde, was ihr besser findet - zwecks Lesbarkeit und Best Practice.

const isValid = !!document.querySelector(
  `input[name="${groupName}"]:checked`
);


const isValid = Boolean(
  document.querySelector(`input[name="${groupName}"]:checked`)
);

 

[duAffentier]

Was lesen?
Was ist der Standard? Eigenen Standard machen und sich an diesen halten. BestPratic.
Boolean(), vor allem in Team-Code, Libraries oder langfristigen Projekten. Es liest sich einfach ruhiger und wartungsfreundlicher.

 

[empower]

Nimm Boolean(), wenn Lesbarkeit über Kürze geht, viele Junioren im Team sind oder du es einfach „sauberer“ findest.

 

[Haggis]

Ich stimme auch für Boolean.

 

[netzgestaltung]

ich stimme dafür, strings erstmal in variablen mit sprechenden namen zu stecken bzw selektierte elemente, wenn es schon um lesbarkeit geht

- hier kann aber auch rechenzeit gespart werden, weil das selektieren am längsten dauert, überhaupt, wenn keine ID genutzt wird weil das DOM Element dann immer wieder geprüft werden kann. Außerderm bieten DOM Elemente Interfaces an wie zb "checked", die dann viel flotter abgerufen werden können, als via selektor.

und die ${variable} schreibweise find ich auch nicht leicht erfassbar. aber vielleicht bin ich da auch schon zu dinosauriermäßig. schließlich gabs das mal in PHP und wurde dort zurecht vielfach rausgeschmissen.

so würde das bei mir also aussehen, auf dem weg sind mir noch mehr sachen aufgefallen, die ich immer ganz anders mache...:

var input_groupname = document.querySelector('input[name="' + groupname + '"]');
var is_groupname_checked = input_groupname.checked ? true : false;

wobei hier ".checked" alleine eigentlich schon reicht also die 2. variable bräuchte ich mmn nicht umbedingt.

warum also eine angehakerlte checkbox irgendwas valide macht, ist mir recht unklar, daher hab ich die variable mal so benannt, das ich mich auskenne.

die schrägen anführungszeichen sind aber vermutlich nur wegen der eingabe hier so schräg geworden, oder?

Edit: so ähnlich macht es auch die Mozilla Doku:
https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/checked

Edit²: Say no to camel_case!

Edit³: noch ein real world beispiel:

var input_groupname = document.querySelector('input[name="' + groupname + '"]'),
    is_valid = false;

if ( input_groupname.type === 'checkbox' && input_groupname.checked ) {
  // my logic here, can do more validation now
  // ...
  is_valid = true;
}

 

[BeBur]

Wenn ihr über sowas im Code Review oder im Team so sehr diskutiert das du das Bedürfnis bekommst, im Internet ein Meinungsbild einzuholen, dann ist dieses eher das Problem und nicht, ob Boolean verwendet wird.

Nimm Boolean(), wenn Lesbarkeit über Kürze geht

Also immer?

 

[Europe/Berlin]

@D0bby Jag' es doch erst mal durch ein Code Analysis Tool: https://jshint.com/ (oder VSC) das kann auch schon Anti-Pattern aufzeigen.

Beide Varianten sind ok... In einem Code Review würde ich jedoch:

const groupName = 'whatever';

const isValid1 = !!document.querySelector(
  `input[name="${groupName}"]:checked`
);

const isValid2 = Boolean(
  document.querySelector(`input[name="${groupName}"]:checked`)
);

if (document.getElementById('my-input-id').checked) {
  // is checked
} else {
  // is not checked
}

das "if-else" bevorzugen: schneller, besser lesbar und auch ES-Version < 6 kompatibel.

document.querySelector('input[name="' . groupname . '"]')

Soll das Phantasiesyntax sein? Kompilieren sollte es schon...

 

[netzgestaltung]

Soll das Phantasiesyntax sein?

Ah mist, PHP ./JS + vertauscht... alter Verwalter... ich editiere