4

11 reglas para un código JavaScript más limpio

Las bases son importantes, es por eso que no puedes continuar tu camino para convertirte en una gran desarrolladora con JavaScript sin que tengas claras estas 11 reglas que te ayudarán a escribir un código mucho más limpio y legible, ya sea que te quieras enfocar en el front-end con React o en el back-end con Node.js. Estoy seguro que podrás escribir código que funcione, pero esto no es suficiente; necesitas que sea entendible y limpio para que otras personas puedan leerlo sin problemas.

Regla 1: Nombrar adecuadamente a las variables

Debes evitar nombrar a las variables de manera extraña o al azar.

// Incorrectoconst z = 2;

Nombra siempre a tus variables con nombres apropiados y descriptivos, relacionados con el valor que almacenan.

// Correctoconst numberOfChildren = 2;

Regla 2: Usa la convención camelCase en tus variables

Cada lenguaje tiene su propias convenciones, en JavaScript se usa una conocida como camelCase, la cual consiste en que la primera letra siempre debe iniciar en minúscula y cuando inicie otra palabra la primera letra de esta debe ir en mayúscula.

// Incorrectoconst UserName = "Gabriel"; 

// Correctoconst userName = "María";

Regla 3: Nombra bien a tus funciones

Las funciones (sean de expresión o declarativas) deben ir en camelCase y su nombre debe iniciar con un verbo.

// Incorrecto// Inicia con letra mayúscula
functionDoSomething() { 
   // code
} 

// Inicia con un sustantivo
functioncar() { 
   // code
}

// Usa guion bajo
functiondo_something() { 
   // code
}

// Correcto

functiondoSomething() {
   // code
}

Regla 4: Constantes Globales

Las variables que sean constantes y globales cuyo valor no va a cambiar no deberían de ser nombradas como variables normales. Son una especie de variables especiales.

// Incorrectoconst numberOfChildren = 2;

La manera correcta de nombrarlas es completamente en mayúsculas y cada palabra debe ser separada por un guion bajo.

// Correctoconst NUMBER_OF_CHILDREN  = 2;

Regla 5: Asignación de variables

No asignes un valor de una comparación a una variable sin haber utilizado los paréntesis.

// Incorrectoconst flag = i < count; 

Solo debes de usar paréntesis para agrupar la expresión. Sí, como en las matemáticas.

// Correctoconst flag = (i < count); 

Regla 6: Compara bien

No uses ==, tampoco != cuando quieras comparar valores. La razón es porque en estas comparaciones no estas comparando el tipo de dato solo comparas el valor.

// Incorrectoif(a == b) {
	// code
}

En lugar de eso, cuando compares siempre deberías usar el === o !== de esta manera te aseguras de que siempre estés comparando el valor y el tipo de dato.

// Correctoif(a === b) {
	//code
}

Regla 7: Uso del operador ternario

No uses el operador ternario como una alternativa al if.

// Incorrecto

condition ? doSomething() : doSomethingElse;

Úsalos solo para asignar valores en función de alguna condición.

// Correctoconst value = condition ? value1 : value2;

Regla 8: Declaraciones simples

No escribas múltiples declaraciones de variables en una misma linea. JavaScript lo permite pero no es lo mejor.

// Incorrecto

a = b; count++;

En lugar de eso, debes de tener una linea por cada declaración y siempre usar el punto y coma al final de la linea.

// Correcto

a = b;

count++;

Regla 9: Uso del “if”

A pesar de que JavaScript te lo permite, no debes omitir las llaves y nunca deberías escribirlo en una sola linea.

// Incorrecto// Sin llavesif (condition) 
	doSomething();

// Con llaves pero en una sola lineaif (condition) { doSomething(); }

// Sin llaves y en una sola lineaif (condition) doSomething();

Usa siempre las llaves y haz el bloque de código correspondiente.

// Correctoif (condition) {
	doSomething();
}

Regla 10: Uso del ciclo “for”.

No declares la variable iteradora en la inicialización de un ciclo for

// Incorrectofor (let i = 0; i < arr.length; i++) {
	// code
}

Siempre declara la variable iteradora antes del ciclo.

// Correctolet i;

for (i = 0; i < arr.length; i++) {
	// code
}

Regla 11: Strings

Para escribir las cadenas de texto en tu código JavaScript no deberías de unas comillas simples (‘’).

// Incorrectoconst description = ‘thisis a description’;

En lugar de eso, escribe las cadenas de texto siempre con comillas dobles (“”).

// Correctoconst description = "this is a description";

¡Perfecto! Si sigues estas simples pero importantes reglas definitivamente tu podrás escribir un código de JavaScript mas limpio y legible. Al final lo que importa es que puedas escribir un código mas limpio y legible por todos.

Cabe recalcar que estas reglas ¡no son de oro!, pero si estas empezando pueden ser una buena guía para que tengas buenas practicas desde el inicio.

Te invito a que continúes con tu camino a que convertirte en una desarrolladora de JavaScript, para ello te recomiendo la escuela de desarrollo web y la escuela de JavaScript.

¡Nunca pares de aprender! 💚

Escribe tu comentario
+ 2