57

Una buena práctica para escribir código: nombrar elementos

16487Puntos

hace 7 años

¿Les ha pasado que están súper inspirados escribiendo código pero repentinamente necesitan una luz divina que les diga qué nombre ponerle a la variable que están a punto de escribir?

Como Frontend, hay tantas cosas que debo nombrar en mi día a día: clases para cada elemento HTML, variables en Stylus que puedan ser reutilizables, componentes, archivos, funciones… Tengo que poner a volar mi imaginación para poder lograrlo.

A pesar de que es algo que depende totalmente de nosotros y no hay una forma estrictamente correcta o incorrecta de hacerlo, nombrar cada elemento es un trabajo en el que debemos poner empeño, pues se verá impactado en la organización y mantenibilidad de nuestro código.

Fanny es parte del Team Platzi. Si quieres una carrera en Frontend, empieza por el Curso de Desarrollo Web y luego el Curso de Responsive Design.

Lo más importante es que el nombre que le asignes siempre refleje el trabajo que está haciendo, de esta forma podemos incluso reducir la necesidad de comentar cada línea de código con su funcionamiento.

A continuación algunos consejos que hay que seguir para evitar algún desastre a la hora de nombrar un elemento en tu código.

Aprende sobre: Qué es variable y constante

Nombres descriptivos

Abreviar nombres puede que en algunos casos no sea tan buena idea. Seguramente con el paso del tiempo o cuando un nuevo desarrollador tenga que darle mantenimiento a tu código habrá quedado en el olvido lo que esa variable representa. Lo ideal es utilizar nombres que describan la funcionalidad de nuestro código.

Por ejemplo, es mucho más descriptivo escribir:

functionreceipt(){
....
return ingredient;
}

que:

functiona(){
....
return b;
}

Nombres conformados por un conjunto de palabras

Generalmente los lenguajes de programación no permiten espacios en las variables. Sin embargo hay distintos métodos para separar el conjunto de palabras que conforman una variable y que de esta manera logren ser más legibles. Esto se puede hacer capitalizando cada palabra agrupada (camelCase) o separando cada palabra con underscore
(snake_case).

Por ejemplo:

var post_likes = 4;

o

var postWords = 320;

La longitud de el nombre asignado

A pesar de que los nombres de variables cortos deben ser sustituidos por nombres de variables más largos y descriptivos, no quiere decir que tenemos que usar frases completas. Es importante que el nombre describa qué es lo que el código asignado hace y no cómo lo hace. Utilizar un nombre largo puede incluso ser más susceptible a errores tipográficos a la hora de escribirlo. Se dice que la longitud recomendable es de 2 a 4 palabras o entre 8 y 20 caracteres.

Para ahondar en estas y otras buenas prácticas, consulta nuestros cursos de desarrollo web.

En conclusión nombrar elementos no es difícil, más bien es un súper poder o habilidad que va mejorando con la práctica. Nosotros como desarrolladores tenemos la responsabilidad de hacerlo lo mejor posible.

Si recién comienzas a programar, te invito al Curso de programación básica para empezar a implementar estos consejos en tus proyectos. Y si llevas ya tiempo programando sin hacer uso de ellos, compártenos cómo te va siguiendo estas recomendaciones. Estoy segura que los desarrolladores que se topen con tu código en el futuro te lo agradecerán.

Stefanny
Stefanny
fannytaviles

16487Puntos

hace 7 años

Todas sus entradas
Escribe tu comentario
+ 2
Ordenar por:
2
12384Puntos

Esto es lo que me enseñaron en la universidad

Por norma estricta
1.- Variables si son compuestas se separan por underline “_”:
No se usa el guión medio para que no se confunda con una operación matemática.

2.- Funciones usan CamelCase, para distinguirlas de las variables y sólo si se requiere para separar relacionalmente una funcion dentro de una familia se usa uderline “_”

Ej:

hola_esto_es_una_variable = 1;
y
holaYoSoyUnaFuncion(“holi”);
fix_soyUnaFuncionExterna(“chao”);

Las variables actualmente tienen que ser descriptivas, antiiiiiguamente sólo teníamos 8 caracteres o bits y teníamos que usar variables muy cortas, actualmente son 255 caracteres, así que te puedes expresar libremente.

EJ ( 251 Chars ):
hola_yo_soy_una_variable_de_muchos_caracteres_aqui_puedo_poner_una_cosa_muy_larga_bueno_se_entiende_la_idea_esta_variable_es_muy_larga_y_descriptiva_por_lo_que__necesario_que_te_limites_con_los_nombres_de_las_variables_a_no_ser_que_te_preocupe_el_peso

1

Gracias,
creo que ahora puedo entender un poco mas como nombrar las variables
PD:Soy aprendis

1
3Puntos

Leyendo el post puede parecer evidente que hay que poner nombres que definan inequívocamente qué hacen, pero aún así nos hartamos de ver código con variables indescifrables.

Tomo nota del post y lo comparto con algunos…xD

1
6828Puntos

Muchas gracias, como estudiante cientos de veces observo a mi docente llamar a las variables a, b, c, aa, o bb, después varias lineas ya se pierde la atención y luego no funciona nada. Que mejor que aprender buenas prácticas desde el inicio, gracias.

1
-10Puntos

Hola saludos a todos. En realidad por ahí en algún lugar leí sobre los siguientes estilos que se pueden usar para nombrar directorios y archivos de producción y documentación. Sin embargo vale la pena aclarar que eso se limita hasta las herramientas que usemo, por ejemplo Django usa determinados nombres para su estructura de proyecto y sería inoficioso y hasta no funcional llegar a modificar nombres de archivos, directorios y variables; creo. Los estilos que les comentaba son:

snake_case
camelCase
PascalCase
kebab-case

He encontrado diferencias entre algunas fuentes, por ejemplo el PascalCase lo mencionan como UpperCamelCase y así entre otros.

Saludos!!