quora — ¿Cuáles son los peores hábitos programando en JavaScript?

En mi buzón de solicitudes de respuesta en quora apareció esta pregunta ¿Cuáles son los peores hábitos programando en JavaScript? Al momento de leer pensé en al menos una par de comportamientos que suelo encontrar al tratar código y es la manipulación de elementos formulario y elementos de control como inputs. Puedes leer mi respuesta en este enlace. En este breve articulo detallo solo un poco mas lo ahí descrito. Pero principalmente comento el motivo por el que lo considero que estas practicas son malos hábitos en JavaScript.

En javascript es muy común manipular el DOM. Trabajar con formularios e inputs, con tareas como validaciones, validaciones en dependencias, mostrar/ocultar x input basado en la selección de y valor en los options de un select seguro resulta un escenario familiar. En este contexto es habitual encontrar acceso a estos elementos usando los metodos getElementById(), querySelector() y similares. El mal habito en mi opinión conciste en no utilizar las propiedades y eventos propios de formularios que agregan conveniencia y menos código escrito que todo programador agradece.

Partamos entonces considerando el siguiente formulario:

<form action="auth.php" name="loginForm" id="loginForm">
<input type="email" name="email" id="email">
<input type="password" name="password" id="password">
<input type="submit" value="Submit">
</form>

Formularios son miembros de la colección document.forms y por tanto es posible obtener el formulario a través de indice y nombre.

const form = document.forms.loginForm
// o
const form = document.forms[0]

Desde un formulario es posible acceder a cualquier elemento a través de form.elements no importa que tan anidado en el formulario este ubicado.

const email = form.elements.email;
const password = form.elements.password;

Es posible omitir elements y utilizar la versión abreviada form.name

const email = form.email;
const password = form.password;

De hecho es posible acceder directamente usando unicamente el nombre del elemento y saltarse así form.elements o form.name

const email = email;
const password = password;

En resumen.

Como programadores pasaremos mayor parte de nuestro tiempo leyendo código que escribiéndolo, en este contexto solemos agradecer que entre mas conciso sea lo que hay que leer es mejor. Por eso agradecemos que en lugar de este tipo de código

const form = document.getElementById('loginForm');
const email = document.getElementById('email');
const password= document.getElementById('password');
// Por ejemplo aplicar alguna validación con los valores de email y password
form.submit();

Encontramos este tipo de código

const form = document.form.loginForm;
const email = form.email;
const password = form.password;
// Por ejemplo aplicar alguna validación con los valores de email y password
form.submit();

Probablemente en este pequeño formulario que unicamente incluye dos inputs no se aprecie el benéfico de remover este ruido al obtener elementos, pero cuando son 15 o 30 inputs este tipo de decisiones se agradece.

Finalmente comento que para escribir este articulo y la respuesta en quora me auxilie de este excelente articulo de los chicos de javascript.info

Saludos